Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Firefox is applying a div border on the outside, while IE applies it inside. What am I missing here??
border: solid 3px #fff;
-
-
CommentAuthorMister Bubbles
- CommentTimeJul 19th 2006
Would you give us more detail? -
-
Sorry about that. I'm just trying to add a simple border to a header DIV, and keep it flush with the width of the rest of the page content.
It lines up in IE just fine, because the border seems to be applied to the inside of the DIV. I'm having issues with Firefox though, because the border is being applied to the *outside* of the DIV ... thus making the header div a total of 6px wider than the page content. -
-
CommentAuthorMister Bubbles
- CommentTimeJul 19th 2006
Do you have a web address for this? -
-
Note sure I am getting the same problem.
Example: http://marylandmedia.com/projects/divborder.html
In both IE (6.0.29) and Firefox (1.5.0.4) the border is on the outside of the DIV. Both browsers seem to show 300px of black space with a 3px white border on the OUTSIDE of that space.
Are you suggesting that in IE, I would only have 294px of black space because of 3px on either side (total of 6px) border takes away? -
IE and FF do not use the same box model. And actually IE renders the box model incorrectly. Perhaps check that you are using the correct document declaration. Run a couple searches in Google and you will find out which document declarations will make the div render the same in IE and FF. Or just use the declaration from the example posted above.
-
Yeah sounds like your page is being rendered in quirks mode, hence IE's odd box model
-
Thanks for the backhand, Josh. Wow, I should be slapping myself for that one :>
Now that they're synchroniously incorrect, I'm planning to 'fix' it by reducing the width by 6px. But out of curiousity - IS there a way to apply the border inside? -
They are not incorrect. The CSS Box Model. When you set the "width" you are setting the width of the "content area." So if you have a content width of 200px and you apply a 3px border all around the total width of the div is now 206px.
-
:) Good to know. Thanks a bundle!
1 to 10 of 10