Help with border issue in Firefox vs. IE

**kanjigirl** · 06-27-2005, 03:00 PM

Sorry if this is too basic a question - I'm working on a website that looks fine in IE and mostly fine in Opera. However, in Mozilla Firefox and Netscape 8.0 the content boxes are showing up incorrectly.

Here's the link - http://parallaxwebdesign.com/projects/mostlies/

There are four main content boxes in the layout, each of which are bordered (on one or more sides) by a 6px solid black line. In Firefox and Netscape the right-side and bottom content boxes are displaying incorrectly - the right-side box is showing up at the bottom and the bottom one's showing up on the right side.

Can someone help?

**mwinter** · 06-27-2005, 04:03 PM

Originally Posted by kanjigirl

I'm working on a website that looks fine in IE and mostly fine in Opera. However, in Mozilla Firefox and Netscape 8.0 the content boxes are showing up incorrectly.

Your site is being rendered by Firefox exactly as your style sheet says it should.

The width of a box is calculated using the following equation:

Code:

box width = margin-left + border-left-width
          + padding-left + width + padding-right
          + border-right-width + margin-right

Substituting in the values from your style sheet, and replacing auto values as described (see link), we get for content_right:

Code:

box width = auto + 0 + 12 (px) + 200 (px) + 12 (px) + 6 (px) + auto
          = 0 + 230 + 0
          = 230px

and for content_middle_black:

Code:

box width = auto + 6 (px) + 5 (px) + 575 (px) + 5 (px) + 6 (px) + auto
          = 0 + 597 + 0
          = 597px

You limited the width of wrapper to 775px, and the sum of those widths clearly exceeds that value, so the contents shift as they're required to.

So, why does it appear to be fine in IE and Opera? Microsoft got the algorithm badly wrong in previous versions of IE, and made the content width (width, above) the only significant factor in calculating the box width. If you place IE6 in Standards mode by including a complete DOCTYPE (you omitted the URL), you will see something similar to what Firefox renders. The same with Opera which tries to emulate some of IE's buggy behaviour when it thinks it will be necessary.

This problem is commonly referred to as the box model bug, and has several solutions. Essentially they all require you to put browsers into Standards mode by changing the DOCTYPE (in your specific case) to:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

and then tricking older IE versions into rendering correctly usually using the box model hack (see the first result in the previous link).

Good luck,
Mike

**kanjigirl** · 06-27-2005, 08:00 PM

Thanks Mike,

I've implemented the changes and it's almost there. Only now in Mozilla and Netscape the bottom box has disappeared. The width of it (including all margins, borders and padding) is now equal to 775, the width of wrapper. Can you tell me why it might be doing this?

Also, in Mozilla and Netscape, my footer items are showing up in the middle of the page instead of at the bottom.

#footer {
position: absolute;
bottom: 0;
}

Any advice would be greatly appreciated.

Thanks very much for your help,

Debbie

**mwinter** · 06-28-2005, 01:16 AM

Originally Posted by kanjigirl

Only now in Mozilla and Netscape the bottom box has disappeared.

I forgot to mention that: it's under the other floated elements.

When you float an element, non-floated content flows alongside it. To make sure that an element appears beneath floated content, you need to apply the clear property; if you float right, clear right. As you do both, it would be best to clear: both. The reason why the contents of that bottom box appear in the intended place is that they're floated too, so they shift down like everything else was before.

The position of the footer content is related: it should appear at the bottom of the wrapper, but because floated content is taken out-of-the-flow, it doesn't stretch the wrapper. The clear property will fix that to a degree. You'll also need to remove the margin on the paragraph.

Everything should now be 'fixed'. There are still several problems with that site though. Set a minimum font size to about 12px in Firefox (Tools > Options > Fonts & Colours) or Opera (Tools > Preferences > Advanced [ver. 8] > Fonts) and you'll see how I'd normally see it.

Mike

**kanjigirl** · 06-28-2005, 09:25 PM

Thanks for your help, very much, and I'll take what you said about font size into consideration.

Debbie

Thread: Help with border issue in Firefox vs. IE

Thread Tools

Search Thread

Help with border issue in Firefox vs. IE

Mostly fixed!

Thanks

Bookmarks

Bookmarks

Posting Permissions