I'm trying to find different ways of making a typical navigation list with little pipe type dividers between the elements. I've seen this done frequently by adding extra list items to the menu that have special styles or (shudder) contain actual pipes. That bothers me. Waste of code, non-semantic, mixing form with function, etc., etc.
Lacking the luxury of relying on the content property, I was looking for other ways to accomplish this without adding junk to my markup. Because of the design I was trying to recreate, I had an additional problem in that the pipes between elements needed to be about 2/3 the size of the font. In the real site, this got translated to:
<style type="text/css">
#Masthead ul#Locale {
position: absolute;
width: 275px;
right: 0px;
overflow: hidden;
margin-top: 25px;
}
#Masthead ul#Locale li {
display: block;
float: left;
height: 10px;
overflow: visible;
border-left: 1px solid #666;
padding: 0px 5px;
margin: 0px;
margin-left: -1px;
}
#Masthead ul#Locale li a { position: relative; top: -2px; font-size: 12px; }
</style>
<ul id="Locale">
<li><a href="\" class="current">United States</a></li>
<li><a href="\" id="indiaLink" title="Coming soon!">India</a></li>
<li><a href="\" id="intlLink" title="Coming soon!">International</a></li>
</ul>
Not real complicated, works good, unfortunately I may need to add a tooltip overlaying the links and overflow:hidden is not mixing real well with that concept. That's why I started looking for other ideas.. I came up with six methods that looked pretty and were accomplished with minimal typing. Here they are in Firefox 3:
[caption id="attachment_24" align="alignnone" width="296" caption="All six menus, FF3"]
[/caption]
However, most of those don't work in other browsers. Safari is closest, FF2 is reasonable but ugly, Opera laughed so hard at my attempts to coerce its cooperation that milk came out of its nose. I've run into this a few times, and I'm not really sure what's going on. I'm used to FF showing an accurate representation, and I'm having a hard time tracking down firm info on exactly where the newest version is broken.
This is what I have right now. I guess I'm going to start over from scratch and test on Opera, Safari, and FF2 before checking the browsers on my PC.
UPDATE: Oh yeah. Line-height. Right. Below appears to work in everything but IE.
ul, li, a { position: relative; }
ul.nav, ul.nav2 { list-style-type: none; background-color: #8c432a; overflow: auto; height: auto; min-height: 24px; padding: 0px; line-height: 24px; }
ul.nav li { float: left; width: 5em; text-align: center; vertical-align: middle; }
ul.nav li *, ul.nav2 * { vertical-align: middle; padding: 5px 0px; }
ul.nav2 li { display: inline; padding: 0px 20px; height: auto; }
a, a:link, a:visited { color: #cfc; text-decoration: none; font-weight: bold; width: auto; }
a:hover, a:active { color: #cff; }
ul.bg li { background-color: #c93; height: 24px; margin-left: 2px; }
ul.over li { line-height: 10px; border-left: 1px solid #cff; margin: 7px 0px 7px -1px; }
ul.over li a { vertical-align: middle; }
ul.img li { background: transparent url(border.gif) left 1px no-repeat; margin-left: -1px; }
ul.img li a { padding: 5px 0px; }
ul.nav2.bg { font-size: .1px; }
ul.nav2.bg li { margin: 0px 0px 0px 2px; padding: 8px 20px; font-size: 15.5px; }
ul.nav2.over li { line-height: 24px; font-size: 2px; padding: 4px 20px; }
ul.nav2.over li a { font-size: 15.5px; }
ul.nav2.img li { background: transparent url(border.gif) left top no-repeat; padding: 2px 20px; }
(Classes of the ULs are "nav" for the floats, "nav2" for the inlines. Within those sets, they go in the same order as the CSS - "bg", "over", "img".)
UPDATE again: Here's the conditional styling for IE. It doesn't make all the menus look the same as they look in other browsers, but it makes them usable and gets them reasonably close, visually.
<!--[if lte IE 7]>
<style type="text/css" media="screen">
ul.nav, ul.nav2 { height: 24px; overflow: hidden; }
ul.nav2 li { top: 2px; }
ul.over { padding: 0px 0px; overflow: hidden; }
ul.over li { margin: 0px; left: -1px; }
ul.img li { background: transparent url(border.gif) 0px 1px no-repeat !important; zoom: 1; padding: 5px 20px; }
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css" media="screen">
ul.over { padding: 0px; overflow: hidden; }
ul.over li { margin: 0px; left: -1px; top: 9px; line-height: 12px !important; overflow: visible; }
ul.over li a { top: -4px; }
</style>
<![endif]-->