How do I insert spacer images between li elements in MVC?

Question

I have the following in my MVC3 master page (_Layout.cshtml).

<ul id="someMenu">
    <li><a href="http://someURL"> someText </a></li>
    <li><a href="http://someURL"> someText </a></li>
    <li><a href="http://someURL"> someText </a></li>
</ul>

I tried to add spacer images between the links by doing this:

<ul id="someMenu">
    <li><a href="http://someURL"> someText </a>
        <img src="http://someSpacer.gif" />
    </li>
    <li><a href="http://someURL"> someText </a>
        <img src="http://someSpacer.gif" />
    </li>
    <li><a href="http://someURL"> someText </a>
    </li>
</ul>

But that's not displaying properly, plus I feel like I'm violating D-R-Y typing that image URL over and over again (my actual web page has several of these li elements, not just 3). It's displaying the spacer image over part of the li, but I want it to appear between the li elements. And no, I'm not able to place the img controls between the li controls; it's not allowed.

Back in the days of web-forms and asp:Menu, you could specify the "StaticBottomSeparatorImageUrl" once and everything worked nicely. Does anyone know how to accomplish this in MVC3?

Answer 1

This is not really an MVC issue, more an HTML and CSS issue. Rather than place some spacer I would add a background image and some padding to the li?

li
{
    padding-right: 10px;
    background-image: url('someurl');
    background-position: center right;
    background-repeat: no-repeat;
}

Answer 2

I have created a seperate class in my css sheet such as:

   .spacing{
    height: (whatever you want);
    }

Then do your code like this:

   <ul id="someMenu">
      <li><a href="http://someURL"> someText </a></li>
    <div class="spacing"></div>
      <li><a href="http://someURL"> someText </a></li>
    <div class="spacing"></div>
      <li><a href="http://someURL"> someText </a></li>
   </ul>

I think this is easy and dynamic. One change in one place, changes them all for that associated class. Good luck!