Webmaster Forum / HTML, CSS, Scripts / CSS / September 2005

Hello everyone,

I've got a problem here that's simply getting on my nerves. I have a
horizontal menu (styled as per below with floated li's) but Firefox
seems to be struggling with it.

My theory is that the XHTML code that's generating the page is causing
this problem to occur (the CSS validates and is fine as far as I can
tell) but it's done with the Mambo CMS so it would not be feasible to
re-write all the code.

The problem is that sometimes the floats choke in Firefox. They simply
don't work unless you refresh the page or browse to another page. If you
browse to the below web site, you'll see the menu at the top-right hand
corner. If you browse between those pages, you'll see what I mean:

www.webmarkdesigns.com.au/~crossroa/

The CSS that's styling that menu is simply:

#top_wrapper{
  position:absolute;top:40px;right:10px;
  background:#600 url(../images/ul_bg.gif) repeat-x top}

#top_wrapper ul{list-style:none;padding:0;margin:0}

#top_wrapper li{
  float:left;width:90px;
  background:url(../images/li_bg.gif) no-repeat top right}

#top_wrapper a:link,#top_wrapper a:visited{
  display:block;text-align:center;padding:5px 22px 0 14px;
  color:#fff;background:url(../images/link_bg.gif) no-repeat top left;
  font-family:Arial,Helvetica,sans-serif;font-size:90%;
  text-decoration:none}

Any ideas?

Thanks in advance,
Nick.