SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast runrobrun's Avatar
    Join Date
    Jan 2004
    Location
    Leighton, Iowa
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal nav with images using float not working

    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.
    Rob Hammann
    ArrowQuick : Vennard College : William Penn University
    "Sometimes I lie awake at night, and I ask,
    'Where have I gone wrong?'
    Then a voice says to me,
    'This is going to take more than one night.' "
    Charlie Brown.

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    All4nerds is correct and theres a long explanation in the faq on floats if you are interested.

  4. #4
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wise man say: "If floats not fine, display inline."
    Last edited by Buddy Bradley; May 24, 2005 at 12:10.

  5. #5
    SitePoint Enthusiast runrobrun's Avatar
    Join Date
    Jan 2004
    Location
    Leighton, Iowa
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Most excellent. It worked great. I will make sure I remember that one. I will also check out the FAQ on float. Thanks again all.

    Rob
    Rob Hammann
    ArrowQuick : Vennard College : William Penn University
    "Sometimes I lie awake at night, and I ask,
    'Where have I gone wrong?'
    Then a voice says to me,
    'This is going to take more than one night.' "
    Charlie Brown.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •