Linked Image with CSS Hover background Color Jerks in IE8

Posted on 2009-04-24
Last Modified: 2013-11-05
Please see and hover over any of the slideshow images, using IE8. Note that the hover causes a jerk when the assigned background color for hover kicks in. It's fine in all other browsers.

CSS file is at . I'm guessing I need some mod to this file.

Specific suggestions for fix please?


Question by:jajr
    LVL 19

    Expert Comment

    "It's fine in all other browsers." - doesn't work in any browser installed on my system - no change on hover. What's supposed to happen? Border colour change for a:hover ?

    Author Comment

    Did you try it in IE8? That's the only browser it acts up in (VISTA).

    The attacched screenshot shows the mouse hovering over the middle image in top row (the yellow caboose with text link under it saying "Experience the excitement of a visitor tour." Although the screenshot does not show it clearly, when the image (any of the five) is moused over, there appears a faint blue (the default hover background created for text links, but which fires when mousing over an image link like this) area below the image, and the text link below drops down a bit as if having to make room for that background margin.

    If you look closely, the text link under that image is lower than the ones on the left and right, but remove the hover and they are all aligned the same. Thus, as one mouses over the various images, there is a vertical jumping up and down.

    No border is desired nor set to appear in any state of the image/link.
    LVL 19

    Expert Comment

    I dont have access to vista, nor IE8, so can't test; however this is beside the point. The point I've made is that the hover state doesn't work in any browser on my system, xp. This is a pretty good indication that your approach is flawed and will be flawed for most users.

    The reason this is happening is because there's no background showing behind each of the images, so a change in background colour on hover is going to make no difference.

    Humour me and apply some padding to those images...

    .dotbordblu a img { padding: 2px; }
    LVL 19

    Accepted Solution

    I have the hover state working as expected in FF, IE6-7 & NN with the following html/css. Note the image link has a style "thumb", and the caption below has a style "label": -
    <table class="dotbordblu" width="90%" align="center" cellpadding="6" cellspacing="0">
                                <td valign="top"><div align="center"><a href="" class="thumb"><img src="EE_24352637_files/showscrnshotovrvw.jpg" alt="Overview." width="150" border="0" height="145" /></a>
                                    <a href="" class="label">Quick overview of the museum and its features</a></div>
                                <td valign="top"><div align="center"><a href="" class="thumb"><img src="EE_24352637_files/showscrnshot.jpg" alt="Tour" width="150" border="0" height="145" /></a>
                                    <a href="" class="label">Experience the<br />
    excitement of a visitor tour</a></div></td>
                                <td valign="top"><div align="center"><a href="" class="thumb"><img src="EE_24352637_files/showscrnshotlocos.jpg" alt="Locomotives." width="150" border="0" height="145" /></a>
                                    <a href="" class="label">See our wonderful historic locomotives and trains</a></div></td>
                                <td valign="top"><div align="center"><a href="" class="thumb"><img src="EE_24352637_files/showscrnshotprocess.jpg" alt="Restoration process." width="150" border="0" height="145" /></a>
                                  <a href="" class="label">See how we restore locomotives and rail cars</a></div></td>
                                <td valign="top"><div align="center"><a href="" class="thumb"><img src="EE_24352637_files/showscrnshotrestored.jpg" alt="Restored equipment." width="150" border="0" height="145" /></a>
                                  <a href="" class="label">See the historic rolling stock  already restored</a></div></td>
                                <td valign="top">&nbsp;</td>

    Open in new window


    Author Comment

    v2Media's solution represents an excellent solution for this particular page, which is the one I asked about. Time and skill most appreciated!

    Going beyond this page, I have encountered the same problem on other pages where images are serving as links, and it only happens in IE8. Since the page validates, it strikes me that there may be a problem with IE8. It should not be necessary to craft a skilled workaround for every time this occurs. An alternative is to code each page so as to be rendered by IE8 as if it were IE7, but that's sort of hiding the problem.

    This is especially vexing in that CS4 Dreamweaver's Live View shows such pages fine with no such "jerk."

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 Specialist

    HTML5 development skills are critical to all developers. HTML5 is the foundation to almost any development process. That's why business, design studios, development shops and other organizations need HTML5 developers. Get your foot in the door as a HTML5 specialist.

    Suggested Solutions

    I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
    This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
    Sending a Secure fax is easy with eFax Corporate ( First, Just open a new email message.  In the To field, type your recipient's fax number You can even send a secure international fax — just include t…
    This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor ( If you're looking for how to monitor bandwidth using netflow or packet s…

    737 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

    16 Experts available now in Live!

    Get 1:1 Help Now