[solved] IE6 margins Vs IE7 margins
Posted: Wed, 2007-10-31 00:04
Question about IE6 margin float settings vs IE7 margins. I've developed a site using all css (relative) floats w/ margins to accompany the proper spacing. It looks great in all browsers except IE6. IE6 does not seem to handle the float margin properly. I've had this small problem in the past but never this bad to where I need some advise. I'm sure this is common and I was hoping someone could fill me in on the best and most efficient way to work around this issue. thanks for any advise... 


Moderator
Posts: 5286
Joined: 2005-02-03
Location: Pennsyltucky, USA
You've been here long enough
Posted: Wed, 2007-10-31 01:04
You've been here long enough to know what the first reply to your question is going to be, right?
Enthusiast
Posts: 131
Joined: 2007-01-04
Here is my code - thanks!
Posted: Wed, 2007-10-31 01:19
CSS
* { margin:0; padding:0 }
BODY {
font-size: 76%;
background: #CA791E url(images/top-bg.jpg) repeat-x;
font-family: Tahoma, Arial, Helvetica, sans-serif;
color: #211204;
}
#header { background: url(images/logo-header.jpg) no-repeat; width:1078px; height:186px; margin:0 auto; clear:both }
#joinUs { float:right; margin:40px 270px 0 0; width:160px; height:130px; font-size:0.9em; color:#FEE0A7 }
#joinUs ul { list-style:none }
Here is the header portion of my html in which is part of the problem. My text in the join us section is mis-aligned in IE6 but properly aligned in all other browsers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>SAMPLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<div id="joinUs">
<ul>
<li><b>Sunday</b></li>
<li>Bible Study - 9:30 am </li>
<li>Worship - 10:00 am </li>
<li>Family Night - 7:00 pm</li>
</ul>
<ul class="tm">
<li><b>Wednesday</b></li>
<li>Coffee House - 6:00 pm</li>
<li>Biblical Studies - 6:30 pm</li>
<li>Youth Night - 7:00 pm</li>
</ul>
</div>
</div><!--END HEADER-->
</body>
</html>
Moderator
Posts: 5286
Joined: 2005-02-03
Location: Pennsyltucky, USA
Looks like a doubled margin
Posted: Wed, 2007-10-31 01:30
Looks like the doubled margin float bug. It happens in IE6 when you have a float and a margin on the same side. float:left + margin-left = 2(margin-left) or
float:right + margin-right = 2(margin-right)
Try adding display:inline; to #joinUs
Enthusiast
Posts: 131
Joined: 2007-01-04
Thanks
Posted: Wed, 2007-10-31 01:36
I completely forgot about the display code! It worked perfect, thanks!