Positioning of navigation list different in FF and IE...

Discussion in 'CSS' started by Darwyn, Jan 29, 2010.

  1. #1
    I'm having a bear of a time figuring this one out...

    Please see my site http://www.jomar.com/jomargroup_index.html

    There are a few things I need to fix yet, so please only concern yourself with the bottom navigation (Terms & Conditions / Metal Exchange).

    If you are viewing this page in IE, the bottom navigation lines up horizontally and vertically very nicely in the blue area. If you are viewing it in FF, it seems to jump down about 5-10 pixels.

    What's wrong here?

    The HTML
    <div id="footer">
    	<div id="footer_content">
    		<div id="footer_nav">
    				<ul class="main_nav">
    					<li><a href"#">Terms & Conditions</a></li>
    					<li><a href"#">Metal Exchange</a></li>
    				</ul>					
    	  	</div><!--end footer_nav-->
    		<div id="footer_info">
    			<p class="footer_text">
    				&copy; Jomar Group<br />
    				7243 Miller Drive, Warren, MI  48092<br />
    				p: 800-325-5690 / f: 800-628-4194
    			</p>	
    		</div><!--end footer_info-->
    	</div><!--end footer_content-->
    </div><!--end footer-->
    Code (markup):
    and the pertinent CSS
    #footer {
    	margin-top: -100px; /* negative value of footer height */
    	height: 100px;
    	clear:both;
    	background-image:url(JomarGroup/images/bkgd_tile_foot.gif);
    	background-repeat:repeat-x;
    } 
    
    #footer_content {
    	background-image:url(JomarGroup/images/bkgd_footer.gif);
    	z-index:1;
    	height:100px;
    	background-repeat:no-repeat;
    	background-position:center;
    	margin-left:auto;
    	margin-right:auto;
    	width:610px;
    }
    
    #footer_nav {
    	margin:0;
    	z-index:2;
    	width:600px;
    	padding:15px 0 0 0;
    	text-align:center;
    }
    
    #footer_info {
    	z-index:2;
    	width:600px;
    	padding:15px 0 0 0;
    	text-align:center;
    }
    
    .footer_text {
    	font-family:Arial, Helvetica, sans-serif;
    	color:white;
    	font-size:12px;
    }
    
    .main_nav ul {
    	list-style-type:none;
    }
    
    
    .main_nav li {
    	display:inline;
    	font-size:12px;
    	margin:30px;
    }
    
    .main_nav li a {
    	font-family:Arial, Helvetica, sans-serif;
    	text-decoration:none;
    	color:white;
    }
    
    .main_nav li a:hover {
    	color:#FFCC33;
    }
    Code (markup):
    Not sure if it matters, but I've used some sticky footer code to force the footer at the bottom of the page.
     
    Darwyn, Jan 29, 2010 IP
  2. Joak1m

    Joak1m Peon

    Messages:
    135
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    What version of IE?
     
    Joak1m, Jan 29, 2010 IP
  3. Darwyn

    Darwyn Peon

    Messages:
    34
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I've previewed it in IE 6
     
    Darwyn, Jan 29, 2010 IP