Navigation Bar Issue in IE 6/7

Discussion in 'Web Design and Development' started by besler3035, Jun 12, 2010.

  1. besler3035 macrumors 6502a

    Joined:
    Oct 29, 2004
    Location:
    Grand Rapids, MI
    #1
    http://projects.mindutopia.com/rddc2/getinvolved.php

    In every other browser, the navigation works right and displays across that red bar. In IE 6 and 7, however, it's stacked. Any way to fix this? My styles are as follows:

    Code:
    #nav{
    	height:30px;
    	background:#b62939;
    }
    
    #nav ul{
    	display:block;
    	float:left;
    	width:970px;
    	list-style:none;
    }
    
    #nav ul li{
    	float:left;
    	display:block;
    	border-right:1px dotted #fff;
    	margin-right:10px;
    }
    
    #nav ul li.last{
    	border:none;
    	margin-right:0px;
    	display:block;
    }
    
    #nav ul li a, #nav ul li a:visited{
    	background:url(images/menu_bg.gif) top left no-repeat #b62939;
    	height:30px;
    	display:block;
    }
    
    #nav ul li a:hover{
    	background:url(images/menu_bg_hover.gif) top left no-repeat #b62939;
    	height:30px;
    	display:block;
    }
     
  2. citizenzen macrumors 65816

    Joined:
    Mar 22, 2010
    #2
    Methinks it's the display:block that's done you wrong.


    #nav ul li{
    float:left;
    display:block;
    border-right:1px dotted #fff;
    margin-right:10px;
    }​
     
  3. besler3035 thread starter macrumors 6502a

    Joined:
    Oct 29, 2004
    Location:
    Grand Rapids, MI
    #3
    That fixes it in IE, but then pushes the arrows down in all other browsers. I tried doing a few different display properties for the IE classes (separate stylesheet now), and am not sure what to do next...help!
     
  4. agiphone macrumors newbie

    Joined:
    Jun 21, 2009
    #4
    There's some extra code here and some issues. Here's how I would do it:

    1. set the width of the nav bar in the wrapper.
    2. no need for display: block on ul and li; they are block elements by definition
    3. ul doesn't need to be float: left
    4. li doesn't need to be float: left, but needs to be display: inline
    5. if you want the anchor element to extend the width of the li, than you need to declare it display: block and give it a width=width of li
    6. if you need a border-right, set it on the li to separate the link
    7. instead of positioning the background img top, left, you can simply remove them if the image is of the right size to display where you want; by default, any background img is positioned top, left [or, in other words, 0,0]

    Hope this helps
     
  5. harpster macrumors regular

    Joined:
    Jan 26, 2010
    #5
    I'm no css expert but from messing with it for a little bit I think this may be causing or a part of your problem... The "height:30px" when removed will put the nav back to horizontal in IE6. Now I don't have your graphics so I'm looking at more of a frame outline but you might want to check that part of the code to see if that makes a difference from you.

    Code:
    #nav ul li a, #nav ul li a:visited{
    	background:url(images/menu_bg.gif) top left no-repeat #b62939;
    	/*height:30px;*/
    	display:block;
    }
     

Share This Page