title: ASP.NET Menu control not respecting padding values in IE or FF
body: <p>I have set ridiculous padding values and cannot get padding to extend the total width beyond the content size.  Isn't FF supposed to follow a "box model" whereby padding is added to the content size?  Here's the relevant code.</p>
  
  <p>Environment:
  IE7, FF 3.6.8</p>
  
  <p>CSS:</p>
  
  <pre><code>.StaticMenuStyle
  {
      width: auto;
      background-image: url(../images/nav_repeat.gif);
      background-repeat:repeat-x;
      padding-left: 100px;
      /*padding-top: 10px;
      margin-top: 10px;
      padding-left: 8px;
      padding-right: 8px;
      padding-top: 5px;
      padding-bottom: 5px;
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 0px;
      margin-bottom: 0px;*/
      float:left;
  }  
  .StaticMenuStyle a:link
  {
      padding-left: 100px;
      text-decoration: none;
  }  
  .StaticMenuItemStyle
  {
      height: 38px;
      /*min-width: 75px;*/
      font-family:Arial, Helvetica, sans-serif;
      font-size:12px;
      text-align: center;    
      color:#006c56;
      padding-left: 100px;
      /*padding-left: 100px;
      padding-right: 8px;
      padding-top: 0px;
      padding-bottom: 0px;
      border:5px solid clear;
      /*margin-left: 0px;
      margin-right: 0px;
      margin-top: 0px;
      margin-bottom: 0px;*/
      /*background: right 50% url(../images/nav_div.gif) no-repeat;*/
      background-image: url(../images/nav_div.gif);
      background-repeat:no-repeat;
      background-position:right;
      /*text-indent:5px;*/
  }
  /*
  .StaticSelectedStyle
  {
      color:#006c56;
      height: 38px;
      background-image: url(../images/nav_over.gif);
      background-position:center bottom;
      overflow:hidden;
  }
  */
  .StaticHoverStyle
  {
      /*color:Black;*/
      /*color:White;*/
      /*height: 38px;*/
      /*background-image: url(../images/nav_over.gif);*/
      /*background-position:center bottom;*/
      /*overflow:hidden;*/
  }
  .StaticMenuStyle a:hover
  {
      /*background-image: none;*/
      height: 38px;
      background-image: url(../images/nav_over.gif);
      background-position:center bottom;
      color:Black;
      text-decoration: none;
  }
  .DynamicMenuStyle
  {
      height: 38px;
      /*width: auto;*/
  } 
  </code></pre>
  
  <p>ASP.NET</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SJMTemplateDot4.WebForm1" %&gt;
  
  &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;%--&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;--%&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="Styles/Site.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
      &lt;asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="false"  /&gt;
       &lt;asp:Menu 
                  ID="MenuMain" 
                  runat="server" 
                  DataSourceID="SiteMapDataSource2"
                  Orientation="Horizontal"
                  StaticMenuStyle-cssClass="StaticMenuStyle"
                  StaticMenuItemStyle-cssClass="StaticMenuItemStyle"
                  StaticHoverStyle-cssClass="StaticHoverStyle"
                  /&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>