phoenixshade
02-18-2007, 01:30 PM
This works fine in IE7, but for the life of me I can't figure out why it doesn't work in FF2. Relevent portions are highlighted in red. I've cut out some of the code, but I've left the skeleton intact.
First the css:
#wrap {
width:80%;
border:solid 1px #666;
min-width:650px;
margin-left:9%;
}
#header {
padding:16px 0px;
}
#content {
width:100%;
}
.subnav {
width:78%;
list-style:none;
background:#BBB;
margin:0;
}
.submenu {
width:16%;
float:left;
}
.submenu a {
color:#FFF;
text-decoration:none;
padding:4px 8px;
display:block;
}
.submenu a:hover {
background:#999;
display:block;
}
#sidebar {
float:left;
width:22%;
}
#sidebar dl {
width:100%;
list-style:none;
}
#sidebar .menu {
width:100%;
}
#sidebar .menu a {
color:#CCC;
display:block;
}
#sidebar .menu a:hover {
background:#BBB;
color:#FFF;
display:block;
}
#main{
float:right;
width:77%;
}
#footer{
clear:both;
padding:1px 8px;
background:#EEE;
color:#888;
}
And here's the markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Jabberwocky</title>
<link rel="StyleSheet" href="common.css" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Page Title</h1>
<h2>Page Subtitle</h2>
</div>
<div id="content">
<div id="sidebar">
<dl>
<dt class="menu"><a href="#">Item1</a></dt>
<dt class="menu"><a href="#">Item2</a></dt>
<dt class="menu"><a href="#">Item3</a></dt>
<dt class="menu"><a href="#">Item4</a></dt>
</dl>
</div>
<dl class="subnav">
<dt class="submenu"><a href="#">Item1.1</a></dt>
<dt class="submenu"><a href="#">Item1.2</a></dt>
<dt class="submenu"><a href="#">Item1.3</a></dt>
</dl>
<div id="main">
<h1>Article Heading</h1>
<h2>Article Subheading</h2>
<p>'Twas brillig, and all the slithy toves<br />
Did gyre and gimble in the wabe.<br />
All mimsy were the borogoves,<br />
And the mome rath outgrabe.
</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
In Firefox, the background color on the <dl> does not render. It works just fine on the <dt>s on hover.
The <dl> is a horizontal menu. The effect I'm shooting for is to have the menu bar extend the full width of the content area even if the menu itself does not. I'm sure I could solve this by wrapping a <div> around the <dl> and style that, but I want to know if there's something wrong with the way I did this, or is this just a FireFox bug?
EDIT: I tried the <div> wrapper around the <dl> and it still didn't work...
First the css:
#wrap {
width:80%;
border:solid 1px #666;
min-width:650px;
margin-left:9%;
}
#header {
padding:16px 0px;
}
#content {
width:100%;
}
.subnav {
width:78%;
list-style:none;
background:#BBB;
margin:0;
}
.submenu {
width:16%;
float:left;
}
.submenu a {
color:#FFF;
text-decoration:none;
padding:4px 8px;
display:block;
}
.submenu a:hover {
background:#999;
display:block;
}
#sidebar {
float:left;
width:22%;
}
#sidebar dl {
width:100%;
list-style:none;
}
#sidebar .menu {
width:100%;
}
#sidebar .menu a {
color:#CCC;
display:block;
}
#sidebar .menu a:hover {
background:#BBB;
color:#FFF;
display:block;
}
#main{
float:right;
width:77%;
}
#footer{
clear:both;
padding:1px 8px;
background:#EEE;
color:#888;
}
And here's the markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Jabberwocky</title>
<link rel="StyleSheet" href="common.css" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Page Title</h1>
<h2>Page Subtitle</h2>
</div>
<div id="content">
<div id="sidebar">
<dl>
<dt class="menu"><a href="#">Item1</a></dt>
<dt class="menu"><a href="#">Item2</a></dt>
<dt class="menu"><a href="#">Item3</a></dt>
<dt class="menu"><a href="#">Item4</a></dt>
</dl>
</div>
<dl class="subnav">
<dt class="submenu"><a href="#">Item1.1</a></dt>
<dt class="submenu"><a href="#">Item1.2</a></dt>
<dt class="submenu"><a href="#">Item1.3</a></dt>
</dl>
<div id="main">
<h1>Article Heading</h1>
<h2>Article Subheading</h2>
<p>'Twas brillig, and all the slithy toves<br />
Did gyre and gimble in the wabe.<br />
All mimsy were the borogoves,<br />
And the mome rath outgrabe.
</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
In Firefox, the background color on the <dl> does not render. It works just fine on the <dt>s on hover.
The <dl> is a horizontal menu. The effect I'm shooting for is to have the menu bar extend the full width of the content area even if the menu itself does not. I'm sure I could solve this by wrapping a <div> around the <dl> and style that, but I want to know if there's something wrong with the way I did this, or is this just a FireFox bug?
EDIT: I tried the <div> wrapper around the <dl> and it still didn't work...