Css border affecting width

saulss · #1 11-22-2005, 02:16 PM

Hello
When i run the following testing code using ie, everything looks fine, the problem occurs when using firefox

Code:

<!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 · #2 11-22-2005, 03:10 PM

You should find this helpful: http://www.chrisbeach.co.uk/core/scr...er.php?ID=8498

or just add

Code:

* { box-sizing:border-box; -moz-box-sizing:border-box }

to your css

**ray326** · #3 11-22-2005, 05:30 PM

You can use the !important hack.
{
...
width: 190px !important;
width: 200px;
...
}

Kravvitz · #4 11-22-2005, 07:04 PM

http://www.tjkdesign.com/articles/boxmodel.asp
Difference between box models, doctype switching, etc.
The Box Model Problem

Siddan · #5 11-22-2005, 10: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 · #6 11-22-2005, 11:28 PM

I suggest you use a box model hack.

saulss · #7 11-22-2005, 11:32 PM

thanks everyone! i will try all of them^^

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)