title: CSS Navigation with background images
body: <p>I have a CSS navigation that looks like this:</p>
  
  <pre><code>        &lt;div id="header_nav"&gt;
              &lt;div class="header_nav_left"&gt;&lt;/div&gt;
              &lt;div class="header_nav_item"&gt;&lt;span class="header_nav_item_span"&gt;Menu 1&lt;/span&gt;&lt;/div&gt;
              &lt;div class="header_nav_item"&gt;&lt;span class="header_nav_item_span"&gt;Menu 2&lt;/span&gt;&lt;/div&gt;
              &lt;div class="header_nav_item"&gt;&lt;span class="header_nav_item_span"&gt;Menu 3&lt;/span&gt;&lt;/div&gt;
              &lt;div class="header_nav_item"&gt;&lt;span class="header_nav_item_span"&gt;Menu 4&lt;/span&gt;&lt;/div&gt;
              &lt;div class="header_nav_item"&gt;&lt;span class="header_nav_item_span"&gt;Menu 5&lt;/span&gt;&lt;/div&gt;
              &lt;div class="header_nav_item"&gt;&lt;span class="header_nav_item_span"&gt;Menu 6&lt;/span&gt;&lt;/div&gt;
              &lt;div class="header_nav_item"&gt;&lt;span class="header_nav_item_span"&gt;Menu 7&lt;/span&gt;&lt;/div&gt;
              &lt;div class="header_nav_item_last"&gt;&lt;span class="header_nav_item_span"&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;div class="header_nav_right"&gt;&lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Visually the menu looks like this:</p>
  
  <p>\ Menu 1 \ Menu 2 \ Menu 3 \ Menu 4 \ Menu 5 \ Menu 6 \ Menu 7 \</p>
  
  <p>I am achieving the '\' effect through the use of a background image in each div.  The CSS for the menu follows:</p>
  
  <pre><code>.header_nav_left {
  width:144px;
  height:24px;
  float:left;
  background: url('/images/header_nav/left_cap.jpg') no-repeat;
  background-position: right;
  }
  
  .header_nav_item {
  height:24px;
  font-size: 15px;
  text-align:left;
  float:left;
  background: url('/images/header_nav/divider.jpg') no-repeat #fc7a06;
  background-position: right;
  min-width:75px;
  }
  
  .header_nav_item_span {
  vertical-align:middle;
  padding-left:5px;
  }
  
  .header_nav_item_last {
  height:24px;
  font-size: 15px;
  float:left;
  background:#fc7a06;
  }
  
  .header_nav_right {
  height:24px;
  float:left;
  background: url('/images/header_nav/right_cap.jpg') no-repeat;
  background-position: left;
  min-width:24px;
  }
  </code></pre>
  
  <p>The problem I am running into is that I have a control that automatically generates this menu based on the logged in user, and the text of the menu item varies.  The problem I am running into is that because I am using a background image and not an inline image, my menu inevitably winds up looking like this:</p>
  
  <p>\ Menu \1 Menu 2\Men\u 3 Menu 4 \Menu 5\Menu 6 \ Menu 7 \</p>
  
  <p>This makes sense: since the divider image isn't a block level image, the text within the span simply displays over top of it.  I can probably solve this problem by adding an inline image to each nav_item but I was hoping to keep the navigation as clean as possible.  Is there someway for me to apply a style that will take the divider image into account without needing to add the image inline?  If it matters the divider image is 24px wide. </p>