[SOLVED] Cross browser issues

[stublackett]

Hi,

 

My site : http://www.fpwebdesign.com/fusionsnow/

 

The top buttons work fine in IE as they sit quite nicely within the relevant menu, But loading it in FireFox / Google Chrome etc the buttons site way off the menu

 

How can I make sure that they dont in FireFox and Chrome?

 

My CSS / HTML is as follows

 

HTML...

<div id="top-menu">
    	<ul>
        	<li><a href="#" class="opacityit"><img src="images/home.jpg" alt="Home" border="0" /></a></li>
            <li><a href="#" class="opacityit"><img src="images/sass-fee_btn.jpg" alt="Saas Fee" border="0" /></a></li>
            <li><a href="#" class="opacityit"><img src="images/lessons.jpg" alt="Lessons" border="0" /></a></li>
            <li><a href="#" class="opacityit"><img src="images/bookings.jpg" alt="Bookings" border="0" /></a></li>
            <li><a href="#" class="opacityit"><img src="images/contact.jpg" alt="Contact" border="0" /></a></li>
        </ul>
     </div>

 

CSS

#top-menu {
position: absolute;
width: 900px;
height : 42px;
background-image:url(images/menu-bg.jpg);
top: 199px;
left: 33px;
}

#top-menu ul { list-style: none; }
#top-menu li { display: inline; padding-right:25px; }

 

I'm assuming its something to do with the UL Styling?

[JasonLewis]

I'd say it's a margin issue. Give #top-menu ul a margin of 0.

 

#top-menu ul { list-style: none; margin:0; }

[stublackett]

Thats spot on, Cheers ProjectFear

 

Had to play about with the text-align aswell, But it works fine and dandy now

 

Thanks