Re: [SOLVED] Header – floats and li navigation positioning

[lookslikepat]

Ok, I have a solution for you :)

See the screenshot, if it still doesn’t work I must have forgotten something or other…

All the LI’s have to be floated, and the text-indent moved to the A inside instead.
Also you need to set a width and height on the LI’s, as well as the A inside them ( @ 100% – 100% )
You can still keep display: inline on your LI’s as this is good for bugs in IE ( <7 ? )

After this, change your background-position for each of the LI > A to -38px, -76px and so on…

So change the following in your code (I havn’t written all of your code here, only the things I changed. So UPDATE your code, and don’t replace it ;)

EDIT: Maybe I should add that you have to add unique classes to each A link element in the menu as well, for background-positioning of your sprite. Check the additional code further down…

Code:

#lowersitenav li {
display:inline;
float:left;
height:38px;
width:77px;
}

#lowersitenav li a {
display:block;
height:100%;
text-indent:-9999px;
width:100%;
}

[img]http://elundmark.se/filer/1245600172781.png[/img]

Code:

/* This code depends on you already having declared a background-image for all the A elements. */
#lowersitenav a.about {
background-position: 0px 0px; /* Like it is now, right ? */
}
#lowersitenav a.department {
background-position: 0px -38px;
}
/* Then just keep adding, -76px >>> */