title: CSS list menu rollover padding / margin
body: <p>im wondering if anyone could please help me with a css / html issue. </p>
  
  <p>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.. </p>
  
  <p>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. </p>
  
  <p>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.. </p>
  
  <p>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</p>
  
  <p>The below example shows the state when padding OR margin is added. The LI seems to completly shift, not moving the interal text..  </p>
  
  <p>213.40.100.100 / example2.jpg</p>
  
  <pre><code> &lt;div id="wrapper"&gt;      
    &lt;div
    id="header"&gt;Header&lt;/div&gt;      &lt;div
    id="menu"&gt;
       &lt;ul&gt;
         &lt;li&gt;&lt;a&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a&gt;Recommends&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a&gt;Deals&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a&gt;Home&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;      &lt;/div&gt;      &lt;div id="content"&gt;Content&lt;/div&gt;      
    &lt;div id="footer"&gt;Footer&lt;/div&gt;  
  &lt;/div&gt;
  
  
  
  
   @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; }
  </code></pre>