There's been alot of talk lately about what's going to happen to current implementations of IE related CSS hacks when IE7 gets pushed to the mainstream. The past couple of years have been pretty stable with knowledgeable folks only having to employ a few basic tricks to keep things happy. Being a veteran of the version 4 browser wars, I've been pretty grateful about current CSS and DOM implementations to say the least.
Here's what happened to me
So I'm pretty good at writing clean W3C compliant CSS, I've been using CSS since about 1999 sometimes for good, sometimes for evil. With this new look and feel of my site I was running into an issue that I had never thought about before. How different browsers handle list item indentation.
As you can see over on the right (if you can't see over on the right because you subscribe via RSS, let me say thank you! I'm currently up to 20 subscribers or somthing woot!) anyway, as you can see over on the right, the nav elements for other posts, tags and whatever the hell i have over there are list elements, they sit in a div that floats right is 200px wide and everything is nice and happy and not going anywhere (unless of course you disable CSS). These list elements also have a little image that is being used as a bullet, it's set with css, and needs about (well exactly) 16px to display well, not be hidden, yadda yadda.

It's never just one thing right?
Of course it's not ever just one thing, at least for me it always seems like it's either two issues, bugs, what-have-you... or it's just straight up raining cats dogs and the kitchen sink and my hairline creeps a bit farther from my eyebrows. Well this time, I was only dealing with the two thing rule... however, I only knew what one of the things was. For some reason IE 6 wasn't displaying my little background image for each list element, not only that, it was actually displaying everything but the first few characters of each and every link. That's because Firefox likes to indent it's list items a bit and I had the margin-left property set to -2.5em, so in IE, it was REALLY making it -2.5em and pushing things over to the left and getting clipped.

One way of being able to exclude a property in CSS from being set in IE is to use the child selector method. Here's a exerpt from an article over at positioniseverything.net that explains it nicely.
The Child Selector
This selector uses a ">" symbol as a "combinator" that is placed between two parts of a CSS selector, and indicates that the target of the rule is the element on the right side of the ">" combinator, but only when that element is a direct child of the element to the left of the combinator. Thus, the selector table>td can never target any element, because TD's are never direct children of tables, only of TR's. On the other hand, the selector tr>td would select every TD on the page, since all TD's are direct children of TR's.
...
IEwin just ignores the entire rule because it cannot recognize that child combinator. Now that support is coming, IE7 will be able to view such hacked CSS. But since that browser will still have quite a few failings, letting it get a look at those hacks could be less than desirable, to say the least.
Not that big of a deal. Sofar there isn't any need for any conditional statements, or any of that jazz. I just simply moved my setting of the margin-left property down to a second style that will appear to redefine the style in Firefox and Opera and just be ignored by IE
CSS:
-
#sidenav li, #casestudies li, #download li {
-
display: block;
-
width: 179px;
-
padding-left: 3px;
-
/*margin-left:-2.5em;*/
-
}
-
-
/* IE6 left margin fix */
-
#sidenav>li, #casestudies>li, #download>li {
-
margin-left:-2.5em;
-
}
-
/* end IE6 left margin fix */
-
-
#sidenav li a, #casestudies li a {
-
display: block;
-
width: 176px;
-
background: url(../images/li_small.gif) no-repeat 0.2em 0.4em;
-
padding-left: 1.1em;
-
}
-
-
#sidenav li a:hover, #casestudies li a:hover {
-
color: #a5965a !important;
-
width: 176px;
-
background: #f8faff url(../images/li_smallhover.gif) no-repeat 0.2em 0.4em;
-
padding-left: 1.1em;
-
border-right: 3px solid #a5965a;
-
}
Ok, looks good, everything's peachy. I'm seeing the list elements in the same place now in Firefox, Opera and also IE6. At this point I had remembered reading somthing about the Child Selector being supported in IE7, so now I had to see for myself what was going on and then decide what I was going to do about it.
It's true, IE7 doesn't ignore the Child Selector and went ahead and rendered the style, this time, it's not clipped, and way off to the left.

The first thing that I thought to do is try to make sure that I set the margin-left property for everyone BUT IE. I couldn't seem to find anthing out there that would to specifically exclude IE, only ways to directly express IE. I wasn't interested in having to do the inline VBscript method (that doesn't appear to work within linked CSS files anyway, tell me if I'm wrong)
HTML:
-
<style type="text/css" media="screen">
-
...some default css....
-
</style>
-
<!--[if IE]>
-
<style type="text/css" media="screen">
-
...some IE only CSS...
-
</style>
-
<![endif]-->
Additionally I didn't want to require a second file that's just for IE because when it comes down to it, it's Firefox and Opera that aren't displaying how I'd like and not IE, hence the need to set the property in the first place.
Ok so it's looking like this more of a Firefox / Opera hack
It all comes down to the lowest common denominator, the List Element itself. The chain of events sofar are this
- the core attributes are set
- the margin-left attribute is set for everything but IE6
- now we need to reset margin-left for IE7 only
This is where I had to use that client-side VBScript, it's quite simple. since each and every List Element on my site I indend to operate in the same way, I didn't have to do any more than this.
HTML:
-
<style type="text/css" media="screen">
-
@import "includes/naterkane.css";
-
</style>
-
<!--[if IE 7]>
-
<style type="text/css" media="screen">
-
li { margin-left: 0 !important; }
-
</style>
-
<![endif]-->