Hey everyone. This is my first post but won't be my last. I've posted this elsewhere but have very little luck finding a solution. It works fine in IE7 but not in Firefox or Chrome. host2x(.)com for reference.
Here's the template:
Code:
<div class="menu">
<ul>
<li><img src="/images/bullet.gif"><a href="">Home</a></li>
<li><img src="/images/bullet.gif"><a href="/about.php">About Us</a></li>
<li><img src="/images/bullet.gif"><img src="/images/free.png"><a href="/hosting.php">Web Hosting</a> </li>
<li><img src="/images/bullet.gif"><img src="/images/free.png"><a href="img2x(.)com/">Image Hosting</a> </li>
<li><img src="/images/bullet.gif"><img src="/images/free.png"><a href="talk2x(.)com">Forum Hosting</a> </li>
<li><img src="/images/bullet.gif"><a href="/forums/">Forums</a></li>
<li><img src="/images/bullet.gif"><a href="/contact.php">Support</a></li>
</ul>
</div>
Here's the CSS:
Code:
.menu ul {
background: #000000 url(/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;
}
Oh, and your admin is sitting next to me so make him proud with a quick solution.
