CSS list menu rollover padding / margin

Question

Hi, im wondering if anyone could please help me with a css / html issue.

I have a complex background image. The menu div is positioned at the correct location to overlay the background where it is ment to position. The entire LI has a hover rollover image with a display type of block. The result is that when the mouse is over the list href the entire block rollover works..

The problem happens however when i attempt to add padding to create a buffer between the list item text and its border.. Things start to go funny... I'll add a screen shot.. Padding is required to move it from the border.

The second problem exists that i cant valign the text to the middle without applying a line height.. The solution works great until items wrap.. I need to be able to wrap menu item text..

The below example shows the state with the current CSS/HTML. The menu bar and rollover are in place as expected. Amend i cant place the image to to restrictions on posting as a new person here.. The example can however be found at 213.40.100.100 / example1.jpg

The below example shows the state when padding OR margin is added. The LI seems to completly shift, not moving the interal text..

213.40.100.100 / example2.jpg

Header

• Contact Us
• Recommends
• Deals
• Home

Content Footer

@charset "utf-8"; /* CSS Document */

• { margin: 0; padding: 0; }

body { padding-top: 10px; background: url(background.jpg) no-repeat center top; height:100%; }

div#wrapper { margin: auto; height: 100%; width: 978px; min-width: 978px; }

div#header { height: 196px; }

div#menu { height: 69px; position: relative; }

div#menu ul { height: 69px; list-style-type: none; }

div#menu ul li { display: block;
height: 69px; width: 140px; float: right; padding: 5px; }

div#menu ul li a:hover { display:block; background:url(menu_red_bg.jpg) repeat-x; height: 69px; color:#FF0; font-family: Arial, Helvetica, sans-serif; font-size: large; }

div#menu ul li a { text-decoration: none; color:#000; font-family: Arial, Helvetica, sans-serif; font-size: large; }

div#content { margin-top: 80px; }

Answer 1

I think you are adding the padding to the wrong element. or you add a "margin" to the <li> or you add a padding to div#menu

I should do this:

A div#menu with the yellow gradient background, with the 5px padding and a margin: 80px 0 0 0; Inside this div, the <ul><li>...</li></ul> You don't need to add any padding or margin to the li, just be sure the height of each li is less than the div#menu heigh + padding.