Solved

hyperlink image in ie8

Posted on 2009-05-13
18
944 Views
Last Modified: 2012-05-06
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
Comment
Question by:Dan-LL
  • 8
  • 6
  • 4
18 Comments
 
LVL 1

Author Comment

by:Dan-LL
ID: 24378963
need help. doubled the points....
0
 
LVL 16

Accepted Solution

by:
jessc7 earned 250 total points
ID: 24380410
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
 
LVL 16

Expert Comment

by:jessc7
ID: 24380433
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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 42

Expert Comment

by:David S.
ID: 24382182
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
 
LVL 16

Expert Comment

by:jessc7
ID: 24384557
Great! Glad the issue was resolved, and good to know about the doctype switch.
0
 
LVL 16

Expert Comment

by:jessc7
ID: 24387642
Is there anything else you need help with on this issue?
0
 
LVL 1

Author Comment

by:Dan-LL
ID: 24389577
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
 
LVL 1

Author Closing Comment

by:Dan-LL
ID: 31581141
thanks for the help, ms gives us more to worry about, lol...
0
 
LVL 1

Author Comment

by:Dan-LL
ID: 24391164
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
 
LVL 16

Expert Comment

by:jessc7
ID: 24391899
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
 
LVL 42

Expert Comment

by:David S.
ID: 24392467
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
 
LVL 1

Author Comment

by:Dan-LL
ID: 24403874
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
 
LVL 1

Author Comment

by:Dan-LL
ID: 24403966
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
 
LVL 42

Expert Comment

by:David S.
ID: 24404134
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
 
LVL 1

Author Comment

by:Dan-LL
ID: 24405637
if you can, please tell me the # code, i don't know it....
0
 
LVL 16

Expert Comment

by:jessc7
ID: 24406128
background-color:transparent;
0
 
LVL 42

Expert Comment

by:David S.
ID: 24407736
Yes, you can't specify transparency in rgb. Therefore that keyword is provided for the purpose.
0
 
LVL 1

Author Comment

by:Dan-LL
ID: 24413349
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question