This article explains some of the browser specific stylesheet hacks (like ie only, firefox, etc) that can be used in developing a web application on different browsers

Web UI design for beginners may be complicated than it seems specially if your developing cross browser application. For example building a web app compatible with firefox, ie6 and ie7.

One ways is to simply load the appropriate css file using:


<!--[if IE]>
<style type="text/css">
@import url(ie-styles.css);
</style>
<![endif]-->

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" media="all"/>
<![endif]-->

//And there are the known hacks:
1.) Style for IE only, just prefix the child element with * html:
e.g:

* html div {...}
* html div classname {}

2.) !important tag is ignored by IE6 and below browser so:
eg. background-color: green !important; /* most browser read this, but ignored by ie6 */

background-color: white; /* IE6 and below will use this value */


3.) IE6 only acceptable prefix _property and -property. Failed on non ie6.
eg. _color: red; /* IE6 and below only */

color: green; /* firefox, etc */


4.) IE7 only acceptable prefix *property. Failed on non ie7.
eg. *color: red; /* IE7 only */

color: green; /* firefox, ie6 and below, etc */


5.) html *, selects all the child of the html element in ie7 and below only.

.html * { color: red; }


6.) >body, selects the body element in ie7 only
eg. >body { background-color: red; } /* ie7 only */
body { background-color: green; } /* non-ie 7 */
Can be extend: >body classname or >body div classname
I know I've tried html>body in firefox and it's working too.

7.) And what I learned last night. I have two dropdown menus, the second is completely below the first. The problem is the first dropdown should have a z-index greater than the second menu so it will overlap the second. Example

menu1 list /* if i click here dropdown will pop out and cover menu2 list */
menu2 list

Note: I have it working in non-ie.

Actual tags:

<ul class="horizontal1">
<li>
item
<ul class="vertical1">
<li>sub-item</li>
</ul>
<li>
</ul>
<ul class="horizontal2">
<li>
item
<ul class="vertical2">
<li>sub-item</li>
</ul>
<li>
</ul>

//css:
.vertical1 { z-index: 3; }
.horizontal2 { z-index 1; }


Note:
I got most of the ideas from the web just google them for more information.

Even though the z-index of .vertical1 is greater than .horizontal2, items from horizontal2 still shows in the top of the stack, and my conclusion is that IE considers the parent tag and ignores that of the child example:


<div class="one">
<div class="two"></div>
</div>

//css
.one { z-index: 0; }
.two {z-index: 1; }


*z-index of .two will still be 0 inherited from .one.
That's all :-D, Hope I find it useful in the future :-)
This article explains some of the browser specific stylesheet hacks (like ie only, firefox, etc) that can be used in developing a web application on different browsers This article explains some of the browser specific stylesheet hacks (like ie only, firefox, etc) that can be used in developing a web application on different browsers Reviewed by czetsuya on Tuesday, December 02, 2008 Rating: 5
Powered by Blogger.