One of the links it's not clickable

link is not clickable

[banaani]

Hi, i'm having troubles with my image gallery. Everything works fine untill i noticed that the first picture in the gallery it's not showing as a link. It can't be clicked.

When i change the #image_box_image_holder float left to right the problem goes to right side of the gallery images. I did try to work it out with z-position but doesent work with that eather.. Or i just didnt know the right value to z-position?

Please help me with this.
Thanks, banana

---------------*HERE IS THE HTML*-------------------

<!-- GALLERY //-->
<div id="image_box">

<!-- ROW 1 //-->
<div id="image_box_image_holder"> <div id="image_box_image"> <img src="images/referenssit/thumbnail_pic1.jpg" border="0"/>
<a href="images/referenssit/image-1.jpg" rel="lightbox[sivu1]" title="Asiakas:</br> Kuvaaja: " /> </div> </div>


<div id="image_box_image_holder"> <div id="image_box_image"> <img src="images/referenssit/thumbnail_pic1.jpg" border="0"/>
<a href="images/referenssit/image-1.jpg" rel="lightbox[sivu1]" title="Asiakas:</br> Kuvaaja: " /> </div> </div>


<div id="image_box_image_holder"> <div id="image_box_image"> <img src="images/referenssit/thumbnail_pic1.jpg" border="0"/>
<a href="images/referenssit/image-1.jpg" rel="lightbox[sivu1]" title="Asiakas:</br> Kuvaaja: " /> </div> </div>

<div id="image_box_image_holder"> <div id="image_box_image"> <img src="images/referenssit/thumbnail_pic1.jpg" border="0"/>
<a href="images/referenssit/image-1.jpg" rel="lightbox[sivu1]" title="Asiakas:</br> Kuvaaja: " /> </div> </div>


<!-- ROW 2 //-->
<div id="image_box_image_holder"> <div id="image_box_image"> <img src="images/referenssit/thumbnail_pic1.jpg" border="0"/>
<a href="images/referenssit/image-1.jpg" rel="lightbox[sivu1]" title="Asiakas:</br> Kuvaaja: " /> </div> </div>

<div id="image_box_image_holder"> <div id="image_box_image"><img src="images/referenssit/thumbnail_pic1.jpg" border="0"/>
<a href="images/referenssit/image-1.jpg" rel="lightbox[sivu1]" title="Asiakas:</br> Kuvaaja: " /> </div> </div>


<div id="image_box_image_holder"> <div id="image_box_image"> <img src="images/referenssit/thumbnail_pic1.jpg" border="0"/>
<a href="images/referenssit/image-1.jpg" rel="lightbox[sivu1]" title="Asiakas:</br> Kuvaaja: " /> </div> </div>

<div id="image_box_image_holder"> <div id="image_box_image"> <img src="images/referenssit/thumbnail_pic1.jpg" border="0"/>
<a href="images/referenssit/image-1.jpg" rel="lightbox[sivu1]" title="Asiakas:</br> Kuvaaja: " /> </div> </div>


<!-- ROW3 //-->
<div id="image_box_image_holder"> <div id="image_box_image"> <img src="images/referenssit/thumbnail_pic1.jpg" border="0"/>
<a href="images/referenssit/image-1.jpg" rel="lightbox[sivu1]" title="Asiakas:</br> Kuvaaja: " /> </div> </div>

<div id="image_box_image_holder"> <div id="image_box_image"> <img src="images/referenssit/thumbnail_pic1.jpg" border="0"/>
<a href="images/referenssit/image-1.jpg" rel="lightbox[sivu1]" title="Asiakas:</br> Kuvaaja: " /> </div> </div>

<div id="image_box_image_holder"> <div id="image_box_image"> <img src="images/referenssit/thumbnail_pic1.jpg" border="0"/>
<a href="images/referenssit/image-1.jpg" rel="lightbox[sivu1]" title="Asiakas:</br> Kuvaaja: " /> </div> </div>

<div id="image_box_image_holder"> <div id="image_box_image"> <img src="images/referenssit/thumbnail_pic1.jpg" border="0"/>
<a href="images/referenssit/image-1.jpg" rel="lightbox[sivu1]" title="Asiakas:</br> Kuvaaja: " /> </div> </div>
</div>
----------------------*CSS*-----------------------

#image_box{
width: 800px;
display: block;
position: absolute;
left: 138px;
top: 203px;
visibility: visible;
}
#image_box_image_holder {
padding-left: 15px;
padding-bottom: 15px;
float: left;
border: none;
}
#image_box_image{
border: 1px black solid;
width: 183px;
height: 113px;
}

[choster]

You have a couple of problematic items. For one, </br> is not valid in any version of HTML. Presumably you mean <br />. However, you cannot place the < or > characters inside an attribute (in this case, title) because the browser will try to interpret it as a new tag. You cannot directly format the highlighted "tool tip" that browsers usually render for the title attribute. If you want "Asiakas" to appear on a separate line from Kuvaaja you must simulate the highlight using scripting.

Second, I'm not sure that compact syntax is permitted to close the anchor element, i.e. browsers may render <a /> unpredictably as opposed to <a></a>. I don't see why you wouldn't make the main image a direct link, e.g.

<div id="image_box_image_holder"> <div id="image_box_image">
<a href="images/referenssit/image-1.jpg" rel="lightbox[sivu1]" title="Asiakas: Kuvaaja: "><img src="images/referenssit/thumbnail_pic1.jpg" border="0" alt="" /></a> </div> </div>

P.S. Always use alt attributes to provide substitute text for users who might have images turned off or who are using alternative browsers.

[banaani]

Hi, that taught me something new. Thanks a lot!

It really wasn't so big mess i just need more accuracy on working. :)