Solved

hyperlink image in ie8

Posted on 2009-05-13
18
940 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
 
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

708 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now