figaro11 wrote:
Hi, it's me jellyfish.
This looks good and all but IE6 adds a few pixels more on the right columns left margin. Firefox, opera and IE7 all look the same pixel wise. Why does IE6 have a few pixels more? I wouldn't be asking this question if IE had a firebug, that's obvious and unfortunate.
If IE had a firebug it would explode
Kiddin aside, the pixels might have to do something with the
3-pixel-jug-bug. But I would have to see your complete code to be sure.
As I said earlier, beware of using both margins, borders and paddings. Beware of margins and floats in IE anyway. As JAB suggested, setting the needed margin/padding on another element, either another div or the content itself will make it work.
And last: how important is it to have everything pixel-perfect in every browser? It's a trap many developers fall in to, trying to match their layout in each and every browser. But you know what? You are the only one looking at the site with multiple browsers at the same time. Someone using IE6 and visiting your site really doesn't know that the top-margin of that header on the right is 3px larger then the margin in Safari. And he or she probably wouldn't care either .. Besides that, there will also be differences between operating systems, devices (mobile phones), etc which you cannot deal with anyway.
And a browser like IE4? Does anyone still have visitors using that browser? I even stopped "supporting" for IE5 a while ago. Not meaning my websites can't be used in that browser. Just that I'm not going to waist my time fine-tuning pixels for that browser anymore.
So dealing with the obvious bugs is fine, but pulling your hair out for weeks on end for 2px difference ... think about your health :0