ansaurus

Question

Answer 1

A:

Remove the span and link [a] styles if the image's size is already 100x100px.

<a href="http://www.mylink.com"&gt;
      <img src="img.jpg" alt="My image" style="width:100px;height:100px;"/>
</a>

Eddy 2009-04-30 08:12:10

Answer 2

+1 A:

Remove the span tag, I don't think you need it

<div style="width: 200px; height: 200px;">
    <a href="http://www.mylink.com" style="display: block; width: 100px; height: 100px;">
        <img src="img.jpg" alt="My image"/>
    </a>
</div>

If you have control over the markup then extract the inline styles and use

<div id="link">
    <a href="http://www.mylink.com"&gt;
        <img src="img.jpg" alt="My image"/>
    </a>
</div>

In the head of the document add a reference to an external stylesheet

<head>
    <link rel="stylesheet" type"text/css" href="/Css/Style.css"/>
</head>

Create style.css and add

div#link
{
    width: 200px;
    height: 200px;
}

div#link a
{
    display: block;
    width: 100px;
    height: 100px;
}

If you are using this style of link in multiple places remove the id on the div and replace with

<div class="link">
    ...
</div>

And change the selector in the css from # to .

div.link
...

If you are having problems only in IE6 you can also use conditional comments to include a stylesheet that fixes IE6 specific problems

<head>
<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="/Css/IE6.css"/>
<![endif]-->
</head>

Nick Allen - Tungle139 2009-04-30 08:14:32

Answer 3

A:

Thanks for your answers ! I do need the span tag, I should have explained a little more what I was trying to do, here it is : I need a box clickable. Inside of it I need : - another box with a fixed size which will contain a dynamic image (random ratio) - some text

Here's an image of it :

http://img101.imageshack.us/my.php?image=ie6linkpb.gif

Daniel 2009-04-30 08:34:13

you should edit your question instead =)

Svish 2009-04-30 10:28:13

Answer 4

A:

Hi Daniel

The easiest way to make that area clickable is to add position: relative to your link style; to preserve the cursor style under IE6, you can add cursor: hand to your span element.

a{ position: relative; display: block; width: 200px; height: 200px; }
span{ display: block; width: 100px; height: 100px; cursor: hand }

As other suggested, it is better to separate the IE6 specific styling with a conditional comment block.

Hope it helps and good luck ;)

yaanno 2009-04-30 08:55:54

thanks for your answer, I have already tried the position relative on the link and on all elements, I also have tried playing with z-index but nothing seems to work :/Here is a live link where you can check the problem :http://www.daniel-rico.com/demos/ieThx everyone !

Daniel 2009-04-30 09:39:34

Answer 5

A:

Oddly enough, removing the width and height properties from the span allows you to click on the image.

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
   <span style="display:block;">
      <img src="img.jpg" alt="My image" />
   </span>
</a>

Of course this completely changes the layout but it might help solve the IE bug.

An alternate method would be to use a div with a background-image instead of an img element:

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
   <span style="display:block;width:100px;height:100px;">
      <div style="background-image:url(img.jpg);width:100px;height:100px;" title="My Image"><div>
   </span>
</a>

Edit:

The background-image solution doesn't work for random ratio image you mentioned in your comment. If you just want to achieve the layout in the mockup:

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;padding-left:10px;">
      <img src="img.jpg" alt="My image" />
      <span style="padding-left:10px;">some text</span>
</a>

brianpeiris 2009-04-30 09:53:34

Answer 6

A:

Ok I wasn't able to solve this with css only, I used javscript to force the area to be clickable. Disapointing, but well, it works...

Thanks everyone for your help ! I appreciate :)

Daniel 2009-04-30 11:13:15

Answer 7

+2 A:

i just tried it on:

<span style="display:block;width:100px;height:100px;">   
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
      <img src="img.jpg" alt="Click your image now" />   
</a>
</span>

DaDa 2009-04-30 17:18:01

Answer 8

A:

Try to apply to span css property "zoom:0;". It works in my case.

Ostroffsky 2009-11-09 15:37:15

Answer 9

A:

I was facing almost an identical problem building a nav in a content-managed site, but compounded by the fact that some of the nav items needed to open in new windows - meaning the solution to use javascript became problematic.

Eventually, I ended up losing the <img... /> tag and replacing with a <span... /> and setting the background image inside the span (I could have used div's but that's bad form according to the W3C).

So referring back to your original example, I'd go with:

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
  <span style="display:block;width:100px;height:100px;">
    <span style="background-image=url(/img.jpg); width: 50px; height: 50px; display: block;">
      <span class="Hidden">My image</span>
    </span>
  </span>
</a>

Mick Byrne 2010-10-11 04:45:58

ansaurus

tags:

views:

answers:

Link problem on IE6 and IE7

related questions