Sent by Roger Roelofs on 5 July 2006 16:04
Ian,
On Jul 4, 2006, at 10:39 AM, Ian - Mediamint wrote:
> www.cmsserver.info
> www.cmsserver.info/css/css.css
>
> The first is the buttons...if i take the doctype out they display as i
> want them to (in IE at least - they won't display in firefox for some
> reason)
The #nav li are set to display: inline; which means they can't take a
width or height. If you need to specify a width (as I suspect you do
given the background you want to use) you will need to float them
instead. Something like the following should get you close. However,
this kind of interface has been done to death. Just go to Listomatic
<http://css.maxdesign.com.au/listamatic/> and find the one that
looks/behaves most like you want and use it as a starting point. The
biggest problem with the current design is that if a user has her/his
min font size set higher than you expect, the text will flow out of the
tab and be unreadable. That's why most tab style menus only curve one
corner and make the image oversize.
#nav {
padding: 0 0 0 3px;
margin: 0;
margin-bottom: -1px;
float: left;
}
#nav li {
padding: 0;
margin: 0 3px;
float: left;
list-style-type: none;
}
#nav li a {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
color: #ffffff; font-size: 0.7em;
text-decoration: none;
padding: 5px 0;
margin: 0;
display: block;
width: 5em;
min-width: 100px;
background: url(../images/nav.gif) no-repeat center;
}
#nav a.active, #nav a:hover {
background: url(../images/nav_over.gif) no-repeat center;
}
hth
--
Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
~Allison Gappa Bottke
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
