On hover, Linked image jumps around on page

RESOLVED DUPLICATE of bug 149934

Status

()

RESOLVED DUPLICATE of bug 149934
11 years ago
11 years ago

People

(Reporter: kengriffith, Unassigned)

Tracking

({testcase})

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment)

(Reporter)

Description

11 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

This is a rather gross and obnoxious bug.  It is displayed multiple times on the site referenced above.

It occurs in the following scenario:
<div style="float:left or right;"><a href="xxx"><img /></a></div>

I've tested the example page by removing all java script.  It occurs independent of javascript.  However, if you remove the link tag around the image, the bug does not occur.

This made me think it was just the image and link.  However, when testing it by putting a line of text below the image, it becomes clear that the entire DIV is jumping, not just the image and link contained in it.

In my tests the image always had a border.  I didn't test it without the border.

Reproducible: Always

Steps to Reproduce:
1. <div style="float:left or right;"><a href="xxx"><img /></a></div>
2. Mouse over the image.
Actual Results:  
Mouse cursor turns to pointer. Div containing linked image jumps vertically on the page with a rapid oscillation, about 1/3rd of the vertical space of the browser. The link still works if you can pin the image down long enough to click on it.

Expected Results:  
The div should not move at all.  The mouse cursor should turn to a pointer.

Tried this on a different machine with a fresh install of Firefox. Same bug results.

Comment 2

11 years ago
Created attachment 274750 [details]
Testcase #1

The problem is a style rule at http://oldvirginiawoodworking.com/css/main.css
which specifies vertical-align:bottom on hover (when not hovered it has
the default value baseline).

a.cartlink:hover, a.cartlink:focus, div.panel_content a:hover, div.panel_content a:focus {
	color:#a7a7a7;
	text-decoration:none;
	font-weight:700;
	cursor:pointer;
	font-family:Arial, Helvetica, "Trebuchet MS";
	font-size:medium;
	text-align:right;
	border:none;
	text-decoration:underline;
	vertical-align:bottom;
}

Updated

11 years ago
Severity: major → normal
Status: UNCONFIRMED → RESOLVED
Last Resolved: 11 years ago
Keywords: testcase
OS: Windows XP → All
Hardware: PC → All
Resolution: --- → DUPLICATE
Duplicate of bug: 149934
You need to log in before you can comment on or make changes to this bug.