Closed
Bug 263176
Opened 20 years ago
Closed 20 years ago
apparent incorrect rendering of links
Categories
(Core :: Layout: Floats, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: oboesax, Unassigned)
References
Details
(Keywords: testcase)
Attachments
(2 files)
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.7.3) Gecko/20040913 Firefox/0.10.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.7.3) Gecko/20040913 Firefox/0.10.1
The links in a floated-left menu do not work if they are parallel with an image
located in another div. see "steps to reproduce" for page source. It displays
"correctly" in IE and Opera7 but not in firefox. It seems to have something to
do with floating the divs... possibly with the negative margins... but the
behavior is definately affected by the presence of an image in the right-hand div
Reproducible: Always
Steps to Reproduce:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page title</title>
<style>
/*--- Page header ---*/
.header {font-family: Verdana, sans-serif;}
.header h1 {
font-weight: bold;
font-size: 1.5em;}
/*--- Content container ---*/
.container {
position: relative;
clear: both;
width: 100%;}
/*--- Content styles ---*/
#main h1, #main h2, #main h3 {
font: 1.5em Verdana, sans-serif;
margin: 0;
padding: 0;}
#main h2 {
font-size: 1.25em;
padding-top: 0.25em;}
#main h3 {
font-size: 1.1em;
padding-top: 0.25em;}
/*--- Page footer ---*/
#footer {
font: italic 0.6em Verdana, sans-serif;
text-align: right;}
html, body {
margin: 0;
padding: 0;}
body {
width: 100%;
background-color: #022C6B;}
/*--- Page header ---*/
.header {
color: #FFF;}
.header h1 {
padding: 15px 210px 10px 0;
margin: 0;}
.header img {
border: 0;
float: left;
margin: 5px;}
/*--- Content container ---*/
.container {
width: 100%;
float:right;
margin-left:-180px;}
/*--- Navigation menu---*/
#nav {
width: 175px;
float:left;
background-color: #E5F0FF;
border-right: 1px solid #666;}
#nav ul, #nav li, #nav ul ul {
list-style: none;
padding: 0;
margin: 0;}
#nav li {display: inline;}
#nav ul ul {border-bottom: 1px solid #022C6b;}
/*--- Main topic links ---*/
#nav a, #nav a:visited {
display: block;
text-decoration: none;
font: 0.75em Verdana, sans-serif;
color: #000;
padding: 0.5em 0;
margin: 0;}
/*--- Sub-topic links ---*/
#nav ul ul a, #nav ul ul a:visited {
padding-left: 15px;
background: transparent url(../images/button.gif) 4px 50% no-repeat;
border-bottom: 1px solid #999;}
#nav ul ul a:hover {
color: #FFF;
background-color: #022C6B;
background-image: url(../images/hover.gif);}
/*--- Current section link styles ---*/
#nav a#current {
background: #999 url(../images/current.gif) 5px 50% no-repeat;
color: #FFF;
font-weight: bold;}
#nav a.navhead, #nav a.navhead:visited, #nav a#currenthead:hover {
color: #FFF;
font-weight: bold;
padding: 1.25em 0 0.25em 0.25em;
margin: 0;
background: #4C6B99 none;
border-bottom: 1px solid #022C6B;}
#nav a.navhead:hover {color: #022C6B; background: #CCC none;}
#nav a#currenthead, #nav a#currenthead:hover {background-color: #093;}
/*--- Curriculum subtopics --*/
#nav ul#curriculum {background-color: #CCC;}
#nav ul#curriculum a, #nav ul#curriculum a:visited {
padding-left: 25px;
background: none;
/*background: transparent url(../images/button.gif) 10px 50% no-repeat;*/
border-bottom: 1px solid #999;}
#nav ul#curriculum a:hover {
color: #FFF;
background-color: #022C6B;
/*background-image: url(../images/hover.gif);*/}
#nav ul#curriculum a.subhead{
padding-left: 15px;
color: #FFF;
background-color: #2F476C;
font-weight: bold;}
/*--- Curriculum current link styles ---*/
#nav ul#curriculum a#currentsub {
background-color: #999;
color: #FFF;
font-weight: bold;
border-top: 1px solid #666;}
/*--- Content styles ---*/
.container #main {
margin-left: 180px;}
#main h1 {font-weight: bold;}
#main h1#topic {display: none}
/*--- Page footer ---*/
#footer {
padding: 0.5em 1em 3em;
margin: 0;
color: #ccc;
clear:both;}
/*--- Variable page image ---*/
.kid {
width: 200px; height: 250px;
float:right;
padding: 0px;
margin: 10px;}
/*--- Empty Div for formatting ---*/
.clearing {
height: 0;
clear:both;}
/*--- outer-container div so that white background goes to bottom of longest
element ---*/
#wrapper {
background: #fff url(../images/fauxcolumn.gif) repeat-y left;}
</style>
</head>
<body>
<div class="header">
<a href="http://www.mozilla.org"><img
src="http://www.mozilla.org/images/product-front-mozilla.png" alt="moz"
width="55" height="55" /></a>
<h1>page title</h1>
</div>
<div class="clearing"> </div>
<div id="wrapper">
<div class="container">
<div id="main"><p></p>
<!-- BEGIN - This is the only section that should differ from page to page -->
<img id="kids"
src="http://www.mozillastore.com/images/products/medium/44.jpg" alt=""
style="padding-bottom: 20px;float:right;" />
<h1>more Titles</h1>
<p>Body text goes here</p>
<!-- END - This is the only section that should differ from page to page -->
</div>
</div>
<div id="nav">
<ul>
<li><a href="index.htm" class="navhead" id="currenthead">link <br />number
1</a></li>
<li><ul id="sub1">
<li><a href="forms.htm">Forms</a></li>
<li><a href="policiesandprocedures.htm">Policies & Procedures</a></li>
<li><a href="curriculum.htm">Curriculum</a></li>
<li><a href="trainingcalendar.htm">Training Calendar</a></li>
<li><a href="contactus.htm">Contact Us</a></li>
</ul>
</li>
<li><a href="contractedprograms.htm" class="navhead">Contracted Programs</a></li>
<li><a href="morecontractedprograms.htm" class="navhead">More Contacted
Programs</a></li>
</ul>
</div>
<div class="clearing"> </div>
</div>
<div id="footer">Copyright © ME</div>
</body>
</html>
Actual Results:
I've modified the page so that the code should work as-is (no image downloading
or folder setup required). see for yourself. I can't access the links in the
lefthand navigation
Expected Results:
should let me click on the links
|
||
Comment 1•20 years ago
|
||
*** Bug 263215 has been marked as a duplicate of this bug. ***
|
||
Comment 3•20 years ago
|
||
The right-floated, relatively-positioned, negatively-margined div is
"obscuring" the links.
Safari behaves the same way.
|
|
||
Updated•20 years ago
|
Component: General → Layout: Floats
Product: Firefox → Browser
Version: unspecified → 1.7 Branch
|
|
||
Updated•20 years ago
|
Assignee: firefox → nobody
QA Contact: firefox.general → core.layout.floats
|
|
||
Updated•20 years ago
|
OS: Windows XP → All
Hardware: PC → All
|
||
Comment 4•20 years ago
|
||
Mozilla's rendering is correct (put a background color on the div and notice
that it's painted above the links).
This is what CSS2.1 specifies; Opera is working on fixing it in their browser.
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → INVALID
Whiteboard: DUPEME
You need to log in
before you can comment on or make changes to this bug.
Description
•