Hello all,
I'm having a problem with my website, www.gorobotics.net. You can see a
picture of what I'm talking about
here:
http://www.gorobotics.net/broken_website_image.jpg
Anyways, I have a series of "tabs" at hte top of my page. They are made
with a UL/LI element. The HTML code is as follows:
<ul id="mainlevel-nav"><li>
<a href="http://www.gorobotics.net/component/option,com_frontpage/Itemid,43/";
class="mainlevel-nav" >Home</a>
</li><li><a href="http://www.gorobotics.net/content/section/3/40/"; class="mainlevel-nav"
>Articles</a></li>
<li><a href="http://www.gorobotics.net/component/option,com_awesom/Itemid,41/";
class="mainlevel-nav" >Books</a></li>
<li><a href="http://www.gorobotics.net/content/blogcategory/1/44/"; class="mainlevel-nav"
>News</a></li
...
</ul>
As you can see in the picture, SOMETIMES (maybe 10% on my browser) the
list doesn't lay out in a straight row, but "bunches up."
The CSS code associated with it is as follows. I'm at a loss of what's
causing this.
Does anyone have any ideas?
Thanks.
-William
CSS code:
#mainlevel-nav {
margin: 0;
padding: 0;
border: 0;
}
#mainlevel-nav li {
padding-right: 5px;
padding-left: 5px;
list-style:none;
float: left;
margin: 0;
width: variable;
font-size: 10px;
line-height: 20px;
white-space: nowrap;
text-indent: 5px;
font-weight: bold;
background-image:
url(http://www.gorobotics.net/mambo/templates/gorobotics/images/tab.png);
color: #000000;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
#mainlevel-nav a {
display: block;
float: none;
text-decoration: none;
/*border: 2px #b51109 outset;*/
color: #000000;
}
#mainlevel-nav a:hover {
color: #FD8035;
background-image:
url(http://www.gorobotics.net/mambo/templates/gorobotics/images/tab.png);
}
--
www.GoRobotics.net
Robot projects. Robot news
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
