Useful CSS Tricks
1. Prevent Firefox Scrollbar Jump
Firefox usually hides the vertical scrollbar if size of the content is less than the visible window but you can fix that using this simple CSS trick.
html{ overflow-y:scroll; }
2. Cross Browser Minimum Height
Internet Explorer does not understand the min-height property but here’s the CSS trick to accomplish that in IE.
#container{
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}
3. Highlight links that open in a new window
a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
}
4. Drop Caps Using CSS
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:3.0em;
font-family:Georgia;
}
5. Cross Browser Opacity
CSS3 standard includes the opacity property, but not every browser supports it, here’s the CSS trick for cross browser transparency.
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
6. Vertical centering with line-height
If you are using fixed height container and need to vertically center the text, use the line-height property to do that perfectly.
line-height:30px;
4. Remove vertical textarea scrollbar in IE
IE adds a vertical scrollbar to textarea input fields regardless of the height of content in it. You can fix that with this simple CSS trick.
textarea{
overflow:auto;
}
5. CSS Pointer Cursors
input[type=submit],label,select,.pointer { cursor:pointer; }
6. Capitalize Text
text-transform: capitalize;
7. Small Caps Text
font-variant:small-caps;
8. Highlight Text Input Fields
highlight the input field currently in focus. This trick does not work in IE though.
input[type=text]:focus, input[type=password]:focus{
border:2px solid #000;
}
9. Highlight Acronym and Abbr Tags
acronym, abbr{
border-bottom:1px dotted #333;
cursor:help;
}
10. Text Shadow Property in CSS3
The text-shadow property looks cool, but it is currently not supported by major browsers including Firefox 3.0, but will be supported in Firefox 3.1 beta. Browsers that support this CSS3 property are Safari 3+, Konquerer, Opera9.5+ and iCab.
text-shadow: 3px 3px 4px #999;
text-shadow: 0 1px 0 #FFFFFF;
11. z-index - content slider block cover over the drop-down menu
Adding z-index: 0; in the contentslider.css fixes it
#slider {
z-index: 0;
}
12. position:fixed
<style type="text/css">
span.followus{
font-family:Arial;
position:fixed;
left:10px;
bottom:10px;
}
</style>
<div>
<span class="followus">
<a href=""><img src="images/folowus.jpg"/></a>
</span>
</div>
