Styling Lists and Navigation Menus - Beginning CSS3 - page 220

11. The navigation bar looks good in all browsers except one—iE 6. it inserts a wide gap
between each menu item. if iE 6 is no longer on your support list, you don't need to
worry about it. The menu is perfectly usable. it just doesn't look as good. However, if
you're still supporting iE 6, the fix is easy. Just set the display property of the list
items to inline . This closes up the gaps in iE 6 and has no effect on other browsers.
Amend the style rule for the list items like this:
#nav li {
margin: 0;
display: inline;
}

This exercise assumes that you want the vertical navigation bar to fill the entire width of a container, such as
the sidebar. if you want the menu to be narrower than its containing element, add the width property to the
style rule for the unordered list or change the values of its left and right margins.

Creating a Horizontal Text-based Navigation Bar
The basic principles behind creating a horizontal navigation bar are the same as for a vertical one. However, you
need to give the menu items a width and float them left. Unfortunately, this poses problems with long menu
items. If one or more items are too long to fit into the declared width, the buttons end up different heights.

eXerCISe: CreatING a hOrIZONtaL NaVIGatION Bar

in this exercise, you'll convert an unordered list into a horizontal navigation bar. Most of the styles are the
same as for a vertical navigation bar. Because the menu items are floated, you need to adjust the position of
the following content. Although there are a couple of ways to achieve this, only one produces a satisfactory
cross-browser solution.

you'll need to use the browser's developer tools to inspect margins and height. i suggest using Safari or
Chrome to start with. if you have access to iE 9 or later, you'll also use its developer tools to inspect a
problem unique to internet Explorer.

use horizontal_begin.html and styles/horizontal_begin.css in the ch10 folder as your starting point. The
files are the same as in the preceding exercise, but the unordered list has been moved to between the
header<div> and the sidebar. The finished menu is in horizontal_end.html and styles/horizontal_end.css.
1. The unordered list has been given the id nav . Create an id selector to remove the
bullets. Also, give it a top margin of 15px , but zero the other margins and padding
like this:
#nav {
list-style-type: none;
margin: 15px 0 0 0;
padding: 0;
}

There are six links. if you leave a 1% gap between each one, with a similar gap at
both ends, the remaining space is 93% . dividing that figure by six gives you a width
of 15.5% for each menu item. Create a style for the list items, setting their width

2.