Albertux# ./Blog

CSS3 and Browsers

CSS3 Selector Test: http://www.css3.info/selectors-test/test.html

Firefox 3.1b1pre, Opera 9.52 and Safari 3.1: (Passed 578 out of 578 tests)

Firefox 3.0.1: (Passed 373 out of 578 tests)

MSIE 6: (Passed 276 out of 578 tests)

MSIE 7: (Passed 329 out of 578 tests)

MSIE 8 Beta 2: (Passed 348 out of 578 tests)

CSS3 Attribute Selectors: http://www.css3.info/preview/attribute-selectors/

CSS3 Opacity: (http://www.css3.info/preview/opacity/)

CSS3 Round Borders:

#somediv {
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}

More about CSS3 http://www.css3.info

CSS and MSIE

MSIE (Microsoft Internet Explorer) CSS Hack:

.somediv {
    height: 15px; /* all browsers */
    #height: 20px; /* all IE Browser */
    _height: 25px; /* only IE6 Browser */
}

MSIE use conditional comments: (http://msdn.microsoft.com/en-us/library/ms537512.aspx)

 <!--[if IE 6]>
    <script src="js/iefix.js" type="text/javascript"></script>
    <link rel="stylesheet"  href="css/iefix.css" type="text/css"></style>
    <div> some html code </div>
<![endif]-->

In this example only if the Browser are IE6 add this code:

<script src="js/iefix.js" type="text/javascript"></script>
<link rel="stylesheet"  href="css/iefix.css" type="text/css"></style>
<div> some html code </div>

Old browsers (MSIE) support :hover, :active and :focus:
http://www.xs4all.nl/~peterned/csshover.html

<style type="text/css">
    body {
        behavior:url("csshover.htc");
    }
</style>

Make MSIE behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6. http://code.google.com/p/ie7-js/