IE Image Anchor unwanted Jump and Text Decoration

Ok, so I’m not a big fan of IE and we are not getting on today.

Basically the ‘BagUpBaits’ image anchor at the bottom of this page:
carp-fishing-reels.com/cfr-article-library/
jumps in IE when the mouse hovers over it and text decoration (an underline) appears below, however it displays perfectly as I want it in Firefox.

Any help to stop this happening in IE would be greatly appreciated, I’ve done some trial and error, if I get it right in IE it doesn’t display correctly in Firefox!

I think you should use some CSS for this. You have you image in a div for which you used an inline style

text-align: center;

but there is nothing declared for the image/logo. You should try to set a class for your div and logo:


.yourDiv {
  width: 356px;
  margin: 0 auto;
  overflow: hidden;
}

.yourDiv a {
  width: 356px;
  height: 155px;
  display: block;
  background: url(http://carp-fishing-reels.com/wp-content/uploads/2010/08/bagupbaits.jpg);
  text-transform: uppercase;
  text-decoration: none;
  text-indent: -999em;
}


<div class="yourDiv">
<a href="http://www.bagupbaits.co.uk/index.html">Bagup Baits website</a>
</div>

Thanks for the advice. I Hadn’t thought about doing it that way.

Should this be the approach I take for all the ‘Buy Now’ anchor buttons that are spread across the site by using a <a class=“”> approach?

Also as you’ve no doubt guessed I’m fairly new to html and css, and I fail to see what the following do:

Overflow: hidden;

display: block;

text-indent: -999em;

Margin: auto; for some reason did not center the text (it did move to the right but not central), however declaring text-align: center; underneath did the trick.

I’m always looking to improve so your help is much appreciated.

I’m fairly new to html and css, and I fail to see what the following do:

Overflow: hidden;

As you can see there is a width but no height property for .yourDiv and the div is not floating either. By setting overflow hidden the div will adjust it’s height to the content it is holding.

display: block;

An anchor <a> is an inline element. Inline elements can only contain text and/or other inline elements. For the anchor to hold the image (you need to set width & height) the display property is set to block. (You can see what is happening when you set the display property to inline)

text-indent: -999em;

You may want to use a text for the anchor


<a href="#">Your Text</a>

In order for the text not to appear on top of the image I used the text-indent. This actually is pushing the text off the page. The downfall of this technique is that when on a visitors computer the Images are turned OFF they are left with a empty space. If its a requirement to have text in such cases you might want consider a more sophisticated image replacement method!

Margin: auto; for some reason did not center the text (it did move to the right but not central), however declaring text-align: center; underneath did the trick.

I used the margin: 0 auto; to center the div holding the logo. You did the right thing to center the text by adding the text-align property

I’m always looking to improve so your help is much appreciated.
It’s always good to look forward. And Sitepoint is a good place to be in that case!

Good luck with the site.