>I have tried several times to style a horizontal list and this time I am
>keeping at it till it works.
> I am trying to center the menu inside the black bar. I have given the ul a
> width and made the margins auto with text align centered.
I took out some things that didn't seem needed, changed the li to display:
inline, and gave a line-height of 50px to the #menu anchors. I made a bunch
of little changes, so I'm just including the CSS below. It seems to work in
Firefox and IE6, 7, & 8.
html, body, ul { margin: 0px; padding: 0px }
body { color: black;
font-size: medium;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
background-image: url(graytile.gif);
margin: 0px auto;
text-align: center;
}
#container {
background-color: white;
text-align: left;
margin: 0px auto;
width: 800px;
height: 100%;
}
p {}
h1 { font-weight: bold; font-size: larger; font-family: Arial, Helvetica,
Geneva, Swiss, SunSans-Regular }
td {}
a:link { color: black }
a:hover { }
#header {
height: 150px;
}
#navigation { font-size: 75%; float: left; margin: 10px 0px 0px 5px;
padding: 0px; width: 250px }
#photos { float: right; width: 450px }
#content { float: left; width: 800px }
#footer { }
#menu {
background-color: black;
margin: 0px auto;
height: 50px;
}
#menu ul {
text-align: center;
list-style-type: none;
padding: 0px;
}
#menu li {
display: inline;
}
#menu a {
color: white;
font-variant: small-caps;
font-size: medium;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
text-decoration: none;
text-transform: uppercase;
padding: 0px 20px;
line-height: 50px;
}
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
