Padding on inline navigation

[mattblackuk2002]

I'm having problems regrding applying top and bottom padding to the anchor element within an inline list. I wanted to place the horizontal navigation at the bottom right of the header. To do this, I made the header position:relative, and the topnav position:absolute with a bottom: 0 and float:right.

Code: Select all

#header {
position: relative;
height: 130px;
background: #8497c2;
background-image: url('header-bg.png');
background-repeat: no-repeat;
}

#topnav 
{
position:absolute;
bottom: 0;
font-size: 1.4em;

}

#topnav ul {
list-style: none;
background-color: #fffcd9;
margin: 0;
padding: 0px;
float: right;
font-family: 'Verdana', 'Helvetica', Sans-Serif;
border: none;
border-top: 1px solid #00267f;
border-right: 1px solid #00267f;
border-left: 1px solid #00267f;
}

#topnav li {
display: inline;
margin: 0;
}

#topnav a {
padding:0.8em;
font-weight: 300;
text-decoration: none;
}

I would like the buttons to be touching the base, and also have padding around the text. I also would like a rollover state. I figured this would mean applying 0 padding to anything except the <a> element. If I added padding to the ul or the li, then the whole button would'nt be affected on the rollover. The problem I'm having is that top padding and bottom padding do not seem to be having any effect on the a element and this I can't understand as I've had a look at the listamatic website at http://css.maxdesign.com.au/listamatic/ and many of horizontal examples have padding top and bottom applied in the same way I have.

Can anyone help me and explain why mine isn't working??

Thanks

[MikeHopley]

Originally Posted by mattblackuk2002

To do this, I made the header position:relative, and the topnav position:absolute with a bottom: 0 and float:right.

You can't apply float and positioning to the same element. They are mutually exclusive; if I recall correctly, the positioning will override the floating.

If you want it at the bottom right of the header, you could use:

Code: Select all

position: absolute;
bottom: 0;
right: 0;

[mattblackuk2002]

Thanks for that, but I have already tried that aswell but I still get the padding problem...

[mattblackuk2002]

Originally Posted by MikeHopley

You can't apply float and positioning to the same element. They are mutually exclusive; if I recall correctly, the positioning will override the floating.

If you want it at the bottom right of the header, you could use:

Code: Select all

position: absolute;
bottom: 0;
right: 0;

I didn't apply them both to the same element - I just explained it badly! The float was to the list inside the absolute div.