DIVs inside HREF/A-TAG renders inconsistently

RESOLVED WORKSFORME

Status

()

Core
DOM
--
minor
RESOLVED WORKSFORME
10 years ago
9 years ago

People

(Reporter: Daniel, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

10 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9) Gecko/2008052906 Firefox/3.0
Build Identifier: 

DIVs inside an href render inconsistently. Although having an a div inside an href isn't valid HTML, the behaviour of FF is erratic. Same piece of code works sometimes and others not.

Reproducible: Always

Steps to Reproduce:
-- CODE --
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<style>
body {
	overflow:hidden;
}
html {
	overflow:hidden;
}
button {
	border:none;
	background-color:transparent;
	width:101px;
	height:32px;
}
* {
	padding:0;
	margin:0;
}
a:link, a:visited {
	font-family:Tahoma;
	/*font-size:11px;*/
	font-weight:normal;
	color:#395693;
	text-decoration:underline;
}
a:hover {
	color:#395693;
	text-decoration:none;
}
a:active {
	color:#395693;
	text-decoration:none;
}

.window {
	position:absolute;
	top:40px;
	left:40px;
	width:600px;
	height:400px;
	border:none;
}

.earnOptionNormal {
	position:relative;
	top:0;
	left:0;
	height:60px;
	margin-top:6px;
	margin-bottom:10px;
	margin-left:8px;
	margin-right:8px;
}
.earnOptionIconInviteNormal {
	position:absolute;
	top:0;
	left:0;
	width:60px;
	height:60px;
	background-position:center;
	background-repeat:no-repeat;
	margin-right:6px;
	background-color:blue;
	background-position:-60px 0;
}
.earnOptionIconOfferNormal {
	position:relative;
	top:0;
	left:0;
	width:60px;
	height:60px;
	background-position:center;
	background-repeat:no-repeat;
	margin-right:6px;
	background-color:white;
	background-position:-60px 0;
}
.earnOptionIconSpareChangeNormal {
	position:relative;
	top:0;
	left:0;
	width:60px;
	height:60px;
	background-position:center;
	background-repeat:no-repeat;
	margin-right:6px;
	background-color:blue;
	background-position:-60px 0;
}
.earnOptionIconSurveyNormal {
	position:relative;
	top:0;
	left:0;
	width:60px;
	height:60px;
	background-position:center;
	background-repeat:no-repeat;
	margin-right:6px;
	background-color:blue;
	background-position:-60px 0;
}
.earnOptionIconInviteOver {
	position:relative;
	top:0;
	left:0;
	width:60px;
	height:60px;
	background-position:center;
	background-repeat:no-repeat;
	margin-right:6px;
	background-color:blue;
	background-position:0 0;
}
.earnOptionIconOfferOver {
	position:relative;
	top:0;
	left:0;
	width:60px;
	height:60px;
	background-position:center;
	background-repeat:no-repeat;
	margin-right:6px;
	background-color:blue;
	background-position:0 0;
}
.earnOptionIconSpareChangeOver {
	position:relative;
	top:0;
	left:0;
	width:60px;
	height:60px;
	background-position:center;
	background-repeat:no-repeat;
	margin-right:6px;
	background-color:blue;
	background-position:0 0;
}
.earnOptionIconSurveyOver {
	position:relative;
	top:0;
	left:0;
	width:60px;
	height:60px;
	background-position:center;
	background-repeat:no-repeat;
	margin-right:6px;
	background-color:blue;
	background-position:0 0;
}
.earnOptionDescNormal {
	position:absolute;
	top:0;
	left:70px;
	width:517px;
	height:60px;
}
.earnOptionDescNormalLeftCap {
	position:absolute;
	top:0;
	left:0;
	width:4px;
	height:60px;
	background-color:grey;
	background-position:0 0;
}
.earnOptionDescNormalRightCap {
	position:absolute;
	top:0;
	left:513px;
	width:4px;
	height:60px;
	background-color:grey;
	background-position:-8px 0;
}
.earnOptionDescOverLeftCap {
	position:absolute;
	top:0;
	left:0;
	width:4px;
	height:60px;
	background-color:grey;
	background-position:-4px 0;
}
.earnOptionDescOverRightCap {
	position:absolute;
	top:0;
	left:513px;
	width:4px;
	height:60px;
	background-color:grey;
	background-position:-12px 0;
}
.earnOptionDescMidNormal {
	margin-left:4px;
	margin-right:4px;
	height:60px;
	background:#eff3fa;
}
.earnOptionDescMidOver {
	margin-left:4px;
	margin-right:4px;
	height:60px;
	background:white;
}
.earnOptionDescTitle {
	padding:10px 0 4px 10px;
	font-family:Tahoma;
	font-size:18px;
}
.earnOptionDescDesc {
	margin-left:12px;
	margin-right:0;
	font-family:Tahoma;
	font-size:11px;
}
.earnOptionOverlay {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:60px;
}
a.earnOptionLink, .earnOptionLink:link, .earnOptionLink:visited, .earnOptionLink:hover, .earnOptionLink:active {
	color:black;
	text-decoration:none;
	display:block;
}

.silverwindow {
	position:absolute;
	top:0;
	left:0;
	width:0;
	height:0;
	border:none;
}
.silverwindowTitle {
	height:23px;
	width:100%;
	background-repeat:repeat-x;
}
.silverwindowTitleMid {
	position:absolute;
	top:0;
	left:6px;
	width:4px;
	height:23px;
	background-color:grey;
}
.silverwindowTitleLeftCap {
	position:absolute;
	top:0;
	left:0;
	height:23px;
	width:6px;
	background-color:grey;
	background-position:0 0;
}
.silverwindowTitleRightCap {
	position:absolute;
	top:0;
	left:100px;
	height:23px;
	width:6px;
	background-color:grey;
	background-position:-6px 0;
}
.silverwindowTitleName {
	position:relative;
	top:0;
	width:-10px;
	height:100%;
	font-family:Tahoma;
	font-size:11px;
	font-weight:bold;
	text-align:right;
	color:black;
	line-height:20px;
	margin-right:10px;
}
.silverwindowBottom {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	font-family:Arial;
	font-size:1px;
	background-repeat:repeat-x;
	height:6px;
}
.silverwindowBottomMid {
	position:absolute;
	top:0;
	left:6px;
	height:6px;
	width:4px;
	background-color:grey;
}
.silverwindowBottomLeftCap {
	position:absolute;
	top:0;
	left:0;
	height:6px;
	width:6px;
	background-color:grey;
	background-position:-12px -18px;
}
.silverwindowBottomRightCap {
	position:absolute;
	top:0;
	left:100px;
	height:6px;
	width:6px;
	background-color:grey;
	background-position:-12px -12px;
}
.silverwindowMainLeftCap {
	position:absolute;
	top:23px;
	left:0;
	width:4px;
	height:300px;
	width:1px;
	background-color:white;
}
.silverwindowMain {
	position:absolute;
	top:23px;
	left:1px;
	width:100px;
	height:300px;
	background-color:grey;
	background-position:0 -2500px;
	background-repeat:repeat-x;
	overflow:hidden;
}
.silverwindowMainRightCap {
	position:absolute;
	top:23px;
	left:10px;
	width:4px;
	height:300px;
	width:1px;
	background-color:white;
}

#earnInnerWindowTitleMid, #disconnectionPageWindowInnerWindowTitleMid, #profileInnerWindowTitleMid, 
#earnInnerWindowBottomMid, #disconnectionPageWindowInnerWindowBottomMid, #profileInnerWindowBottomMid {
	width:594px;
}

#earnInnerWindowBottom, #mainPageMainWindowBottom, #myDrawsComingDrawsWindowBottom, #myDrawsPreviousDrawsWindowBottom, #profileInnerWindowBottom {
	top: 337px;
}
#earnInnerWindowMainLeftCap, #mainPageMainWindowMainLeftCap, #myDrawsComingDrawsWindowMainLeftCap, #myDrawsPreviousDrawsWindowMainLeftCap, #profileInnerWindowMainLeftCap {
	height:314px;
}

#earnInnerWindowMain {
	height:314px;
	width:604px;
}

</style>
</head>
<body>

			<div id="tabEarn" >
				<div class="window silverwindow" id="earnInnerWindow">
					<div class="silverwindowTitle" id="earnInnerWindowTitle">

						<div class="silverwindowTitleMid" id="earnInnerWindowTitleMid"></div>
						<div class="silverwindowTitleName" id="earnInnerWindowTitleName">select a method</div>
					</div>
					<div class="silverwindowTitleLeftCap" id="earnInnerWindowTitleLeftCap"></div>
					<div class="silverwindowTitleRightCap" id="earnInnerWindowTitleRightCap"></div>
					<div class="silverwindowBottom" id="earnInnerWindowBottom">
						<div class="silverwindowBottomLeftCap" id="earnInnerWindowBottomLeftCap"></div>
						<div class="silverwindowBottomRightCap" id="earnInnerWindowBottomRightCap"></div>

						<div class="silverwindowBottomMid" id="earnInnerWindowBottomMid"></div>
					</div>
					<div class="silverwindowMainLeftCap" id="earnInnerWindowMainLeftCap"></div>
					<div class="silverwindowMainRightCap" id="earnInnerWindowMainRightCap"></div>
					<div class="silverwindowMain" id="earnInnerWindowMain">
						<a target="_top" href="#">
						<div class="earnOptionNormal" id="earnOptionInvite">
							<div class="earnOptionIconInviteNormal" id="earnOptionIconInvite">
								<div class="earnOptionIconNormalLeftCap" id="earnOptionIconLeftCapInvite"></div>

								<div class="earnOptionIconNormalRightCap" id="earnOptionIconRightCapInvite"></div>
							</div>
							<div class="earnOptionDescNormal" id="earnOptionDescInvite">
								<div class="earnOptionDescNormalLeftCap" id="earnOptionDescLeftCapInvite"></div>
								<div class="earnOptionDescMidNormal" id="earnOptionDescMidInvite">
									<div class="earnOptionDescTitle" id="earnOptionDescTitleInvite">Option A</div>
									<div class="earnOptionDescDesc" id="earnOptionDescDescInvite">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
								</div>

								<div class="earnOptionDescNormalRightCap" id="earnOptionDescRightCapInvite"></div>
							</div>
							<div class="earnOptionOverlay" id="earnOptionOverlayInvite"></div>
							</div>
						</a>
						<a target="_top" href="#">
						<div class="earnOptionNormal" id="earnOptionOffer">
							<div class="earnOptionIconOfferNormal" id="earnOptionIconOffer">
								<div class="earnOptionIconNormalLeftCap" id="earnOptionIconLeftCapOffer"></div>

								<div class="earnOptionIconNormalRightCap" id="earnOptionIconRightCapOffer"></div>
							</div>
							<div class="earnOptionDescNormal" id="earnOptionDescOffer">
								<div class="earnOptionDescNormalLeftCap" id="earnOptionDescLeftCapOffer"></div>
								<div class="earnOptionDescMidNormal" id="earnOptionDescMidOffer">
									<div class="earnOptionDescTitle" id="earnOptionDescTitleOffer">option B</div>
									<div class="earnOptionDescDesc" id="earnOptionDescDescOffer">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
								</div>

								<div class="earnOptionDescNormalRightCap" id="earnOptionDescRightCapOffer"></div>
							</div>
							<div class="earnOptionOverlay" id="earnOptionOverlayOffer"></div>
							</div>
						</a>
						<a target="_top" href="#">
						<div class="earnOptionNormal" id="earnOptionSurvey">
							<div class="earnOptionIconSurveyNormal" id="earnOptionIconSurvey">
								<div class="earnOptionIconNormalLeftCap" id="earnOptionIconLeftCapSurvey"></div>

								<div class="earnOptionIconNormalRightCap" id="earnOptionIconRightCapSurvey"></div>
							</div>
							<div class="earnOptionDescNormal" id="earnOptionDescSurvey">
								<div class="earnOptionDescNormalLeftCap" id="earnOptionDescLeftCapSurvey"></div>
								<div class="earnOptionDescMidNormal" id="earnOptionDescMidSurvey">
									<div class="earnOptionDescTitle" id="earnOptionDescTitleSurvey">option C</div>
									<div class="earnOptionDescDesc" id="earnOptionDescDescSurvey">ccccccccccccccccccccccccccccccccccccc</div>
								</div>

								<div class="earnOptionDescNormalRightCap" id="earnOptionDescRightCapSurvey"></div>
							</div>
							<div class="earnOptionOverlay" id="earnOptionOverlaySurvey"></div>
							</div>
						</a>
					</div>
				</div>
			</div>
	
	

</body>
</html>

--CODE--

1. Load the following HTML code. 
2. Some of the links will be active (changes to a hand when moused over)
3. Some will not be active (they ALL SHOULD BE)
4. Press F5 and the item/s that are clickable change.


Expected Results:  
All links should be clickable all the time.
this works for me with Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1a1pre) Gecko/2008071303

maybe you can adjust your testcase concerning the triggering of the bug and attach it to this bug report.

Comment 2

9 years ago
WFM as well, even across browsers.

Since you know that div elements aren't allowed inside a elements, why do you use them anyway? The structure is heavily overstyled. Making elements behave like block elements is no problem. I think the whole could be made much more simple.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.