...

View Full Version : Layout problem. FF vs. IE



donmateo
09-14-2007, 07:49 PM
Just want to know why FF is spacing this differently than IE. To me IE is doing it correctly.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Template</title>
<style type="text/css">
* {
margin: 0;
}
html, body {
text-align: center;
}
.mainbox
{
width: 780px;
margin-left: auto;
margin-right: auto;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
.innerleftbox
{
float: left;
width: 389px;
border: solid 1px #000;
}
.innerrightbox
{
float: right;
width: 389px;
border: solid 1px #000;
}
</style>
</head>
<body>
<div class="mainbox">

<div class="innerleftbox">Left Text</div>
<div class="innerrightbox">Right Text</div>
</div>

</body>
</html>



IE is lining the two inner boxes up correctly, adjacent to eachother. FF is wrapping the right box as if there isn't enough room for both of them on one line in the main body.

Why is this?

dudeson
09-14-2007, 08:41 PM
whats happening is: when you put a border on a div, say 1px, IE puts that 1px inside the div, not increasing its width, where as FF puts the border outside the div, therefore increasing its size by 2px(1px on each side)

this sorta fixes it, theres a small gap in IE but it works


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Template</title>
<style type="text/css">
* {
margin: 0;
}
html, body {
text-align: center;
}
.mainbox
{
width: 780px;
margin-left: auto;
margin-right: auto;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
.innerleftbox
{
float: left;
width: 389px;
border: solid 1px #000;
border-width:1px 0 1px 1px;
}
.innerrightbox
{
float: right;
width: 388px;
border: solid 1px #000;
}
</style>
</head>
<body>
<div class="mainbox">

<div class="innerleftbox">Left Text</div>
<div class="innerrightbox">Right Text</div>
</div>

</body>
</html>

donmateo
09-14-2007, 09:15 PM
Damn IE is stupid. What kind of logic does that make?

Is there anyway to get around this so there is no gap in IE?

Thanks for the quick reply!

donmateo
09-14-2007, 09:20 PM
Also, does IE put their margins inside of the div as well?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum