Question

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

 <div id="wrapper">      
  <div
  id="header">Header</div>      <div
  id="menu">
     <ul>
       <li><a>Contact Us</a></li>
       <li><a>Recommends</a></li>
       <li><a>Deals</a></li>
       <li><a>Home</a></li>
     </ul>      </div>      <div id="content">Content</div>      
  <div id="footer">Footer</div>  
</div>




 @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.