background image - div - height problem - ul li

[joke]

Dear all,

I'm having a style problem in my horizontal navigation menu bar.

The overall page layout consists of a wrapper with 3 header div's 2 colum divs and a footer div.

The problem lays within in the second header.
In IE.6 the height of the menu bar exceeds the height of the background image. The result is a white space (+/- 5px in height) between the background image and the border bottom.
The links appear nicely centered in the background image.

Here's the code:
----
CSS
----
#header2 {
position: relative;
width: 785px;
height:28px;
margin:0;
padding-left:122px;
padding-top:7px;
border-bottom: 1px solid #eaeaea;
background: url(images/blauwmain2.jpg);
background-repeat: no-repeat;
vertical-align: bottom
}

#mainnav ul
{
list-style:none;
margin: 0;
}

#mainnav li
{
display: inline;
font-size:.8em;
}

#mainnav a
{
text-decoration: none;
border:none;
padding: 5px 5px 9px 5px;
}

#mainnav a:link, #mainnav a:visited
{
color: #000;
border:none;
text-decoration: none;
padding: 5px 5px 9px 5px;
}

#mainnav a:hover
{
background-color: #fff;
color: #9cf;
border:none;
padding: 5px 5px 9px 5px;
}
-----
HTML
-----
<div id="header2">
<ul id="mainnav">
<li><a href="">Algemene info</a></li>
<li><a href="cursusaanbod.htm">Cursusaanbod</a></li>
<li><a href="">Vestigingen</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>

THANX for your help in advance.

Ps. I'm a beginner in css

[SuzyUK]

Hi joke and Welcome to WebmasterWorld!

there quite a few bits'n'bobs that this question throws at us, and by fixing one will not answer your question ;)

As you say you're new to CSS I'll take them one by one and try to point you to places that you can follow up your learning later on. There's likely no single answer in this case but let's see how we go and you can ask quesions about the rest later if you like?

First off the most important thing to learn when starting CSS is learning the differences between the two Box Models [webmasterworld.com] we have to deal with. That's a lot to read I know, but how it affects your menu (with or without a Valid Doctype) is that the widths and heights may not be be what you expect them to be, and indeed even if there is a proper valid Doctype (making them same in compliant browsers) then they will still be different in IE5.x. So one solution is to try and avoid the use of padding with explicit widths/heights if possible.

So first the header width.. you have a width of 785px then left padding of 122px this will make the div 907px wide in compliant browsers, and 785 in IE5.x and IE6 (Quirks Mode). I can't tell if you have a width set on your wrapped div that you mention but if you do just set that header to the explicit width you want or 100% which it will take from the wrapper. Then remove the 122px left padding (you can put this on the <ul> instead) which will get the width of the header div sorted for a start..

I can't see that you are positioning anything inside the header, and if you're not remove the position:relative; from it too, it might cause problems with IE later (but that is a different story if you need it then leave it and see.. )

Next the height of the header.. the same applies as did the width, and this one might not be as easy to remove padding from but if you're just going to have a single line menu the you can use line-height to an advantage here.

set the line-height to exactly what you want the height to be and remove the top bottom paddings off the div and the links, the links will automatically inherit the line height if line-height is set with units (px, em etc..) - Using line-height should also take care of the vertical centering for you too.

and lastly to complete the header renovations I would like you to float it left which should be Ok if it's contained in the wrapper (or add overflow: hidden if it causes alignment problems) this will make the header, and it's background expland to contain the floated list.. it's not floated yet but it will be in a minute ;)

#header2 {
border-bottom: 1px solid #eaeaea;
background: #cfc url(images/blauwmain2.jpg) no-repeat;
width: 785px;
float: left;
line-height: 35px;
}

then the list itself <ul> .. you have it targetted wrongly using

#mainnav ul

it should actually be

ul#mainnav

as in an ul with an ID of mainnav rather than a ul that is a descendant of an element which has that ID. That should sort out the bullets situation for compliant browsers.

you had margin set to zero here, but when dealing with lists you should set both the margin and padding to zero to set them off on a level footing, as some browsers use margin and others use padding to create a lists default indent, however you can then use one or the other to provide you what you need as long as the other is explicitly at zero.. so now add the left padding that was on the header onto the list instead so it sits nicely inside the header without contributing to its width.

ul#mainnav{ /* change this */
list-style:none;
margin: 0;
padding: 0 0 0 122px; /* add this */
}

The list items are what's causing the biggest problem with that extra whitespace in IE, it's just a problem it has [webmasterworld.com] with lists and can happen in both Strict and Standards mode, so this is where I would suggest a change from

display:inline;

to

float: left;

, which is why I suggested putting the float or overflow on the header. In short the header will not know it contains these floated list items otherwise and will collapse (again it likely wouldn't in IE, but that is wrong) - for more on Floats see msg#27 Float Basics [webmasterworld.com]. So the addition is more for compliancy reasons ~ these elements do not have any padding to worry about so it's only the float left change required..

#mainnav li
{
font-size:.8em;
float: left; /* changed this */
}

Now the <a>nchors themselves, that code can be somewhat shortened but what's important now is to not make the links force the height any bigger than you already specified so we remove the top bottom padding again

#mainnav a {
text-decoration: none;
padding: 0 5px 0 5px;
/* float: left; */
}

then as you have already specified the text decoration and padding an all <a> elements you only need to specify any differences on their pseudo states

#mainnav a:link, #mainnav a:visited {
color: #000;
}

#mainnav a:hover {
background-color: #fff;
color: #9cf;
}

That should now do something like you want? You'll notice I left a commented float on the link if you uncomment it it will effectively make the link a block item which will expand to fill the header, you maybe don't need that but uncomment it to see the effect it has when hovered

There is more than one way to do this and actually the biggest problem is the "whitespace in lists" that IE has and the workarounds for that (floats) are built in here

hth, and if you have any questions about the different bits please ask..

Suzy