[solved] IE6 margins Vs IE7 margins

smk2007
avatar
rank Enthusiast

Enthusiast


Posts: 131
Joined: 2007-01-04

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... Roll eyes to heaven

Triumph
Triumph's picture
rank Moderator

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?

smk2007
smk2007's picture
rank Enthusiast

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>

Triumph
Triumph's picture
rank Moderator

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

smk2007
smk2007's picture
rank Enthusiast

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!