Learning Web Design Third Edition- P37:Everything you need to know to create professional web sites is right here. Learning Web Design starts from the beginning defining how the Web and web pages work and builds from there. By the end of the book, you'll have the skills to create multi-column CSS layouts with optimized graphic files, and you'll know how to get your pages up on the Web. | Using Lists for Navigation BROWSER BUG There is a bug in Internet Explorer 5 for the Mac that causes this floated list item example not to work correctly as shown here. If you need or want to support IE5 Mac you need to float the anchor elements as well as the list items by adding this declaration to the beginning of the nav li a rule float left Then you need to add a hack at the end of the style sheet that overrides the earlier float value and sets the float for anchor elements back to none in all browsers except IE Mac . Be sure to copy it exactly noting the difference between slashes and backslashes. Commented backslash hack hides rule from IE5-Mac nav li a float none End IE5-Mac hack The following example is just one of many variations on formatting navigation with floated list items. The primary steps are 1. Turn off the bullets list-style none . 2. Float each list item float left . 3. Make the anchor elements a display as block elements so dimensions may be set display block . 4. Format the links with various styles. T his time each a element is given a decorative background image that makes it look like a tab Figure 17-10 . body font-family Verdana Arial Helvetica sans-serif font-size .8em background-color FEF6D6 ul nav list-style none margin 0 padding 0 ul nav li float left margin 0 2px padding 0 ul nav li a display block to set width height of the a element width 100px height 28px line-height 28px background E3A7CA url no-repeat text-transform uppercase text-decoration none text-align center St MF SANS-SERIF SCRIPT OISKAY DINGBATS Figure 17-10. Tabbed navigation created with floated list items. In this example the list items are still block elements but because they are all floated to the left they line up next to one another. Notice that the display property for the anchor a elements has been set to block anchors are usually inline elements . This was done to allow us to apply width and height attributes to the a elements. The remaining properties
