I've run into this before. I think I've fixed it before, but I can't
remember, and I apparently can't think of the right search terms to
find out if anyone else has solved this problem. I can't post anything
live, but here is the HTML and CSS I'm using.
Basically, I have two floated block links, with backgrounds, and spans
that are also display block (because of graphic requirements). I want
to float them alongside each other at the same horizontal level.
But, the second box is dropping down (in IE) the height of the default
browser font (as in, if I change the font size up or down, the
vertical offset changes slightly).
Like this:
------ <--16px or whatever the default font size is
| |------
------| |
------
There's plenty of horizontal space for the floats. What's going on?
--------
HTML
--------
<div id="nav">
<ul>
<li id="nav-products"><a
href="thumbnail.asp"><span>Products</span></a></li>
<li id="nav-activities"><a
href="activities.asp"><span>Activities</span></a></li>
</ul>
</div>
--------
CSS
--------
/*NAVIGATION*/
#nav {
position: absolute;
z-index: 5;
top: 100px; /*was 0*/
left: -19px;
margin-left: 50%;
}
#nav ul {
list-style-type: none;
}
#nav a {
text-indent: -9999px;
}
li#nav-products a, li#nav-activities a {
display: block;
float: left;
background:
url(/content/v4/us/imaginext/img/nav-buttons.gif) no-repeat;
height: 105px;
}
li#nav-products a span,
li#nav-activities a span {
display: block;
background:
url(/content/v4/img/imaginext/nav-mask.gif) no-repeat;
height: 60px;
z-index: 20;
position: relative;
/*top: 16px;*/
cursor: pointer; /*for
ie on the spans*/
}
li#nav-products a {
background-position: bottom left;
width: 135px;
position: relative;
/*top: -16px;*/
}
li#nav-activities a {
background-position: bottom right;
width: 136px;
position: relative;
/*top: -16px;*/
}
li#nav-products a span {
width: 135px;
background-position:
top left;
}
li#nav-activities a span {
width: 136px;
background-position:
top right;
}
li#nav-products a:hover, li#nav-activities a:hover {
top: 0;
}
li#nav-products a:hover span, li#nav-activities
a:hover span {
top: 0;
}
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
