How to Prevent Superscripts and Subscripts from Affecting Line-Height
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub { top: 0.4em; }
Css code to stop superscripts from breaking line heights once and for all
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub { top: 0.4em; }
Css code to stop superscripts from breaking line heights once and for all
Or any long bit of text, really.
.comment-text {
word-wrap: break-word;
}
A more robust browser support, you'll need more (via):
-ms-word-break: break-all;
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
The above works in Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+.
Just make sure you zero out the margin and padding on those elements as well (normal in any reset or normalization).
html, body {
height: 100%;
overflow: hidden;
}
This will hide scrolling bar
.yourselector {
width:200px;
height:100px;
background: url(/folder/yourimage.png) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}
Cannot be used with repeating, needs fixed with and height.
img, .png {
position: relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}
This requires a 1x1px transparent GIF image
As in, the game PICROSS3D.
.btn {
color: white;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 20px;
text-decoration: none;
text-shadow: -1px -1px 1px #616161;
position: relative;
padding: 15px 30px;
-webkit-box-shadow: 5px 5px 0 #666;
-moz-box-shadow: 5px 5px 0 #666;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
margin: 0 10px 0 0;
}
.btn:hover {
-webkit-box-shadow: 0px 0px 0 #666;
-moz-box-shadow: 0px 0px 0 #666;
top: 5px;
left: 5px;
}
Smoother, but more markup and CSS needed.
<div class="rela">
<a class="btn green btn1" href="index.html">Jack</a>
<span class="shadow"></span>
</div>
.rela {
display: block;
width: 96px;
height: 56px;
position: relative;
margin: 10px;
}
.btn {
display: block;
line-height: 56px;
text-align: center;
color: white;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 20px;
text-decoration:none;
text-shadow: -1px -1px 1px #616161;
position: relative;
}
.shadow {
position: absolute;
top:5px;
left: 5px;
background: #666;
z-index: -1;
width: 100%;
height: 100%;
}
$(".btn").hover(function(){
$(this).stop().animate({
top: "5",
left: "5"
}, 100 );
},
function(){
$(this).stop().animate({
top: 0,
left: 0
}, 100 );
});
<a class=”GlobalOrangeButton” href=”http://yourwebsite.com”><span>So Neat!</span></a>
a.GlobalOrangeButton span {
background: transparent url(’http://media-sprout.com/tutorials/web/CSSSprite-SlideButton/images/button_left_orange.png’) no-repeat 0 0;
display: block;
line-height: 22px;
padding: 7px 0 5px 18px;
color: #fff;
}
a.GlobalOrangeButton {
background: transparent url(’http://media-sprout.com/tutorials/web/CSSSprit-SlideButton/images/button_right_orange.png’) no-repeat top right;
display: block;
float: left;
height: 34px;
margin-right: 6px;
padding-right: 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
a.GlobalOrangeButton:hover span {
background-position: 0 -34px; color: #fff;
}
a.GlobalOrangeButton:hover {
background-position: right -34px;
}
ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }
ul.box li {
position: relative;
float: left;
width: 250px;
height: 150px;
padding: 0;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }
ul.box li:before,
ul.box li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); }
ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg); }
Be careful that these boxes aren't sitting within another element that has a background, otherwise the negative z-index values (required for this to work) will force the shadows underneath that and not show up.
img {
-ms-interpolation-mode: bicubic;
}
If you scale down an image with width and/or height attributes, it's going to look terrible in IE unless you use this.
<section class="fieldset">
<h1>This is not a fieldset</h1>
<p>Booyah!</p>
</section>
.fieldset {
position: relative;
border: 1px solid #ddd;
padding: 10px;
}
.fieldset h1 {
position: absolute;
top: 0;
font-size: 18px;
line-height: 1;
margin: -9px 0 0; /* half of font-size */
background: #fff;
padding: 0 3px;
}
background-image: url(data:image/png;base64,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);
This is the css, html code for displaying Treeview Without any JavaScript
Demo: Course folder at http://www.liketly.com/course/features/
.css-treeview ul,
.css-treeview li
{
padding: 0;
margin: 0;
list-style: none;
}
.css-treeview input
{
position: absolute;
opacity: 0;
}
.css-treeview
{
font: normal 11px "Segoe UI", Arial, Sans-serif;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.css-treeview a
{
color: #00f;
text-decoration: none;
}
.css-treeview a:hover
{
text-decoration: underline;
}
.css-treeview input + label + ul
{
margin: 0 0 0 22px;
}
.css-treeview input + label + ul
{
display: none;
}
.css-treeview label,
.css-treeview label::before
{
cursor: pointer;
}
.css-treeview input:disabled + label
{
cursor: default;
opacity: .6;
}
.css-treeview input:checked:not(:disabled) + label + ul
{
display: block;
}
.css-treeview label,
.css-treeview label::before
{
background: url("icons.png") no-repeat;
}
.css-treeview label,
.css-treeview a,
.css-treeview label::before
{
display: inline-block;
height: 16px;
line-height: 16px;,
vertical-align: middle;
}
.css-treeview label
{
background-position: 18px 0;
}
.css-treeview label::before
{
content: "";
width: 16px;
margin: 0 22px 0 0;
vertical-align: middle;
background-position: 0 -32px;
}
.css-treeview input:checked + label::before
{
background-position: 0 -16px;
}
/* webkit adjacent element selector bugfix */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.css-treeview
{
-webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
}
@-webkit-keyframes webkit-adjacent-element-selector-bugfix
{
from
{
padding: 0;
}
to
{
padding: 0;
}
}
}
<div class="css-treeview">
<ul>
<li><input type="checkbox" id="item-0" /><label for="item-0">This Folder is Closed By Default</label>
<ul>
<li><input type="checkbox" id="item-0-0" /><label for="item-0-0">Ooops! A Nested Folder</label>
<ul>
<li><input type="checkbox" id="item-0-0-0" /><label for="item-0-0-0">Look Ma - No Hands!</label>
<ul>
<li><a href="./">First Nested Item</a></li>
<li><a href="./">Second Nested Item</a></li>
<li><a href="./">Third Nested Item</a></li>
<li><a href="./">Fourth Nested Item</a></li>
</ul>
</li>
<li><a href="./">Item 1</a></li>
<li><a href="./">Item 2</a></li>
<li><a href="./">Item 3</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-0-1" /><label for="item-0-1">Yet Another One</label>
<ul>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-0-2" disabled="disabled" /><label for="item-0-2">Disabled Nested Items</label>
<ul>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
</ul>
</li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-1" checked="checked" /><label for="item-1">This One is Open by Default...</label>
<ul>
<li><input type="checkbox" id="item-1-0" /><label for="item-1-0">And Contains More Nested Items...</label>
<ul>
<li><a href="./">Look Ma - No Hands</a></li>
<li><a href="./">Another Item</a></li>
<li><a href="./">And Yet Another</a></li>
</ul>
</li>
<li><a href="./">Lorem</a></li>
<li><a href="./">Ipsum</a></li>
<li><a href="./">Dolor</a></li>
<li><a href="./">Sit Amet</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-2" /><label for="item-2">Can You Believe...</label>
<ul>
<li><input type="checkbox" id="item-2-0" /><label for="item-2-0">That This Treeview...</label>
<ul>
<li><input type="checkbox" id="item-2-2-0" /><label for="item-2-2-0">Does Not Use Any JavaScript...</label>
<ul>
<li><a href="./">But Relies Only</a></li>
<li><a href="./">On the Power</a></li>
<li><a href="./">Of CSS3</a></li>
</ul>
</li>
<li><a href="./">Item 1</a></li>
<li><a href="./">Item 2</a></li>
<li><a href="./">Item 3</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-2-1" /><label for="item-2-1">This is a Folder With...</label>
<ul>
<li><a href="./">Some Nested Items...</a></li>
<li><a href="./">Some Nested Items...</a></li>
<li><a href="./">Some Nested Items...</a></li>
<li><a href="./">Some Nested Items...</a></li>
<li><a href="./">Some Nested Items...</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-2-2" disabled="disabled" /><label for="item-2-2">Disabled Nested Items</label>
<ul>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
AliceBlue | #F0F8FF | |
AntiqueWhite | #FAEBD7 |