The facts are that we DO have to contend with the likes of IE6 (and IE7) and things like conditional stylesheets might be browser detection, not quite best-practice, and take a few minutes longer to code up, but ultimately it’s about getting these sites to display and work well in these browser, if that means sacrificing a bit of standards, then unfortunately so be it.

Please don’t take this the wrong way, I love standards, I’m a big fan of them. I hate IE6 and the fact that I still have to write code for it. However, a utopian perspective on these issues will not help me when I need to fix something for IE6 only, a conditional stylesheet with some specific CSS will though.

Come on SitePoint bit more substance in future please.

that means putting a div inside of a div if you want to do width of one element and padding on another

There are cases when that may be a solution, but you can certainly minimize it. And this is all assuming that IE5/5.5 is one of your targeted browsers? I thought you wanted to drop IE6 support?!

that means you would then need to put those same margins on every other text, element

Why? If it’s sidebar containing a menu, you might only have a single internal UL to style? If it’s your main content block, then perhaps an additional DIV is the lesser of all evils. But if you really cannot face the horror of that DIV, why not apply #content * { margin-left: ...; margin-right: ...; } to start with?

If IE would respect web standards, conditional comments or hacks wouldn’t exist or be necessary. We as developers use them because we really don’t have another choise.

So until IE reaches the lower porcent of the market, which is highly difficult due to the issue that most people use windows and have that crappy browser as a default one (and most times they don’t even know that there are other posibilities), we are screwed.

We are all aware about this facts, this article is not ‘enlightning’.
We use this stuff because is the only way for know.

Ignacio

Dude. You do web development, right? You have done layout with CSS, right? You are aware that complex layouts involve positioning or floating divs, and that many of those divs require both widths and padding, eh? And so that means putting a div inside of a div if you want to do width of one element and padding on another.

Even the P example is bad. If you’re putting margins on a P rather than putting padding on a DIV, that means you would then need to put those same margins on every other text, element, such as UL, OL, DL, BLOCKQUOTE, FORM, TABLE, and more. It’s way too easy to miss something there. Far better to just adjust the width to accommodate the IE5s in a stylesheet served through conditional comments.

Amusing – you say “don’t use CSS hacks” then link to a page containing mostly IE6 CSS hacks! :)

Conditional comments are worth using for IE6/7 when you can keep your main stylesheet clean of crud like this:

————————

#element {
min-height: 20em;
height: auto !important; /* understood by all browsers */
height: 20em; /* IE6 incorrectly uses this value /*
}

————————
(what a waste of bandwidth for the ~80-90% of people not using IE6!)

The following method works well for me:

1. Get the main layout/styles working 100% in a decent browser (Firefox/Safari/Opera) with no hacks and using clean & tidy HTML
2. Use conditional comments to load an external style sheet for IE6 and IE7 if required (a separate CSS file for each version tends to work well for larger sites).
3. Do what it takes to get the job done in each broken version of IE

Also, who cares about valid CSS for IE6 when the browser is so broken in the first place?

Hope that helps someone anyway :)

Adding extra HTML purely for IE? Yeah, that’s a hack, even if it validates.

Why do you necessarily need extra HTML? If you have a P inside a DIV, you simply apply margins to the P rather than padding to the DIV.

You should keep your HTML as simple and clean as possible. Yes, IE5 and IE5.5’s box model differences can throw up problems, but I doubt many developers are coding for them now. Even so, it’s possible to support those browsers if you are aware of the issues.

Finally, There is no such thing as “future proofing” for all browsers. How can you guess what each vendor is going to produce? Microsoft’s track record speaks for itself: Does IE7 follow IE6? No. Did they follow standards? No. So why would you expect IE8 Follow IE7 or the standards?

The direction of travel is towards standards compliance. IE7 fixed a lot of the problems of IE6, but MS didn’t really have a handle on how important standards compliance was to the web community even then. The backlash against dodgy browsers and even IE7 has sunk in with the browser builders. It is a pretty safe bet now that each iteration of a browser will be at least as compliant as the previous one, and will not introduce any significant rendering bugs. Any all-new browser that doesn’t meet the standards will be laughed out of town.

So yes, code that is written to the standards and works in all current major browsers is as future-proofed as it is possible to be. Code that is full of hacks is pretty much guaranteed to go wrong in some browser or other in the future.