When float:right position:relative div within an li, link within the div, then the location of the actual link differs from the location of the link text displayed on the screen.

RESOLVED WORKSFORME

Status

()

RESOLVED WORKSFORME
11 years ago
11 years ago

People

(Reporter: blacatena, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

11 years ago
User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7

Original page contains a series of li items, each with two divs, one to display the content, and another to float on the right with a link related to the content.  See sample with a single li for simplicity.

All elements needed explicit (redundant, but legal) position:relative declarations added to eliminate an IE bug.

With these declarations (one in particular), then the place where the linked text is displayed differs from the actual clickable location of the link on the page.

Eliminating one "extraneous" position:relative declaration eliminates the bug (but restores the IE bug).

Reproducible: Always

Steps to Reproduce:
1. Mouse over left four X's on XXXXX link -- no change
2. Click left four X's on XXXXX link on sample page -- no response
3. Mouse over last X on XXXXX link on sample page -- XXXXX is underlined
4. Click last X on XXXXX link on sample page -- link works
Actual Results:  
No response unless you find the right spot.

Expected Results:  
Entire XXXXX link should underline when mouseover, and work when clicked.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bug Link Activates in Wrong Spot</title>       
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<body>

<style>
	div.xxx {display:block;position:relative;float:right;width:50px}
	div.xxx a:link,div.xxx a:visited {text-decoration:none}
	div.xxx a:hover,div.xxx a:active {text-decoration:underline}
	
	ul.yyy li div {position:relative}	# This is the problem, here
   	ul.yyy li div.zzz {position:relative;clear:both}

</style>

<ul class="yyy">
	<li>
		<div class="xxx">
			<a href="#anywhere">
				XXXXXXX
			</a>
		</div>
		<div>
			<span>
 				The link to the right is unclickable -- except in the last X.  Changing the <strong>div.xxx</strong> width affects this.  Removing the <strong>ul.yyy li div</strong> declaration eliminates the problem -- but that declaration is legal, and is necessary to overcome an IE bug.
			</span>
		</div>
		<div class="zzz">
			<ul class="yyy">
			</ul>
		</div>
	</li>
</ul>

</body>
</html>
(Reporter)

Comment 1

11 years ago
Created attachment 281641 [details]
Sample page demonstrating problem

Comment 2

11 years ago
I think this is correct behaviour. If you add borders to the divs you can see where they overlap and I believe the order of display is up to the agent.

Adding a z-index:1 to the div.xxx rules make this work for me.
(Reporter)

Comment 3

11 years ago
Okay, you can close this.  I didn't realize the main div was on top of instead of beside the floating div.  I'm not sure why they're overlapping, instead of side-by-side (or why the floating div extends outside of the containing li), but I'll figure that out.  For now, the z-index is a workaround.

Sorry to bother you with a non-bug.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 11 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.