PDA

Click to See Complete Forum and Search --> : Css border affecting width

saulss
11-22-2005, 03:16 PM
Hello
When i run the following testing code using ie, everything looks fine, the problem occurs when using firefox<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<style>
body{
margin:0px;
}
.ruler{
width:200px;background-color:black;
}
.someBox{
width:200px;
border: solid 5px yellow;
background-color:red;
}
</style>
</head>

<body>
<div class="ruler">ruler</div>
<div class="someBox">other</div>

</body>
</html>

ive noticed that ie will display the 5px border without altering the width, inside the box, therefore keeping the set width; firefox adds the 5px border to the box (i think thats how it should really be), making the total width be equal to 210px. That completely screws up my page layout, is there some sort of workaround to that?
thanks in advance.
radiks
11-22-2005, 04:10 PM
You should find this helpful: http://www.chrisbeach.co.uk/core/scripts/entryViewer.php?ID=8498

or just add

* { box-sizing:border-box; -moz-box-sizing:border-box }
to your css
ray326
11-22-2005, 06:30 PM
You can use the !important hack.
{
...
width: 190px !important;
width: 200px;
...
}
Kravvitz
11-22-2005, 08:04 PM
http://www.tjkdesign.com/articles/boxmodel.asp
Difference between box models, doctype switching, etc. (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp)
The Box Model Problem (http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41)
Siddan
11-22-2005, 11:26 PM
Ahh,, just tested the -moz alternative and it works fine in FF, setting it to more logical use around widths and paddings...

but since I am using the w3c doctype to take out IE from Quirks mode, the padding will still increase the width size

Must I take back IE to quirks mode so the box model will work the same in both FF and IE?
Kravvitz
11-23-2005, 12:28 AM
I suggest you use a box model hack. (http://www.google.com/search?q=CSS+box+model+hack)
saulss
11-23-2005, 12:32 AM
thanks everyone! i will try all of them^^