Horizontal nav with images using float not working

**runrobrun** · May 24, 2005 08:38

I'm working on a website that is using image navigation across the top. I'm laying the 5 images out in seperate div's and using the float:left and setting the same margin-top so that they line up. I'm then giving the first one a left-margin and they shift where I want. The images all display exactly where I expect them to...except in IE6 on windows machine.

the site is www.pellacrosscountry.com
CSS sheet is http://www.pellacrosscountry.com/dutchstyle.css

Example of divs without margin left:

Firefox no left margin:

Expected results all images seem to line up in Firefox on Mac.

IE no left margin:

Exact sames results as expected in IE on Windows

Here is where the problem comes in. I add a margin-left to first div to move all left and here is results:

Firefox left margin:

Expected results all images seem to line up in Firefox on Mac right in line with where I want them. Also worked in Firefox on windows machine.

IE adding a left margin. Here is results:

IE start much farther left then the margin I specifiy, causing the last two images to wrap. WHAT is going on? I have tried a few fixes and can't seem to get desired results.

Here is CSS code:

Code:

body{
	background-image:url(images/bground.jpg);
	background-repeat:repeat;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
}

H1, H2, H3, H4, H5, H6 {
	color:#7a0505;
}
img {
	border:0;
	margin:0;
	padding:0;
}
#container{
	margin:auto;
	width:725px;
	background-image:url(images/cont_bg.jpg);
}

#header{
	padding:0;
	margin:0;
	width:725px;
	height:190px;
	background-image:url(images/dutch_head.jpg);
}
#home-pic{	
	float:left;
	margin-left:225px;
	margin-top:75px;
	font-size:80%;
	color:#333333;
	width:79px;
}
#results-pic{
	float:left;
	font-size:80%;
	color:#333333;
	margin-top:75px;
	margin-left:17px;
	width:79px;
}
#schedule_pic{
	float:left;
	font-size:80%;
	color:#333333;
	margin-top:75px;
	margin-left:17px;
	width:79px;
}
#news-pic{
	float:left;
	font-size:80%;
	color:#333333;
	margin-top:75px;
	margin-left:17px;
	width:79px;
}
#coach-corner-pic{
	float:left;
	font-size:80%;
	color:#333333;
	margin-top:75px;
	margin-left:17px;
	width:79px;
}

Here is HTML Code:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="dutchstyle.css" type="text/css" rel="stylesheet">
<script src="nav.js" language="javascript" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Pella High School Cross Country - Runnin' Dutch</title>
</head>
<body onLoad="MM_preloadImages('images/home_p_h.jpg','images/results_p_h.jpg','images/schedule_p_h.jpg','images/news_p_h.jpg','images/ccorner_p_h.jpg')">
<div id="container">
  <div id="header">
    <div id="home-pic"><a href="#" onMouseOver="MM_swapImage('home','','images/home_p_h.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/home_p_r.jpg" alt="Pella Dutch Cross Country Home" name="home" width="79" height="60" id="home"><br>
    Home</a></div>
    <div id="results-pic"><a href="#" onMouseOver="MM_swapImage('results','','images/results_p_h.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/results_p_r.jpg" alt="Pella Cross Country Results" name="results" width="79" height="60" id="results"><br>
    Results</a></div>
    <div id="schedule_pic"><a href="#" onMouseOver="MM_swapImage('schedule','','images/schedule_p_h.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/schedule_p_r.jpg" alt="Pella Cross Country Schedule" name="schedule" width="79" height="60" id="schedule"><br>
    Schedule</a></div>
	<div id="news-pic"><a href="#" onMouseOver="MM_swapImage('news','','images/news_p_h.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/news_p_r.jpg" alt="Pella Cross Country News" name="news" width="79" height="60" id="news"><br>
    News</a></div>
	<div id="coach-corner-pic"><a href="#" onMouseOver="MM_swapImage('coach_corner','','images/ccorner_p_h.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/ccorner_p_r.jpg" alt="Pella Cross Country Coach Corner" name="coach_corner" width="79" height="60" id="coach_corner"><br>
    Coach Corner</a></div>
  </div>
  <div id="body-content">
    <div id="nav-left"><img src="images/dutch_header.jpg" width="187" height="107">
    <div id="nav-links">
      <h5 class="nav-head" align="right">Team Highlights<br>
        2005 Season
</h5>
      <ul>
        <li>&gt;&gt; Roster</li>
        <li>&gt;&gt; Schedule/Results</li>
        <li>&gt;&gt; Statistics</li>
        <li>&gt;&gt; News Releases</li>
        <li>&gt;&gt; Athlete Info (secure)</li>
        <li>&gt;&gt; Links  </li>
      </ul>
    </div>
    </div>
    <div id="content"><h3>Pella &quot;Runnin' Dutch&quot; Cross Country</h3>
    <p>Coming soon...  </p>
    <ul>
      <li>News updates</li>
      <li>Schedule</li>
      <li>Results</li>
      <li>Photos</li>
      <li>Links </li>
    </ul>
    </div>
  </div>
  <div id="footer"></div>
</div>
<span class="style1"></span>
<div class="colophon-text">&copy;2005 Design and Hosted by ArrowQuick Solutions LLC</div>
</body>
</html>

I'm still trying to unlearn tables and learn to use Divs I'm coming along but struggle from time to time. As you look at the code you may find I'm doing some things the hard way. Any help would be appreciated.

**all4nerds** · May 24, 2005 08:55

Hello

dubbel margin bug IE use display inline ?

#home-pic{
display:inline;
float:left;
margin-left:225px;
margin-top:75px;
font-size:80%;
color:#333333;
width:79px;
}

#nav-left{
display:inline;
margin-left:28px;
float:left;
width:187px;
}