View Full Version : vertical margin/padding on floated element - IE8 vs FF

Nov 26th, 2009, 09:48 AM
Hoping for an explanation of what I'm doing to cause this: I've got three floated elements inside an absolutely positioned div; two to the left, one to the right. HTML as:

<div id="masthead">
<h1>Page title</h1>
<ul id="nav">
<li><a href="page.html">Page</a></li>
<li><a href="page.html">Page</a></li>
<li><a href="page.html">Page</a></li>

CSS as:

position: absolute;
top: 0;
width: 100%;
height: 92px;
overflow: hidden;
background: url('../img/logo.jpg') top left no-repeat #000;
border-bottom: 1px solid #540113;
#masthead h1{
float: left;
width: 200px;
margin-top: 30px;
margin-left: 100px;
font-size: 16px;
font-weight: bold;
color: #FFF;

#masthead h2{
clear: left;
float: left;
width: 200px;
margin-left: 100px;
font-size: 14px;
color: #a5a5a5;
#masthead #nav{
float: right;
margin-right: 20px;
width: 350px;
margin-top: -5px;
border: 1px solid #000;

*(I'm also using Eric Meyer's reset.css (http://meyerweb.com/eric/tools/css/reset/), unedited.)

I want #nav to appear roughly vertially centered in #masthead. For Firefox, that means nudging it up with a negative 5px top-padding. But in IE, that puts it 5px outside the top boundary of #masthead, cutting it off.

I wrapped a border round #nav to see if it was something to do with collapsing margins. It doesn't appear to have helped.

So... what's causing it? Is it IE, as I'd assume, in the wrong? Is there a way to fix it without resorting to IE conditional styles?

thanks :)