This is my first post on this group so I am not sure about the scope of accepted solutions.
One suggestion I have is to label divs that have this problem as class="ie_div". You can use a javascript add-on such as JQuery to wrap all your boxes that are of class ie_box in the additional div and they can even take the margin zero it out and assign it to the containing div. This happens once the page is loaded. That way you could a have a nice web 2.0 page and the complexity due to browser incompatibilities would be handled at runtime. The resulting html will be bulky but you'll be able to work on html that makes sense. My JQuery a bit rusty. Let me know if you'd like the jQuery for this. -b On Dec 30 2008, 5:21 pm, Ben <[email protected]> wrote: > 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] -~----------~----~----~----~------~----~------~--~---
