...

View Full Version : Vertical alignment between IE and Firefox - CSS problem



icklechurch
10-28-2009, 03:54 PM
Hi,

I'm just setting up a header on a html page and the vertical alignment between IE and firefox is out. FF is putting the links about 20px below where they appear on IE.

My HTML code is:

<div id="header">
<div id="logo"><a href="<?=SITE_URL?>/"><img src="<?=SITE_URL?>/museums/images/banner_homepage_pathe.gif" alt="British Pathe Logo" /></a></div>
<div id="nav">
<ul>
<li><a href="<?=SITE_URL?>/museums/contact.php" id="contact_nav">Contact Us</a></li>
<li><a href="<?=SITE_URL?>/museums/order.php" id="order_nav">Bankers Standing Order</a></li>
<li><a href="<?=SITE_URL?>/museums/license.php" id="license_nav">The License Agreement</a></li>
<li><a href="<?=SITE_URL?>/museums/signup.php" id="signup_nav">How to sign up for your license</a></li>
<li><a href="<?=SITE_URL?>/museums/factors.php" id="factors_nav">Key Factors of this offer</a></li>
<li><a href="<?=SITE_URL?>/museums/" id="home_nav">Home</a></li>
</ul>
</div>
<br style="clear:left " />
</div>

And my CSS is:

#header{
width:100%;
min-width:1000px;
height:36px;
background:#131313 url(../images/banner_bg.jpg) repeat-x 0 0;
}
#logo{
margin: 0;
float:left;
display:inline;
width:173px;
height:35px;
}
/* Main navigation */
#nav{
float:left;
font-weight:bold;
font-size:12px;
display:inline;
margin-top:0;
margin-right:0;
margin-left:0;
height:36px;
width: 800px;
}
#nav ul{
list-style-type:none;
}
#nav ul li{
float:right;
}
#nav ul li a{
display:block;
padding:6px 4px 6px 4px;
}

Does anyone have any clues? I'm tearing my hair out over this as I've got a tight deadline!!

SB65
10-28-2009, 04:23 PM
Try:


#nav ul{
list-style-type:none; margin:0;padding:0
}

Firefox is applying a different default margin to the ul element.

Excavator
10-28-2009, 04:28 PM
Hello icklechurch,
A perfect example of why *{margin:0;padding:0;} should go at the top of your CSS file.

Read about what that does here - http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum