Question

I have the following markup for breadcrumbs menu:

<div>
    <span class="start-here">You are here:<span>
    <a href="/">example.com</a>
    <span class="raquo"> › </span> 
    <a href="/news">News</a>
    <span class="raquo"> › </span> 
    Title
</div>

Is there a smart way to move those › (.raquo) characters a few pixels up without absolute positioning when all of the elements are displayed inline? I want this character to be smaller than the others and to be displayed in the center of the line (or some pixels down/up).

(I need it to work also for IE6 and up)

Answer 1

Not sure about IE6, but it seems like the following should get you close to what you want.

.raquo {
  font-size: 10px;
  vertical-align:middle; 
}

Just make font-size whatever you need, vertical align should set it to the middle of the line-height.