Forum Moderators: not2easy
It's hard to explain the problem without showing it; but I'll try:
NB! In my page I will use background images instead of simply backgrund colors; but to make a readable/usable example here I'm using backgrund colors instead.
In Firefox and Opera the containing DIV and the LI/A is of the same height - and this is how I want it. But in IE the LI/A element is lower - and the backgrund from the DIV is showing at the top. It seems that I cant adjust the height in the A or the LI element. Does anybody know how to work around this problem? (When I use background images to gain my effect - it really does not look good!)
Here is my example code:
<!-- HTML -->
<div id="tabline">
<ul>
<li><a href="#1">This is a long text</a></li>
<li><a href="#2">Not so long</a></li>
<li><a href="#3">Short</a></li>
<li><a href="#4">And then a very long one here</a></li>
<li><a href="#5">Last text</a></li>
</ul>
</div>/* CSS */
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
}
#tabline
{
height: 16px;
background-color:#990000;
}
#tabline ul
{
margin: 0;
padding: 3px 0px 0px 0px;
list-style-type: none;
}
#tabline ul li
{
display: inline;
float: left;
}
#tabline ul li a
{
text-decoration: none;
margin: 0;
padding: 3px 6px 0px 8px;
color: #000000;
background-color:#CCCCCC;
}
#tabline ul li a:hover
{
color: #fff;
background-color: #369;
}
IE is handling the floated <li>'s slightly differently (that's the bug part I suppose) their float model is slightly different. However you can work around it fairly easily.
First off you have 3px top padding on your UL and are then floating the <li>'s. IE uses a different float model, if you exaggerate the height of the <ul> container and the top padding values in all your code you will see what happens more clearly, however without getting technical remove that top padding from the ul (we'll get it back in a bit) once you do that you'll see that top padding on the <a> is not actually doing anything in your code (in all browsers). That is because the <a> is an an inline element and an inline elements top/bottom padding will not actually displace the inline text, that is correct behaviour.
What you want to do is make the <a> element fill the <li> element so you need to make them into a block level element, that way you can use width/height padding etc if you want.. and because the <li> elements are floated you should also float the <a>'s inside them, floating them will automagically make them block level elements too.
Instead of using top padding to get the <a> and <li> to fill the height of the ul container, which can be a bit of guess work as actual height would be font-size dependant, I would use line-height instead. line-height is the physical area a line of text (or inline image) takes up so if your font size is 16px the default line height might 19-22px depending on the font-family used, however if you specify a line height of 40px; that's what you get regardless of font-size or family, and as you using images this is possibly the closest to an exact science as you'll get.
So set the line height on the <li> to be the height you actually want the menu to be, same height as your images.. then remove the top padding from the <a>, once the <a> is floated it will also inherit the same line-height as the <li> and that should be it!
If you then want a gap above your tabs, you would do that by margining your <li>'s and increasing the height of the container
Here's some code, with exaggerated values to help see, I put in the top gap for illustration too
/* CSS */
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
}
#tabline
{
height: 45px; /* height of images + any top margin required */
background-color:#990000;
}
#tabline ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#tabline ul li
{
display: inline;
float: left;
line-height: 40px; /* height of images */
margin-top: 5px; /* if you do want a gap at the top line-height + margin should equal the height of the container */
}
#tabline ul li a
{
float: left; /* float the anchors too to make them block level elements and fill the li */
text-decoration: none;
margin: 0;
padding: 0 6px 0 8px; /* remove top/bottom padding */
color: #000000;
background-color:#CCCCCC;
}
#tabline ul li a:hover
{
color: #fff;
background-color: #369;
}
Suzy
