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

Linked Image with CSS Hover background Color Jerks in IE8

Please see http://www.rrmuseumpa.org/about/musviews/index.shtml 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 http://www.rrmuseumpa.org/css/main.css . I'm guessing I need some mod to this file.

Specific suggestions for fix please?

Jim

 
0
jajr
Asked:
jajr
  • 3
  • 2
1 Solution
 
v2MediaCommented:
"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 ?
0
 
jajrAuthor Commented:
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.
screenshot.jpg
0
 
v2MediaCommented:
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; }
0
 
v2MediaCommented:
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">
                          <tbody><tr>
                            <td valign="top"><div align="center"><a href="http://www.rrmuseumpa.org/about/musviews/overviewshow/show2.shtml" class="thumb"><img src="EE_24352637_files/showscrnshotovrvw.jpg" alt="Overview." width="150" border="0" height="145" /></a>
                                <a href="http://www.rrmuseumpa.org/about/musviews/overviewshow/show2.shtml" class="label">Quick overview of the museum and its features</a></div>
                            </td>
                            <td valign="top"><div align="center"><a href="http://www.rrmuseumpa.org/about/musviews/tourshow/show1.shtml" class="thumb"><img src="EE_24352637_files/showscrnshot.jpg" alt="Tour" width="150" border="0" height="145" /></a>
                                <a href="http://www.rrmuseumpa.org/about/musviews/tourshow/show1.shtml" class="label">Experience the<br />
excitement of a visitor tour</a></div></td>
                            <td valign="top"><div align="center"><a href="http://www.rrmuseumpa.org/about/roster/rostershow/greatlocos.shtml" class="thumb"><img src="EE_24352637_files/showscrnshotlocos.jpg" alt="Locomotives." width="150" border="0" height="145" /></a>
                                <a href="http://www.rrmuseumpa.org/about/roster/rostershow/greatlocos.shtml" class="label">See our wonderful historic locomotives and trains</a></div></td>
                          </tr>
                          <tr>
                            <td valign="top"><div align="center"><a href="http://www.rrmuseumpa.org/restoration/processshow/process.shtml" class="thumb"><img src="EE_24352637_files/showscrnshotprocess.jpg" alt="Restoration process." width="150" border="0" height="145" /></a>
                              <a href="http://www.rrmuseumpa.org/restoration/processshow/process.shtml" class="label">See how we restore locomotives and rail cars</a></div></td>
                            <td valign="top"><div align="center"><a href="http://www.rrmuseumpa.org/restoration/achievementshow/achievements.shtml" class="thumb"><img src="EE_24352637_files/showscrnshotrestored.jpg" alt="Restored equipment." width="150" border="0" height="145" /></a>
                              <a href="http://www.rrmuseumpa.org/restoration/achievementshow/achievements.shtml" class="label">See the historic rolling stock  already restored</a></div></td>
                            <td valign="top">&nbsp;</td>
                          </tr>
                                            </tbody></table>

Open in new window

main.css.txt
0
 
jajrAuthor Commented:
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."
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now