DESIGNING INTERFACE COMPONENTS 213
Now let??™s take a look at a simple ?¬? x for Internet Explorer 6 & 7. When
the bullets were removed, the ul element shrank down to the same
width as the list items. We can now create our top line by applying
the style to the top border of the ul, which contains all the list items.
Instead of using the markup I just listed, you could use the following,
which makes the top line appear in Internet Explorer too.
body {font:1em verdana, arial, sans-serif;}
div#listcontainer {border:1px solid #000; width:150px;
font-size:.75em; margin:20px;}
ul {border:0; margin:12px 20px 10px 1.25em; padding:0;
list-style-type:none; border-top: 2px solid #069}
li {border-bottom:2px solid #069; margin:0; padding:.3em 0;
text-indent:.5em}
The visual outcome is identical to Figure 6.33. Sometimes you can
?¬? nd an easy work-around like this for Internet Explorer, and sometimes
you have to accept that not everyone is going to get the same
experience. As long as everyone gets an acceptable experience,
that??™s OK.
CONVERTING THE LIST INTO A MENU
We now have something that looks a lot like a set of navigation links.
All we need to do is turn what are now lines of text into a menu??”
clickable links??”and we??™ll have an attractive and functional navigation
component (Figure 6.34). This is quite simple using this code: