IE6 behaves differently !

[dskanth]

Hi, i have a severe problem with width in IE6.
Iam able to get the proper alignment in all other browsers including IE7/8, Firefox and Chrome.

But iam not clear why iam not able to get it in IE6. I hope the problem is with width.

I have attached the screenshots for my problem, please suggest what i can do to make the right curve align above the menu, like in firefox.

Iam not sure why IE6 behaves in a different way than other browsers.
Please does anybody have a solution to this IE6 related style issues ?


Thank you.

[jql999@yahoo.com]

Because IE6 S#(%$!

There are a few different ways to fix this.

Make the overall wrapper a few pixels bigger or each item a few pixels smaller.

I noticed the "_width", which works for all MSIE. But even IE6, IE7 and IE8 render differently at times.

You could also do a conditional style statement just for IE6

<!--[if IE 6]>
<link href="...ie6Hacks.css" rel="stylesheet" type="text/css" />
<style>
...
</style>
<![endif]-->

Having used both methods, I'd rather shave pixels then have separate style definitions, which can get out of hand and become a maintenance nightmare very quickly.

J

[dskanth]

Thanks for the suggestion, it sounds hopeful.

[simcomedia]

I didn't have time to sift through all your code to see what was what but my best guess about your issue is that IE6 'doubles' your margins if you add a margin to a floated element nested inside another floated element. So, something like this:

<div id="divone" style="float: left;">
<div id="divtwo" style="float: left; margin-left; margin-left: 30px;">
content content content
</div>
</div>

IE6 counts that margin-left as double, 60px instead of 30px. So, what this does if you're using a fixed width item (like your menu) is make it 30px longer and causes it to 'wrap' like it's doing.

There's a simple fix. For all your div's that have a margin in the same direction as its float (ex: float: left; margin-left: 30px add the following to your CSS for that id or class:

display: inline;

Furthermore, anyone still using IE6 is a lazy fat little red-headed kid with moobs. Upgrade for Pete's sake...it's free

[BLiZZaRD]

I would stop coding for IE6, it is too outdated to worry about. I have stopped coding for IE6 and lower on all of my sites for just over a year now and haven't had one complaint nor have I seen any loss of page hits.

[simcomedia]

I applaud you There's no reason why designers should create sites based on the lowest common denominator.

[davelf]

firefox, IE 6,7, netscape, safari, opera, many more....

Why there's a lot of internet browser, why don't we just use one to open all...
Actually the coder is a real victim, LOL

[jql999@yahoo.com]

While I would love to see IE6 die a much-deserved death, you have to watch your stats and know your audience.

When people use the web site you work on to do something like pay taxes, you can't just blow off 15% of your audience.

(actually down to 12% and dropping - woo-hoo!)

[dskanth]

I do agree with you guys... IE6 is a lazy fat browser, not supporting much of the css.

I hate IE6 and look forward to upgrade it to IE8 or just use any other browser like Firefox/Chrome.

[traq]

dskanth, was your problem solved? simcomedias suggestion is likely the cause. Let us know.

As for the "abandonment" debate, I agree in theory, but in practice, you need to code for as many people as possible. Why abandon the 12-20% (estimates vary) that use IE and embrace the 2-9% that use Opera? (No one complains when you come in and ask for help with a bit of javascript that works in Opera 9, but not in 10.)

Of course, that doesn't mean that you have to kill yourself over it, either. IE6 is (hopefully) on its way to being extinct. Look into universal style sheets, maybe combined with a warning that their browser is out of date. I usually just remove the problematic rules in my IE6 css, such as floats, etc.. They get a plainer layout, but it still resembles the rest of the site.

as for jql999's suggestion, personally, I think including all your hacks in your main stylesheet is far more difficult, confusing, and unattractive than making a separate one that's only served if IE wants it. Use those conditional comments!:

<!--[if lte IE6]><link rel="stylesheet" type="text/css" href="css/ieonly.css"><![endif]-->

good luck!