Padding on a list displayed inline

[Erica C.]

Hi,

I'd like to increase the space between the bottom of the top banner and the navigation list of links here (http://www.atticwindowswebdesign.com/tim/example.html) but I want to keep the hover effect I currently have. I want the background color on the hover to touch the banner, making it blend with the banner. However, it seems like the only way to increase the spacing is to add padding to the ul which also creates a gap between the hover effect and the banner. Adding top padding to a list displayed inline doesn't seem to work.

CSS here (http://www.atticwindowswebdesign.com/tim/style_extra.css)

Any thoughts?

Thanks!

Erica

[Andilinks]

A 1px (or whatever) transparent image as spacer might work if there is no css solution. Or perhaps a transparent border on the banner.

[Wassercrats]

Change the #nav ul style to:
#nav ul {margin: 0;
padding: 1em 0 0.5em 0;
}and add:li>a {padding-top: 1em;
}I have a hunch it could be done with just one padding style, but at least this works, at least in IE 7.

[Erica C.]

Thanks, Wassercrats!

It's working in Mozilla too. I just wish I understood why it worked.

Do you have any idea why it has to be li > a {padding-top: 1em;} and not just #nav li {padding-top: 1em;}

Thanks for you suggestion too, Andi. I did want to go with a CSS solution.

Erica

[kitchin]

For UL, LI, etc., I stay away from setting the left/right margin and padding, due to IE6's incompatibilities with other browsers. So more or less out of superstition, I would change

margin: 0;
padding: 1em 0 0.5em 0;

to

margin-top: 0; margin-bottom: 0;
padding-top: 1em; padding-bottom: 0.5em;

About the LI vs. A question, maybe "display: inline" on LI is interfering with giving it block properties like padding, margin????

[Wassercrats]

Maybe what kitchin said.

Also, I meant to mention that maybe you should use a background image for the menu text instead of a background color if you really want to blend with the water.

[Erica C.]

Hm. I can see what changing the margin and padding does as kitchin suggests.

I had been thinking about using a background image for the hover effect but hadn't got to it yet.

The strange thing about the padding is that I tried assigning padding to li > a before asking the question. It doesn't work unless the padding for the ul is set to something more than 0 as well.

Thanks!

[Wassercrats]

Maybe if you float the li items to keep them on the same line instead of inlining them you'd be able to use the padding on li.