I'm having a hard time with IE6 lately on a particular problem, here's the bit of html 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 won't work by clicking directly on the image on IE6 (but will do work anywhere else on the link).
Here is a link:
http://www.daniel-rico.com/demos/ie/
Someone has an idea?
Thanks!
edit: This does not work on IE7 either :/
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
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>
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">
<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>
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>
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>
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 ;)
Try to apply to span css property "zoom:0;". It works in my case.
I wasn't able to solve this with CSS only, I used Javascript to force the area to be clickable.
Disappointing, but well, it works...
Thanks everyone for your help ! I appreciate it :)
Related
How can I remove or just don't display the border links in every anchor with image? By the way, browser settings is in compatibility mode. Answers from other question doesn't suffice to solve my problem. I guess because it only applies with lower version of IE.
EDIT:
I'm currently creating a Custom share buttons where my client requires me.
<div>
<a onClick="window.open('https://twitter.com/intent/tweet?original_referer=#shareLink#&text=#shareTitle#&tw_p=tweetbutton&url=#shareLink#','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/Twitter_Tweet.png" />
</a>
</div>
<div>
<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=#shareTitle#&p[summary]=#shareDesc#&p[url]=#shareLink#&p[images][0]=images/Telos.jpg','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/FaceBook_Share.png">
</a>
</div>
<div>
<a onClick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=#shareLink#&title=#shareTitle#&summary=#shareDesc#','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/LinkedIn_Share.png">
</a>
</div>
<div>
<a onClick="window.open('https://plus.google.com/share?url=#shareLink#','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/Google_PlusOne.png">
</a>
</div>
CSS:
a {
outline : none;
text-decoration: none;
}
a img {
outline : none;
}
img {
border : 0;
border-style: none;
}
div {
float: left;
padding-right: 10px;
}
Here's what it looks like with IE10:
how about this, try to add something like this
<img src="blah" style="border-style:none;">
I usually use this as part of my normal defaulting set up in my CSS:
img {border: none;}
This doesn't effect the other browsers negatively and is easy to over-ride at a later point if you place this near the top of you general css file e.g
img {border: none;}
img.some-class {border: 1px double blue}
Where the increased specificity will add an ugly border to your image just like IE loves doing.
I was having the exact same issue with IE10. I've just set up a CSS rule for the a tag and set the text colour to white. This removes the blue line from around an anchor image.
I have got this div..:
<div id="logoCover" style="position: absolute;width: 341px;height: 100px;z-index: 9999;top: 0px;left: 0px;"></div>
The problem with the div, is that, it would only show in ie8, if i give it a background color.
Otherwise the div wont exist, which means the user cant click on it.. why is that behavior common in ie8 and how do I prevent it
UPDATE:
This is the element on which I try to place my div:
#logo {
float: left;
height: 93px;
}
logo is an image
FULL HTML:
<div id="logo" style="position:relaive;">
<a href="/" style="position: absolute;padding:60px;padding-right: 300px;z-index: 9999;top:-20px;left: 0px;;display:block;" ></a>
<img src="images/BestCam_logo.png" width="1009px" />
</div>
<div> tags are not supported as content for <a> tags inside of standard HTML. Some browsers try to acommodate for this, but you really can't depend on every browser implementation to handle it the same way.
However, you can make an <a> tag a block element (it is an inline element by default) and move the style from the <div> tag to the <a> tag. This would also eliminate the need for the inner <div> tag in your example.
try adding display:block or insert a ' '
also, check that your relative div is also rendering right.
hope that helps.
<div id="logo" style="position:relaive;">
<a href="/" style="position: absolute;padding:60px;padding-right: 300px;z-index: 9999;top:-20px;left: 0px;;display:block;background-image: url('images/emptyImage.png')" ></a>
<img src="images/BestCam_logo.png" width="1009px" />
</div>
Solved the problem, What I had to do is to use a transparent image, as a background.
This is the html asp.net generated (with some client-identifying details removed)
In Windows XP / IE 7 clicking on the image does nothing. Click on the text executes the hyperlink. Right-clicking anywhere and then selecting open in new window or open also works.
In other browsers, it all works as expected.
Is there anything simple anyone can see that I could do to this to get it to work correctly in IE7?
<div id="hdrXXX">
<a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
<div style="float:left;display: block;">
<img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
</div>
<div style="float:left; display: block; padding:15px 0 0 0;">
<span id="XXX">Some text right here</span>
</div>
</a>
</div>
You can only put block-level elements inside anchor elements with HTML5 and browser support is still a bit iffy on it. IE7 obviously does not support this.
You don't need to use division to do this:
<div id="hdrXXX">
<a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
<img id="ctl00_XXX" src="Images/XXX.png" style="border: 0; float: left; margin-right: 15px" />
<span id="XXX">Some text right here</span>
</a>
</div>
This should work to the same effect...
Try removing the divs, as the img tag and span are naturally display-inline. Add display block, float left if you need margins right to the tags themselves as supposed to adding divs. Also, to the anchor tag, add overflow:hidden (if you use floats), so that it takes up the total space of the two child elements.
Because of your floats, the anchor collapses. Also, you can't put block level elements <div/> inside inline elements <a/>.
Keeping with the non-W3C code you've got there, you'd need to clear your floats with this code right before the closing </a>
<div style="clear: both"></div>
You'll want to probably create a class called .clear and move the styles to that. Here's an example from my site:
.clear-fix {
clear: both !important;
display: block !important;
font-size: 0 !important;
line-height: 0 !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
A better way to do your code which is W3C compliant is the following:
<div id="hdrXXX">
<a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
<span style="float:left;display: block;">
<img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
</span>
<span style="float:left; display: block; padding:15px 0 0 0;">
<span id="XXX">Some text right here</span>
</span>
<span class="clear-fix"></span>
</a>
</div>
Simple code:
<a href="#">
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" />
<img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
</div>
</a>
Two images have margin and padding of 0 but there's still a gap between them.
How to avoid this behavior?
And YES that's not a mistake, the whole thing has to be in A tag.
Example:
http://jsfiddle.net/fqrfU/
I believe it's the line-height that's causing the problem. Check it out.
On a different note, I know you said it was intended to be that way but it's actually invalid(?) HTML to have the div tag inside of the anchor. Try using spans instead.
The two images are displayed inline. This means the baseline of the image is aligned with the baseline of the text. Below text there usually is some more space to account for letters like pjgq that go below the baseline.
Just making the images display: block; resolves this in your scenario.
This page describes your situation quite clearly: http://devedge-temp.mozilla.org/viewsource/2002/img-table/
add in both display:block;
Demo: http://jsfiddle.net/fqrfU/22/
You can float and clear them:
img {
clear: both;
float: left;
}
http://jsfiddle.net/lukemartin/fqrfU/11/
<a href="#">
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" /><img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
</div>
</a>
Are you having a problem in IE?
Try putting both images tags on the same line in the HTML, w/o any spaces in between...
Simply your css by doing,
.image, .shadow {
margin: 0;
padding: 0;
display:block;
}
http://jsfiddle.net/fqrfU/43/
What Bogdan said, or:
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" /><img
src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
</div>
</a>
See, the whitespace between /> and the second <img is actually rendered, which gives the space between the two pics.
-- pete
This worked for me just now:
img
{
display: block;
}
Hi I have the following code to have few links on top of img. It works well in FF but not in IE. It seems IE is not clickable if you put link on top of img
<div style="z-index:-6755;"><img alt="October Offer" src="images/offers/october-offer.jpg" /></div>
<a href="#" onclick="window.parent.SqueezeBox.close();">
<div style="display:block; width: 185px; height: 32px; position: relative; bottom: 50px; left: 260px;border:1px solid blue; "> </div>
</a>
are you just trying to make the image clickable?
you can't have <href> that's not a correct html tag.
either place <img> inside <a> like so: <img />
another way is to set a div with a background image of your image and then a link inside there, make the link display : block and make it the entire width and height of the div and the whole thing will be clickable.
You can add an on-click function to img-tag.
Example:
<img src="images/logo.png" alt="logo" onclick="home()">
and then redirect it to a page.
function home(){ location.replace("/index.html") }