Float seems to be stopping Links working

[canty]

Hey guys,

I'm designing a portfolio website for myself and am having trouble with a float tag.

I'm using images to act as links to a colorbox popup, they are lined up in rows of three using a float: left tag. But for some reason when I use the float tag it stops the link from working. When I take it away the images drop one by one under each other but the links work. any ideas?

Html:

<div id="content" >
<ul class="column" >
<li >
<div class="block" >
<a class='example6' href="http://player.vimeo.com/video/26439888" title="Taragana Pyjarama - Ocean">
<img src="http://b.vimeocdn.com/ts/174/650/174650223_200.jpg" alt=""></a>
</div>
</li>


CSS:

ul.column {
list-style-type:none;
padding-right:0px;
padding-left:0px;
padding-bottom:0px;
margin: auto;

}

ul.column li {
float:left;


}

Apologies for being a bit slow at all this in advance :P

[penders]

The code snippet you have posted works OK.

If a link has stopped working like this (for whatever reason) then it is likely that another element is covering it. If they are positioned correctly then you need to identify the other element that is obstructing the user from clicking through. Firebug in Firefox or the developer tools in IE can help with this.

Or simply give every element a temporary border to have a check...

* { 
border:1px solid #f00; 
}

[canty]

Thank you so much! Found the problem straight away after reading this.

[alt131]

Great to hear you have a solution Canty - and welcome to WebmasterWorld :)