| home / programming / css_lists /1 |    [previous][next] |
|
|
|
#menu
{
padding:0;
margin:0;
color:#fff;
font-family: arial, helvetica, sans-serif;
white-space:nowrap;
border:1px solid #f00; /* add a red border */
}
You will see from this example that we haven't got what we expected. The red border is in fact a red line running the full width of the browser across the top of our menu.
This tells us that the <ul> has a width of 100%, a height of zero and that our links overflow vertically.
Small wonder that we were unable to center the menu using margin:0 auto; as the left and right margins are zero and using text-align:center; fails because the menu is 100% of the width and as such is already 'centered.'
In order to position the list as desired, we need to change how the <ul> tag is sized. We need to get it to shrink horizontally to the actual width of the list items and expand vertically to the height of the list items and act like a wrapper.
Unfortunately we do not know the width or height of our list so we cannot specify directly the required size. But there is an answer...CHANGE THE STYLING METHOD.
For my alternative method I will use several little-used styles that all of the modern browsers understand. All are in the CSS 2.1 Specification W3C Working Draft 13 June 2005, but one (display:inline-block) will give a w3c validator error as it does not currently support CSS 2.1.
Here's the revised style one tag at a time...
.menu {
display:table;
padding:0;
margin:0;
font-family: arial, helvetica, sans-serif;
white-space:nowrap;
list-style-type:none;
border:1px solid #f00;
}
This is identical to the 'normal' method except that we have added display:table;
I have kept the red border, temporarily, so that you can see the effect of the display:table; on the list. In all browsers except Internet Explorer the red border is shrunk to just enclose the list. In internet Explorer, which does not understand display:table; the border is still 100% wide.
To bring Internet Explorer into line we need to use the following style targetted at IE using the * html hack.
* html .menu {
display:inline-block; /* for IE only */
width:1px; /* IE will expand 1px width to fit menu width */
padding:0 2px; /* fix bug in IE to get border spacing correct */
}
Internet Explorer will now look the same as all other browsers with the outer red border a snug fit on the list.
.menu li {
display:table-cell; /* ignored by IE */
}
All browsers except Internet Explorer will now have the list horizontal with the red border still just enclosing the list. Internet Explorer doesn't understand display:table-cell; so will need alternative styling to bring into line.
* html .menu li {
display:inline; /* for IE only */
}
Internet Explorer now has a horizontal menu with the red border shrunk to fit.
| home / programming / css_lists /1 | [previous][next] |
| ||||||||||||||||||||
Created: March 27, 2003
Revised: August 26, 2005
URL: http://webreference.com/programming/css_lists/1
