Webuser Forums: cross browsers

Hey, that's a really good start!

Your problem is indeed the IE box model problem.

You're missing a DOCTYPE which tells the browser what kind of HTML you are using and what mode to put the browser in (standards or quirks)
At the top of the page above the html tag, plus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Using Strict will put IE into Standards mode which means it uses the proper box model. Now your design is the same in firefox and IE6, albiet broken - but easier to fix.

You now need to take padding into account when working out widths and heights - they now /dont/ include padding and borders. Also IE and Firefox have different ideas on what a 'thin' border is, so change that to 2px solid black instead.

So change your header height to 61px (85px - 2x2px border - 2x10px padding) and the widths of your columns to 191px (200px - 2x2px border - 5px padding).

After that your layouts should be pixel perfect and identical in IE6 and Firefox. (They might look a bit funny in IE on the Mac, and IE5.01, but that's a different matter...)

Or you can cheat by using the Layout-o-matic

Oh, and when you want to make your CSS navigation, I can highly recommend the List-o-matic - converts any list (UL / LIs) into a nice navigation bar - horizontal or vertical.

Paul Lomax
Internet Technology Manager
IPC Country and Leisure Media
- www.ipcmedia.com

Pick Me Up magazine - Real life as you've never seen it before!

Post Extras