Hehe I was afraid that this was the case. Unfortunately this will cause a massive bulk in my code, so I believe I'll have to go to tabular design unfortunately. Thanks for your help though!
On Dec 30, 10:43 am, Devon <[email protected]> wrote: > 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] -~----------~----~----~----~------~----~------~--~---
