Geek Answers Handbook

Problem with links to IE6 and IE7

I have been having trouble with IE6 lately on some specific issue, here is the html bit I'm on:

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

Everything is fine with Firefox, etc., but the link will not work by clicking directly on the image in IE6 (but it will work elsewhere on the link).

Here is the link: http://www.daniel-rico.com/demos/ie/

Does anyone have an idea?

Thanks!

  • edit: This does not work in IE7: /

Thank you for your responses!
I need a span tag. I had to explain a little more what I was trying to do; here it is:
I need a clickable box. Inside this I need:

  • another box with a fixed size that will contain a dynamic image (random ratio)
  • some text
+4
source share
7 answers

I just tried:

 <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>
+2
source

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 layout, extract the inline styles and use

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

Add a link to an external stylesheet at the beginning of the document.

 <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 use this link style in several places, remove the id on the div and replace it with

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

And change the selector in c # css to.

 div.link ...

If you have problems only in IE6, you can also use conditional comments to include a style sheet that fixes specific IE6 problems.

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

Oddly enough, removing the width and height properties from the range 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 can help solve the problem with IE.

An alternative 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 does not work for the random relation image that you mentioned in your comment. If you just want to achieve layout in layout:

 <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>
+1
source

I ran into an almost identical problem creating navigation on a content-driven website, but was compounded by the fact that some of the navigation elements that needed to be opened in new windows meant that the decision to use javascript became problematic.

In the end, I lost the <img ... /> tag and replace with <span ... /> and set the background image within the range (I could use a div, but this bad shape according to W3C).

So, back to your original example, I would 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>
+1
source

The easiest way to make this area interactive is to add a position: relative to the style of your link; to preserve cursor style in IE6, you can add a 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 suggested, it’s better to separate the IE6 style with a conditional comment block.

Hope this helps and good luck;)

0
source

I was not able to solve this only with CSS, I used Javascript to make the area clickable. Disappointing, but good, it works ...

Thank you all for your help! I appreciate it:)

0
source

Try applying the span css property "zoom: 0;". This works in my case.

0
source

More articles:


All Articles