PDA

View Full Version : IE 6.0 bug box model width bug? please help..



randomguy83
Apr 2nd, 2007, 05:35 AM
Hi I am trying to have 3 div classes float to the left within a #content div but the width seems to be rendered differently in IE than in FF.

I would like to set the margin on the left of each box to be 3-5px so that it would look appropriately but the last box seems to be always be pushed down in IE.

Looks like the box model is interpereted in a wrong way and that the margin-left is always greater than what it should be. how do i fix this??

randomguy83
Apr 2nd, 2007, 05:37 AM
heres my code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">

<div id="content" class="clearfix">

<div id="left_col">

<div class="box">
<img src="images/event.gif" />
<p><span class="blue">Event</span> <br /> <br />
Something about this future
event. Dont know what to
say here. Something about this future event.</p>

<a href="#" class="go">go</a>
</div>

<div class="box">
<img src="images/event.gif" />
<p><span class="blue">Event</span> <br /> <br />
Something about this future
event. Dont know what to
say here. Something about this future event.</p>

<a href="#" class="go">go</a>
</div>

<div class="box">
<img src="images/event.gif" />
<p><span class="blue">Event</span> <br /> <br />
Something about this future
event. Dont know what to
say here. Something about this future event.</p>

<a href="#" class="go">go</a>
</div>


</div><!-- end of left col -->


<div id="right_col">


</div>



</div> <!-- end of content -->



</div> <!-- end of container -->



</body>
</html>




/* CSS Document */

body {
margin: 0;
padding: 0;
background-color: #999999;
text-align: center;
}

#container {
width: 929px;
margin: 0 auto;
padding: 0;
text-align: left;
background: url(images/content_bg.gif) top left repeat-y;
}


.clearfix:after {/*The peroid is the last thinb before the div closes*/
content: ".";/*inline elements doin't respond to the clear property*/
display: block;/*Ensure the peroid is not visible*/
height: 0;/*Make the container clear the peroid*/
clear: both;/*Further ensures the peroid is not visible*/
visibility: hidden;/*Further ensures the peroid is not visible*/
}
.clearfix {
display: inline-block;/*A fix for IE mac*/
}
*html .clearfix {/*the holly hack for a bug in IE6 for Windows*/
height: 1%;
}
.clearfix {
display: block;/*the holly hack for a bug in IE6 for Windows*/
}

#content {
width: 895px;
margin: 0 0 0 16px;
padding: 0;
}

#left_col {
width: 570px;
float: left;
border: 1px solid blue;
}

.box {
float: left;
margin:0;
margin-left: 3px;
border: 1px solid red;
padding: 0;
width: 185px;
background: url(images/box_line.gif) no-repeat top right;
}

.box p {
font-size: 12px;
padding: 5px;
color: #7d7e7e;
font-family:Arial, Helvetica, sans-serif;
}

.blue {
color: #3d5b75;
margin: 0;
font-weight:bold;
}


.go {
float: right;
margin-right: 10px;
background: url(images/go_button.gif);
width: 56px;
height: 27px;
text-indent: -3000px;
}

img {
margin: 0;
padding: 0;
border: none;
}


#right_col {
float: right;
width: 288px;
border: 1px solid red;
}

_Aerospace_Eng_
Apr 2nd, 2007, 06:19 AM
Add display:inline; to .box and .go

Read up on the IE double margin bug to find out more.
http://www.positioniseverything.net/explorer/doubled-margin.html

randomguy83
Apr 2nd, 2007, 10:34 PM
thank you for that information aerospace eng.. i will take your advice and read up on these bugs on pie.