IE5.x does not correctly interpret the box model, so your correct code won't
work there.  It also won't work in NN4 or IE3 - the reason is the same for
all of them.

I don't know if there is a hack for this short of platform sniffing, so I
can't be very helpful.  My choice would be to design for the more compliant
browsers and let the page fall as it may in older platforms.

Of course, you might be able to work something out with percentiles - food
for thought, anyway.

D


----- Original Message -----
From: "Mike Taylor" <lonewolf(at)one.net>


I'm running into a border issue with IE 5.x. The following test page, which
looks fine in IE 6+ and Netscape 6+ and Mozilla 1+, shrinks the size of the
window in IE 5.x.

http://w3.one.net/~lonewolf/testcss/homepage_ie.htm

IE 5.x does not factor the border or padding setting in the total width of
the box when measured in pixels. Notice how the header graphic, which is
305px wide seems longer than the box below it. But on IE 6+, Netscape 6+ and
Mozilla 1+, this looks fine.

So if I set the width for the box to 295px, knowing that IE 6 and
Mozilla/Netscape also factor padding and borders into the total width, I end
up with 305px total (padding set to 3px, border set to 2px)

295px + 3px(left) + 3px(right) + 2px(left) + 2px(right) = 305px total width

But IE 5 interprets it thusly:

295px + 0px(left) + 0px(right) + 0px(left) + 0px(right) = 295px total width

It's interesting to me that if I remove the XHTML doctype, then IE 6 starts
acting like IE 5, which makes me believe that IE 5 is rendering my page in
"quirks" mode even though the doctype is there.

I'm also aware of a "hack" for CSS with regard to IE 5.x, but I don't think
I can use this hack to overcome the above scenario without affecting the
browsers that do get it right.

Any ideas?

• Web Designer Courses
• Off the Shelf Training Courses

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA