Welcome to IE's box model.
Here's some sample css to pick apart:
div { width: 200px; height: 200px; border: 20px solid blue; margin:
20px; padding 20px;}
Conceptually, the div has 4 areas arranged as a set of nested boxes.
>From the outside-in: margin, border, padding, content.
The accepted CSS box model says the width and height attributes set
the size of the content (the innermost box) and everything else wraps
around that. Thus our hypothetical div becomes 320px wide. Margin of
40 (2x margin) + border of 40 + padding of 40 + content of 200.
IE took a different approach. They apply width and height to the
border. Thus our hypothetical dive becomes 240px wide. Margin of 40,
border of 40, padding of 40, content of 120. The 120 comes from the
width - 2x border - 2x padding.
So, when your page is viewed in IE the size of the content box is
smaller and that is causing the content to flow to multiple lines.
This is the easiest fix. Dd this for each element where you combine
padding or border and width.
* Locate any element where you set the width AND the border or
padding.
* Let's call this A.
* Add an extra div around A.
* Let's call this B.
* Move the padding, border, and margin settings from element A to
element B.
* On element A set {padding: 0; margin: 0; border: none;}
* Leave the width set on A
* Do not set a width on B.
dcm
On Dec 30, 1:09 am, Ben <[email protected]> wrote:
> Hello, I have done some research and thought that my problems might
> be
> due to the box glitch, however I think there might be more going on
> here. It appears as though the padding and margin are both
> contributing
> to the factors that IE doubles the whitespace on my new forum CSS
> design. What's odd is that the border properties are following the
> standard heights. I originally thought the floats were incorrectly
> displaying, however this does not appear to be the case. I have
> validated the entire website through W3C, and unfortunately it
> refuses
> to reveal any signs of my failure in CSS. My website and code can be
> viewed at:
>
> http://98.228.176.231/forums/
>
> I have designed this around Firefox/Google Chrome/Safari, and
> unfortunately didn't realize until it was already sketched that it
> didn't function properly in IE. I currently have IE 7.0.57. Thanks
> for
> any help you are able to provide!
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
