• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 954
  • Last Modified:

hyperlink image in ie8

please take a second to look at this site http://www.holtseaanglingclub.com/fishing-gallery/

with ie7, ff, opera, chrome all is ok...

but with ie8 the images act odd "underline link" when rolled over...

...any ideas about my MS have done this and once again a work around for their dodgey browsers.

many thanks
Dan
0
Dan-LL
Asked:
Dan-LL
  • 8
  • 6
  • 4
1 Solution
 
Dan-LLAuthor Commented:
need help. doubled the points....
0
 
jessc7Commented:
The color is coming from the CSS ruleset below. IE8 is changing the background color based on the rule, and for some reason changing the spacing around the image at the same time. If I take the background rule out, the issue is no longer present.

You could change your css to only apply the background color on specific links, rather than all links. Or do the inverse and prevent the background color on links around images.
a:hover, a:focus{
color:#fff;
background:#1e4b95; // <----
text-decoration:none;
}

Open in new window

0
 
jessc7Commented:
Another trick to try is the CSS rule below. I don't know if this will work across your layout, but is one way to address the extra spacing you are seeing around the image.

This idea came from:
http://danmarvelo.us/older/2007/5/18/extra-space-from-newline-in/
a img{
vertical-align: bottom;
}

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
David S.Commented:
Nice catch, jessc7.  It didn't seem to be a text-decoration or border issue, but it didn't occur to me that the space reserved for text descenders in combination with a background color would cause that.

While testing it I found that it only happens when a Transitional doctype is being used. It seems this bug was introduced when trying to copy Firefox's "almost standards mode" (which is triggered by using a transitional doctype).
0
 
jessc7Commented:
Great! Glad the issue was resolved, and good to know about the doctype switch.
0
 
jessc7Commented:
Is there anything else you need help with on this issue?
0
 
Dan-LLAuthor Commented:
sorry for the delay, got a new comp desk and took all day to wire my pc back up...

thanks for the 2 solutions Jessc7 and also thanks for the insight to what was happening Kravimir, I am betting a few people we be reading this question soon as it appears to be a right royal pain in the side....

Many Thanks
0
 
Dan-LLAuthor Commented:
thanks for the help, ms gives us more to worry about, lol...
0
 
Dan-LLAuthor Commented:
I do actually have a clear way to solve this now, the alignment was a pain to work with and the lack of background colour would have meant having to write a whole second set of a.links for the site to work.

but if the put the following



<a href="http://www.ihatemicrosoft.com" style="font-size: 0px">
<img src="http://www.dumbimages/bill-gates-kicked.jpg"  style="width:100px; height: 140px" border="0" alt="Bill Gates Is Hard Work" />
</a>

this inline font size in the a href actual seems to work on all browsers.... this means you can keep your hover background colour for other links but also have you img's clean... and it works if transparent background images, the solutions from the others do not.
0
 
jessc7Commented:
Nice! I was initially trying something with line-height, but that wasn't having the right effect so I moved on to the background. Font size would be another way to go at it.
0
 
David S.Commented:
Dan, did setting vertical-align:bottom on the <img> not work in some browsers?

While it might not matter a whole lot in this case, it seems to me that setting the font-size to 0 might cause the alt text to not be displayed if the image wasn't displayed for any reason.
0
 
Dan-LLAuthor Commented:
funny enough the 0px font is fine with missing images and alt text in ie8 but no other browser worked, that is a bit of a shame.

the problems with this vertical-align was that on really small images, like buttons you could still get the hover effect because the image is smaller than the css html font size, plus if the image had a transparent background once again you would see the hover effect.

the problem with the turning background off is that I want it on other text links, I know that i could add an extra set of "a"'s instructions in the css but this is a right pain in the bum.

I guess a more robust fix would be another IE hack with the "a"'s set in the head of the page for [IE >7] or maybe MS will fix the bug, rofl.
0
 
Dan-LLAuthor Commented:
ok I have ran out of ideas now,

I set up a class for the a:hover to stop the background color off but unless all images are on the same color background it will not work as you can't pick transparent as a color of the background and just omitting the background color makes it revert back the to original css rules.

the img align thing stops the page bouncing but as for turning off the hover effect, I'm at a loss using html...

problem remains,

if img height is less that html font size or the img has a transparent background the hover effect remains...

Aghhhhhhh! bill gates, I'm going to kick your cat for this, please make a browser that works, ps works fine in ie8's silly compatiable mode...
0
 
David S.Commented:
Wow. You actually replied.  So many people seem to ignore me when I add comments like that.

> you can't pick transparent as a color of the background

Why not?
0
 
Dan-LLAuthor Commented:
if you can, please tell me the # code, i don't know it....
0
 
jessc7Commented:
background-color:transparent;
0
 
David S.Commented:
Yes, you can't specify transparency in rgb. Therefore that keyword is provided for the purpose.
0
 
Dan-LLAuthor Commented:
ok, well armed with that info I have the following that solves all color/hover/missing image and image bounce/hover color issues, shame it is a little messy.

in your css make this class.

a.imagelink
 {
background-color:transparent;
color: #009;
font-size: 8px;
}

in the a href  tag include this;
class="imagelink"

As long as your image is not smaller that 11px it will work, should you have a click/link image smaller than that (why would you?) then you need to decress the font size in the class.

not great but works on all browser I have access to.

PS I have not tried to validate this yet, but can't see any issues.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 8
  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now