While working on an e-commerce system, I wanted to use some CSS tricks for it. I had noticed that the nested styles take precedence over the global ones. For Example, consider the following,
.Productbox{
width:150px;
height:200px;
background:#000000;
}
Why people still use Internet Explorer ?
This one more example where IE SUCKS…
Just check out CSS transparency settings for different browsers. Here is CSS code currently set to 50% transparency:
.test_transparency {
filter:alpha(opacity=50);
opacity: 0.5;
}
Here is what each of those CSS properties is for:
• opacity: 0.5;
This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.
• filter: alpha(opacity=50);
This one you need for IE.
Unfortunately, it does not work on IE.
Do you know how to overcome this problem?
One way to bypass that bug is to use JavaScript, then it suddenly works. Or just specify a height / width when it doesn’t conflict with the stylesheet.
.test_transparency {
height:100%;
width:100%;
filter:alpha(opacity=50);
opacity: 0.5;
}
click here for live example
Ran into a problem today that I really should have forseen: as usual I coded a site so it all
lines up perfectly in Mozilla and IE6, flip over to IE7 and it’s all out of whack. I realized the reason right away: in terms of calculating borders, IE added the border pixel inside the div. Unlike mozilla which added the border outside of the div 
Here is the corresponding HTML:
<div class="test">Only !important Tag
which will display border in IE6 as well as in Mozilla
but not in IE7
</div>
Here is what my CSS looks like:
.test {
width: 200px;
height: 200px;
background:#000000;
border:1px dashed #000000 !important;
border:1px dashed #ffffff;
color:#FFFFFF;
}
This will solve issue in IE6 and Mozilla but not in IE7
I’ve used !important to override the bordercolor property previously set. The :LANG Selector is not supported by IE7 and therefore all versions of internet explorer will not read these styles.
Now I begin by adding a lang attribute to my body element:
<body lang="en">
Here is the corresponding HTML:
<div class="item">
The :LANG Selector is use which is not supported in IE7
</div>
Now, add the CSS to target our div element and start filtering out browsers:
.item {
width: 200px;
height: 200px;
background:#000000;
border:1px dashed #000000;
color:#FFFFFF;
}
*:lang(en) .item{
border:1px dashed #ffffff;!important
}
I’ve used !important to override the bordercolor property previously set. The :lang selector is not supported by IE7 and therfore all versions of Internet Explorer will not read these styles.
Only !important Tag
View the IE7 css hack test page to try it out in your browser.
Which is the proper way to hide information from Internet Explorer? While many CSS filters and hacks rely on using advanced selectors that IE 6 and below don’t recognize, that is not going to be the case for Internet Explorer 7.
So the proper way to hide information from Internet Explorer would be to use something similar to the code below.
Note: the last line of this method may result in validation errors.
><!--[if gte IE 7]>
<link rel=”stylesheet” type=”text/css” href=”ie-hacks.css”
media=”screen” />
<![endif]–>
Likewise, down-level comments may be used to filter scripts, markup, or just about anything.
In this case, a JavaScript file is hidden from all IE less than IE7:
<!--[if gte IE 7]>
<script src=”http://domain.com/javascript.js”
type=”text/javascript”></script>
<![endif]–>
This example shows CSS hidden from any IE strictly less than IE6.0:
<!--[if gte IE 6.0]>
<style type=”text/css”>h1 { color: red }</style>
<![endif]–>
Make sure
1)That the first call is simply a link to an overall styles.css file. This file will hold all the CSS for whole site, for all browsers.
2)That when taking care of the differences, you do not need to overwrite the entire rule, only those properties that need to change.