Closed Bug 442957 Opened 16 years ago Closed 16 years ago

DIVs inside HREF/A-TAG renders inconsistently

Categories

(Core :: DOM: Core & HTML, defect)

Product:
Core
Component:
DOM: Core & HTML
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
minor

Tracking

()

Status:
RESOLVED WORKSFORME

People

(Reporter: daniel, Unassigned)

Details

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.
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
Closed: 16 years ago
Resolution: --- → WORKSFORME
Component: DOM → DOM: Core & HTML
You need to log in before you can comment on or make changes to this bug.