Firefox href not covering whole image

Links & Images in Firefox

[jcamorgan]

Hi,

I've created a simple menu using thumbnail images inside an unordered list. When I roll over the images, the link is only picked up in the bottom third of the image.

The menu looks like this:

<div id="portfoliomenu">
 <ul class="portfolio">
 <li><a href="portfolio1.jsp"><img src="images/portfolio/thumbs/vbc.gif" alt="Vienna Babies Club" border="0" width="72" height="48"/></a></li>
 <li><a href="portfolio2.jsp"><img src="images/portfolio/thumbs/bewusstbewegt.gif" alt="Bewusst Bewegt" border="0"/></a></li>
 <li><a href="portfolio3.jsp"><img src="images/portfolio/thumbs/scarboroughcollege.gif" alt="Scarborough College" border="0"/></a></li>
 <li><a href="portfolio4.jsp"><img src="images/portfolio/thumbs/goldhill.gif" alt="Goldhill Education" border="0"/></a></li>
 <li><a href="portfolio5.jsp"><img src="images/portfolio/thumbs/manxmate.gif" alt="Manx mate" border="0"/></a></li>
 <li><a href="portfolio6.jsp"><img src="images/portfolio/thumbs/bebetter.gif" alt="Be Better" border="0"/></a></li>
 </ul> 
</div>

... and the css like this:

#portfoliomenu {
position:absolute;
width:500px;
height:20px;
top: 440px;
left: 10px;
font-size:80%; 
}

ul.portfolio{
margin:0px;
padding:0px;
 float:right;
list-style-type:none;
text-align:left;;
}

ul.portfolio li{
display:block;
margin:0px;
float:left;
 border:1px solid #999;
}

I tried adding this to no effect:

#portfoliomenu a:link {
 height: 48px;
}

Any ideas? :)
Morgs

[edited by: encyclo at 2:55 pm (utc) on Sep. 20, 2007]

[penders]

Hi, I did wonder at first whether it was because the height of your container (#portfoliomenu) was set at only 20px as your thumbnails are a lot bigger (48px). And you have an extra ';' on this line:

text-align:left;;

Although you shouldn't post links (see Forum Charter [webmasterworld.com]), it seems your problem is not related to the code you have posted but to another container on your page (#p6_contenttext) overlapping your #portfoliomenu, resulting in part of #portfoliomenu being unclickable. Set a border on #p6_contenttext to see.

Try reducing the height of #p6_contenttext from 480px to 435px.

[jcamorgan]

Hi Penders,

Brilliant! That was it.

Many thanks!
morgs