#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2009
    Posts
    27
    Rep Power
    0

    Links not clickable in IE or Opera


    I have a page that displays a bunch of products for my site and when viewed in FireFox and Chrome everything is great. When viewed in IE or Opera however, the products are displayed correctly but are not clickable.

    I can't seem to figure out why IE and Opera don't see the anchor tag. I had set it to display as block and set height and width to 100% so that the entire square that the products are displayed is clickable (the product images are all different sizes). Since IE didn't see it I set some conditional stuff to simply add the link to the product images themselves and that does seem to work (although not how I'd like it to) but this solution doesn't really work since Opera doesn't work and doesn't recognize the IE conditional statements.

    Here's the code for the individual products, obviously it's being repeated a bunch of times when the page is actually viewed. Also, yes I used a table in there but I was having a bitch of a time getting the image to center both horzontally and vertically so I broke down and just used the table cell for it. If somebody feels up to helping me re-write it to center using just divs, I'm all for it.

    Code:
    <div class="product_cell">
    
    	<table width="187px" height="190px" style="position:absolute; top:0; left:0;"><tr>
    	<td height="100%" width="100%" align="center" valign="middle">
    
    	<!-- FOR NON-IE BROWSERS-->
    	<![if !IE]>
    	<div class="product_link">
    	<a href="proddisp.php?id=<?=$row['id']; ?>" style="display:block;width:100%;height:100%;"></a>
    	</div>
    	<![endif]>
    	<!-- END FOR NON-IE BROWSERS-->
    
    	<!-- FOR IE Part1--><!--[if IE]><a href="proddisp.php?id=<?=$row['id']; ?>"><![endif]-->           
    	<img src="http://www.skullcrow.com/images/products/<?=$row['id'].'_m.gif'; ?>" alt="<?=$row['name']; ?> - <?=$row['subname']; ?> - t-shirt" border="0" />
    	<!-- FOR IE Part2--><!--[if IE]></a><![endif]-->
    
    	</td></tr></table>
    
    	<img src="http://www.skullcrow.com/images/frame_bg/prodframe_left_<?=$row['bgcolor']; ?>.jpg" width="11px" height="190px" style="float:left; border:0;" />
    	<img src="http://www.skullcrow.com/images/frame_bg/prodframe_center_<?=$row['bgcolor']; ?>.jpg" width="162px" height="190px" style="float:left; border:0;" />
    	<img src="http://www.skullcrow.com/images/frame_bg/prodframe_right_<?=$row['bgcolor']; ?>.jpg" width="14px" height="190px" style="float:left; border:0;" />
    
    </div> <!-- END PRODUCT_CELL -->
    And from the stylesheet...
    Code:
    .product_cell {height:190px;width:187px;padding:0;margin:0;border:0;position:relative;overflow:hidden;}
    .product_link {position:absolute;top:0;left:0;width:100%;height:100%;z-index:500;}
    The page I'm working on is located here:
    http://www.skullcrow.com/index_imp.php

    Thanks for any help.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2009
    Posts
    27
    Rep Power
    0
    Ok, well I got it figured out.
    It helped a lot to correctly apply my cell background rather than use <img> tags, and I also removed the conditional stuff and came up with something a little cleaner.

    Here's the code now:
    Code:
    <div class="product_cell" style="background-image:url(http://www.skullcrow.com/images/frame_bg/prodframe_sml_<?=$row['bgcolor']; ?>.jpg);">
    
    	<table width="187px" height="190px"><tr>
    	<td height="100%" width="100%" align="center" valign="middle">
    
    	<div class="product_link">
        <a href="proddisp.php?id=<?=$row['id']; ?>" style="display:block;width:100%;height:100%;"></a>
        </div>
    
    	<a href="proddisp.php?id=<?=$row['id']; ?>">
        <img src="http://www.skullcrow.com/images/products/<?=$row['id'].'_m.gif'; ?>" alt="<?=$row['name']; ?> - <?=$row['subname']; ?> - t-shirt" border="0" />
    	</a>  
    
    	</td></tr></table>
    
    </div> <!-- END PRODUCT_CELL -->
    And stylesheet...
    Code:
    .product_cell {height:190px;width:187px;padding:0;margin:0;border:0;position:relative;overflow:hidden;background-repeat:no-repeat;}
    .product_link {position:absolute;top:0;left:0;width:100%;height:100%;z-index:500;}
    Only problem, which I can ignore for now, is having to use the <table> to center the image. Oh well...

IMN logo majestic logo threadwatch logo seochat tools logo