eg*********@egil.net (Egil Helland) wrote in
news:1hb5xrw.k4enge12nb96wN%eg*********@egil.net:
I am trying to create a breadcrumb with both icons and text, looking
like:
[img] Home > [img] Trail > [img] Trail
Now, how on earth do I get the images and text to vertically align
so that the vertical center of the text is identical to the vertical
center of the images, with margins top and bottom as well as borders
top and bottom? And retain cross-browser compability?
-e
See
http://alamo-smccann.nmsu.edu/ and hover over one of the menu items
below the row of pictures. Is that kind of what you want?
<div id="primaryNav">
<ul>
<li id="current"><a href="/students/">Current Students</a></li>
<li id="prospective"><a href="/prospective/">Prospective Students
</a></li>
<li id="faculty"><a href="/facstaff/">Faculty & Staff</a>
</li>
<li id="alumni"><a href="/alumni/">Alumni</a></li>
<li id="visitors"><a href="/visitors/">Visitors</a></li>
</ul>
</div>
#primaryNav a:hover, #primaryNav a:active {
color:white;
background-color:#882345;
background: url("/image/arrow.gif") no-repeat left;
}
Note how the image is placed in the background. You could also use the
image with #primaryNav a:link, #primaryNav a:visited if you wanted it
visible all the time.
Then apply text-align:center to #primaryNav
HTH
--
Stan McCann, "Uncle Pirate"
http://stanmccann.us/
Webmaster, NMSU at Alamogordo
http://alamo.nmsu.edu/
Now blocking Google Grouper posts and replies.
http://blinkynet.net/comp/uip5.html 
