CSS Hacks & Issues

PDF Download free css hacks and issues in Adobe PDF format

1.   Introduction

This article includes 8 helpful solutions which we find essential when designing with CSS

2.   Browser-Specific selectors

These selectors are very useful when you want to change a style in one browser but not the others.

IE 6 and below

    * html {}

IE 7 and below

    *:first-child+html {} * html {}

IE 7 only

    *:first-child+html {}

IE 7 and modern browsers only

    html>body {}

Modern browsers only (not IE 7)

    html>/**/body {}

Recent Opera versions 9 and below

    html:first-child {}

Safari

    html[xmlns*=""] body:last-child {}

To use these selectors, place the code in front of the style. E.g.:

    #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 */

Source

3.   Transparent PNG’s in IE6

An IE6 bug which causes a great deal of hassle is that it doesn’t support transparent PNG images.

You will need to use a filter which overrides the CSS.

    * html #image-style {
            background-image: none;
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="filename.png", sizingMethod="scale");
            }