I've been stuck at this for a day or so now and i cant figure out why the image links "Location" and "contact" do not work in firefox but they do in internet explorer? im sure theres a simple answer to it.

could somebody help with this please?

the website is www.thefishplate.co.uk

 

Thanks

Hi Dan,

 

The problem is that your navigation items (Location, contact, menu) are all 100% width and positioned relative so the last one is sitting on top of the others.

 

You could either shrink the width of the navigation items or make them into a floated list, which is the tried and tested method for this type of navigation.

 

Like so:

 

#navigation {
margin: 0 auto;
overflow: hidden;
width: 763px; /*Combined width of all the navigation elements*/
}
#navigation li {
float: left;	
}
#navigation_location {
width: 183px;
}
#navigation_contact {
margin: 0 150px;
width: 150px;
}
#navigation_menu {
width: 130px;
}

 

<!--LINK-->
<ul id="navigation">
<li id="navigation_location">
	<a href="http://www.thefishplate.co.uk/location_page.html"><img src="locationlink.gif" border="0"></a>
</li>

<li id="navigation_contact">
	<a href="http://www.thefishplate.co.uk/contact_page.html"><img border="0" src="contactlink.gif"></a>
</li>

<li id="navigation_menu">
	<a href="http://www.thefishplate.co.uk"><img border="0" src="menulink.gif"></a>
</li>
</ul>

Hi Dan,

 

The problem is that your navigation items (Location, contact, menu) are all 100% width and positioned relative so the last one is sitting on top of the others.

 

You could either shrink the width of the navigation items or make them into a floated list, which is the tried and tested method for this type of navigation.

 

Like so:

 

 

Perfect answer, thanks very much.. i thought it would be a case of something obstructing something else.

thanks again!