Member Avatar for FraserM

I'm having a little problem with my new site.

I have a Div element, which is explicitly set to 226px wide (inside the div is a load of text). To that i've applied a 10px padding all the way round, so the css is currently: .layout_style_left_panel { width: 226px; float: left; padding: 10px; } Now that looks just fine in IE, but firefox appears to add the 10px padding to each side of the div, making it in effect 246px wide, not 226!

Could one of you good people please tell me why and how to fix it please?

  • 3 Contributors
  • 4 Replies
  • 99 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Recommended Answers

All 4 Replies

Member Avatar for cfajohnson

I'm having a little problem with my new site.

I have a Div element, which is explicitly set to 226px wide (inside the div is a load of text). To that i've applied a 10px padding all the way round, so the css is currently:


Text containers should generally not be given fixed px widths; use ems or percentages instead.

.layout_style_left_panel { width: 226px; float: left; padding: 10px; } Now that looks just fine in IE, but firefox appears to add the 10px padding to each side of the div, making it in effect 246px wide, not 226!

Could one of you good people please tell me why and how to fix it please?


Firefox is behaving correctly. IE is not, probably because you are causing it to enter quirks mode.

To make both browsers behave correctly, use this doctype at the top of your HTML file:

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

If you are still having problems, post a URL.

Member Avatar for MidiMagic

This is the IE browser incompatibility bug. It happens even with the correct doctype.

Firefox and other browsers render the surrounding and size elements nested as follows (outside to inside), following the W3C box definition:

margin, border, padding, width/height

IE wrongly renders them in this order (outside to inside):

width/height, margin, border, padding

So you will have differences whenever you put a width or height in the same tag or style with a nonzero surrounding style (margin, border, padding). Don't use them in the same tag or style.

Nest two tags. Put the sizes in one, and the surrounding styles in the other.

Member Avatar for cfajohnson

This is the IE browser incompatibility bug. It happens even with the correct doctype.

Firefox and other browsers render the surrounding and size elements nested as follows (outside to inside), following the W3C box definition:

margin, border, padding, width/height

IE wrongly renders them in this order (outside to inside):

width/height, margin, border, padding


Starting with IE6, they are rendered correctly when in standards mode, but not in quirks mode.

Member Avatar for MidiMagic

Not always.

I just created a test, and they still render differently when a table is one of the elements. The only way to make them render alike is to nest tags, and not put margin and padding on the table elements.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.