I can't for the life of my figure out what's wrong. It works fine in IE7 but not in Firefox or Chrome. www.host2x.com for reference.
Here's the template:
Here's the CSS:
Here's the template:
<div class="menu">
<ul>
<li><img src="http://www.host2x.com/images/bullet.gif"><a href="http://www.host2x.com">Home</a></li>
<li><img src="http://www.host2x.com/images/bullet.gif"><a href="http://www.host2x.com/about.php">About Us</a></li>
<li><img src="http://www.host2x.com/images/bullet.gif"><img src="http://www.host2x.com/images/free.png"><a href="http://www.host2x.com/hosting.php">Web Hosting</a> </li>
<li><img src="http://www.host2x.com/images/bullet.gif"><img src="http://www.host2x.com/images/free.png"><a href="http://www.img2x.com/">Image Hosting</a> </li>
<li><img src="http://www.host2x.com/images/bullet.gif"><img src="http://www.host2x.com/images/free.png"><a href="http://www.talk2x.com">Forum Hosting</a> </li>
<li><img src="http://www.host2x.com/images/bullet.gif"><a href="http://www.host2x.com/forums/">Forums</a></li>
<li><img src="http://www.host2x.com/images/bullet.gif"><a href="http://www.host2x.com/contact.php">Support</a></li>
</ul>
</div>
Here's the CSS:
.menu ul {
background: #000000 url(http://www.host2x.com/images/hmenu_fill.gif);
color: #000000;
width: 100%;
height: 26px;
text-align: center;
font-weight: bold;
}
.menu ul {
list-style: none;
margin: 0;
}
.menu li {
display: inline;
}
.menu ul a:link {
color: #bbbbbb;
font-size: 13px;
}
.menu ul a:visited {
color: #cccccc;
font-family: arial;
font-size: 13px;
text-decoration: none;
}
.menu ul a:hover, .menu ul a:active {
color: #ffffff;
font-size: 13px;
}