width: auto - ie problem

April 4th, 2006, 11:42 am

Hi

I've adapted a menu from Listomatic - and I've inevitably run into problems with IE on a margin auto.

To fit the menu in the available space I've set individual menu boxes to the same width as the menu text by using the following:

ul#navlist li
{
display: block;
float: left;
width: auto;
padding: 0;
margin:0;
}

This is working fine in Firefox - but not in IE. You can see this here: http://www.veinremoval-cornwall.com/index_new.htm

I tried setting the width using an em - but this is not resulting in the menu width fitting into the available space.

Any ideas on a fix so the menu boxes also resize in IE?


Thanx

d

ps: the whole menu css:



#navcontainer
{
background: #009999;
margin: 5px 0 0 0 auto;
padding: 0 0 0 0;
font-family: georgia, serif;
text-transform: lowercase;
}

/* to stretch the container div to contain floated list */
#navcontainer:after
{
content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}

ul#navlist
{
list-style: none;
margin: 8px 10px 5px 15px;
width: 100%;
font-size:x-small;
}

ul#navlist li
{
display: block;
float: left;
width: auto;
padding: 0;
margin:0;
}

ul#navlist li a
{
display: block;
width: 100%;
padding: 5px;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #FFFFFF;
text-decoration: none;
background: #009999;
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a
{
background: #17B0B0;
color: #FFFFFF;

}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #009999;
background:#f0e7d7;
border-color: #aaab9c #fff #fff #ccc;
}

[grinch2171]

April 4th, 2006, 1:50 pm

I like the menus at list-o-matic but none of them are designed to be cross browser compatible.

Give this site a try. You may find one better and it is designed to be cross browser.

April 5th, 2006, 1:08 am

what hapens if you leave it out? width statements, both for li and a tag?