1. Introduction
This article includes 8 very useful solutions that you will use when you encounter problems with CSS design.
2. Browser-specific selectors
These selectors will be very useful when you need to design CSS for a certain browser.
IE6 and lower versions
| * html {} |
IE7 and lower versions
*:first-child+html {} * html {} |
*:first-child+html {} |
html>body{} |
| html>/**/body{} |
Opera9 and lower versions
html:first-child {} Safari html[xmlns*=""] body:last-child {} |
To use these selectors, place them before the style. For example:
#content-box { width: 300px; height: 150px; } *html #content-box { width: 250px; } /* overrides the above style and changes the width to 250px in IE 6 and below */ |
3. Let IE6 support PNG transparency
A bug in IE6 caused big trouble, it did not support transparent PNG images.
You need to use a css filter
*html #image-style { background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil ename.png", sizingMethod="scale"); } |
4. Remove the dotted line of the hyperlink (only valid for FF)
Under FireFox, when you click a hyperlink, a dotted outline will appear on the periphery. This is easy to solve, just add it to the label style
| outline:none . a{ outline: none; } |