This post originated from an RSS feed registered with Web Buzz by Lee v. Original Post: Hack CSS works fine on all browsers IE6. IE7. IE8. Opera 2, Firefox 2,3,4, Feed Title: IT Jungles Feed URL: http://www.itjungles.com/rss Feed Description: Learn all tech stuff at ITJungles.com Latest Web Buzz Posts Latest Web Buzz Posts by Lee v Latest Posts From IT Jungles

Web browsers face quickly born, myself a web developer, to work regularly with the html code. How can my site runs fine on all browsers IE6. IE7, Safari, Opera ..., thanks to the CSS language.

Through many years of experience, I put the experience to be below

1: WebKit
@ media all and (min-width: 0px) {body: not (: root: root) ... {...}}
Example:
@ media all and (min-width: 0px) {body: not (: root: root). itjungles {background-color: #fafafa;}}

Opera 7.2 up, 9 or 9.5 up (CSS valid but  validator have bug)

@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0)

{/* 7.2 up */

head~body … { /* 9 up */ }

:root … { /* 9.5 up */ }

}

Example:

@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
#itjungles { color:#ff0000; } /* Opera 7.2 up */
head~body # itjungles { color:#ff0000; } /* Opera 9 up */
:root # itjungles { color:#ff0000; } /* Opera 9.5 up */
}

2: min-height in IE6 and Firefox

If you work with CSS you might have trouble because of the length div

• how long the div itself out as more content

• min-height attribute does not work on IE6

Please follow the following code:

#itjungles {
min-height:10px; /* for modern browsers */
display:table; /*for firefox*/
height: auto !important; /* for modern browsers */
*display: block; /* for IE5.x and IE6 */
_height: 50px; /* for IE5.x and IE6 */
}

Did you like this tip? {fblike}