Mozilla Float Bug in XHTML Strict 1.0/CSS - html

Question

I'm working on a project with multiple columns. The lay-out displays correctly in Chrome, IE, Opera, even Konqueror, but not in Firefox. I'm currently using Firefox 37.0.1.
The issue I'm having is that all of my div's overlap atop the background image at the top of the page when opening in Mozilla. I'd like to correct this, so that it displays as it does in Chrome, Konqueror, etc.
I've also attached images to visualize the issue.
(CORRECT DISPLAY)
(INCORRECT DISPLAY
EDIT
http://i57.tinypic.com/fp58n7.jpg
In this final image, I've applied a suggested solution of using
<div style="clear:both;"></div>
to clear the parent div of its floats, but I'm not able to get it to work the way I want it to.
Here's my CSS Code:
/* ORGANIZATION: CAL WATER WARS
AUTHOR: GEOFF HOWARD
LAST REVISED: 4/13/201 */
/* VIEWPORT RENDERING */
/* background image auto-scaling */
html {
height: 100%;
background: #99afd6;
}
body {
height: 100%;
margin: 0 auto;
background-color: #0078c4;
font-family: verdana;
font-size: .9em;
background-image: url(content.jpg);
background-repeat: no-repeat;
background-position: 320px 24px;
}
/*this creates the slow fade affect on all links */
a {
-webkit-transition:all .5s;
}
/* END VIEWPORT RENDERING */
/* LAYOUT SETUP */
/* content center + page wrapping */
#contentwrap {
width: 1024px;
height: auto;
margin: 0 auto;
/*padding-top: 200px;*/
}
/* water droplet navigation cfg */
div#sidenav {
clear: both;
padding-top: 100px;
width: 128px;
margin-left: auto;
margin-right: auto;
padding-right: 50px;
}
/* nav link transition setup */
#sidenav ul {
list-style-type: none;
}
#sidenav li a {
display: block;
background: url(water.png); /* free stock icon copyright: http://www.elegantthemes.com/ */
background-repeat: no-repeat;
background-position: center;
width: 128px;
height: 128px;
}
#sidenav li a:hover {
color: #fff;
background: url(waterhover.png); /* free stock icon copyright: http://www.elegantthemes.com/ */
background-repeat: no-repeat;
background-position: center;
width: 128px;
height: 128px;
}
/* menu frame cfg */
div#menubox {
padding-top: 200px;
width: 300px;
margin: 0px;
float: left;
height: 100%;
/*background-color: #4f5d73;*/
}
div#menubox p {
text-indent: 5em;
}
div#menubox h2 {
text-align: center;
color: #77b3d4;
text-decoration: none;
}
div#menubox h2 a:link {
text-decoration: none;
}
div#menubox h2 a:visited {
color: #77b3d4;
text-decoration: none;
}
div#menubox h2 a:hover {
color: #4f5d73;
}
/*drop down menu cfg, learned from a tutorial found at www.csswizardry.com */
#menu {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
float:left;
width: 100%;
position: relative;
z-index: 5;
}
#menu li{
float: left;
margin-right: 10px;
position: relative;
text-align: center;
color: #c0d8f1;
}
#menu a {
display: block;
padding: 5px;
color:#4973AB;
background: #FFF;
text-decoration: none;
text-align: left !important;
}
#menu a:hover {
color: #4973AB;
background:#DBE9EC;
text-decoration: underline;
}
#menu ul{
background: #fff;
background: rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#menu ul li{
padding-top: 1px;
float:none;
}
#menu ul a{
white-space:nowrap;
}
#menu li:hover ul{
left:0;
}
#menu li:hover a{
background:#DBE9EC;
text-decoration:underline;
}
#menu li:hover ul a{
text-decoration:none;
}
#menu li:hover ul li{
background-color: #fff;
color: #4f5d73;
}
#menu li:hover ul li a:hover{
background:#333;
}
/* story frame cfg */
div#storybox {
margin: 0px;
margin-left: 304px;
padding-left: 20px;
text-indent: 3em;
width: 700px;
background-color: rgba(119,179,212,0.7);
min-height: 100px;
max-height: 500px;
border-top: groove;
border-left: groove;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-color: #fff;
overflow-y:scroll;
overflow-x:hidden;
color: #fff;
}
div#storybox h2 {
color: #fff;
text-align: center !important;
text-decoration: underline;
}
div#storybox h3 {
color: #d1edff;
text-align: center !important;
font-style: italic;
}
div#storybox a:link {
color: #0059FF;
text-decoration: none;
font-size: 1.3em;
}
div#storybox a:visited {
color: #0059FF;
text-decoration: none;
}
div#storybox a:hover {
color: #FFA500;
text-decoration: none;
}
/* begin scrollbar configuration, learned from stackoverflow forums */
#storybox {
scrollbar-face-color: #009cfe;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #009cfe;
scrollbar-3dlight-color: #009cfe;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #009cfe;
}
#storybox::-webkit-scrollbar {
width: 10px;
}
#storybox::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(255,255,255,1);
-webkit-border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
#storybox::-webkit-scrollbar-thumb {
-webkit-border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background: #009cfe;
-webkit-box-shadow: inset 0 0 1px rgba(255,255,255,1);
}
/* end scrollbar configuration */
/* top navigation cfg */
div#topnav {
color: #fff;
width: 1024px;
font-size: 2em;
font-family: sans-serif;
}
div#topnav ul {
list-style-type: none;
float: right;
}
div#topnav ul li {
display: block;
padding: 10px;
}
div#topnav ul li a:link {
color: #fff;
text-decoration: none;
}
div#topnav ul li a:visited {
color: #fff;
}
div#topnav ul li a:hover {
color: #4f5d73;
background-color: #fff;
}
/* END LAYOUT SETUP */
And lastly, my (X)HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- ORGANIZATION: CAL WATER WARS
AUTHOR: GEOFF HOWARD
LAST REVISED: 4/13/2015
-->
<head>
<title>California Water Wars</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<link href="test.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>
<![endif]-->
</head>
<body>
<div id="contentwrap">
<div id="topnav">
<ul>
<li>
resources
</li>
<li>
policies
</li>
<li>
sanitation
</li>
</ul>
</div>
<div id="menubox">
<h2>
Editors
</h2>
<ul id="menu">
<li>
John Howard
<ul>
<li>
Available Stories
</li>
<li>
A Grain of Salt
</li>
<li>
Despite Drought, Water Conservation Not a Priority
</li>
</ul>
</li>
</ul>
<div id="sidenav">
<ul>
<li>
</li>
</ul>
</div>
</div>
<div id="storybox">
<h2>
Who We Are
</h2>
<p>
California Water Wars offers a snapshot of water policy and politics in California. We are a professional news team with experience covering California water issues and government, including the Legislature, the bureaucracy and the lobbying community.</p>
<p>
Since statehood – before, in fact – disputes over water have defined California; north and south, inland and coastal. The mission of California Water Wars is to inform the public and policy makers about California water issues and to suggest solutions to the problems.
</p>
</div>
</div>
</body>
</html>

Answer 1

Hm, nested floats. Part of the problem is caused by the clear: both inside the #menubox, which is itself floating. Firefox doesn't handle that very well. You can't really clear a floating element inside itself, only after its end. So at first I thought the solution would be to include a clear: right on #storybox, and also to change the clear: both on #sidenav to clear:right.
However, that won't work, because of those nested floats.
Therefore, your best bet is to take the #menubox out of the flow by positioning it absolutely.
#contentwrap {
(...)
position:relative; /* needed as container for abs positioning */
}
div#menubox {
(...)
position:absolute;
left:0 top:0;
}
div#storybox {
(...)
clear:right; /* and you do need this. */
}
/* ORGANIZATION: CAL WATER WARS
AUTHOR: GEOFF HOWARD
LAST REVISED: 4/13/201 */
/* VIEWPORT RENDERING */
/* background image auto-scaling */
html {
height: 100%;
background: #99afd6;
}
body {
height: 100%;
margin: 0 auto;
background-color: #0078c4;
font-family: verdana;
font-size: .9em;
background-image: url(content.jpg);
background-repeat: no-repeat;
background-position: 320px 24px;
}
/*this creates the slow fade affect on all links */
a {
-webkit-transition:all .5s;
}
/* END VIEWPORT RENDERING */
/* LAYOUT SETUP */
/* content center + page wrapping */
#contentwrap {
width: 1024px;
height: auto;
margin: 0 auto;
/*padding-top: 200px;*/
position:relative;
}
/* water droplet navigation cfg */
div#sidenav {
padding-top: 100px;
width: 128px;
margin-left: auto;
margin-right: auto;
padding-right: 50px;
}
/* nav link transition setup */
#sidenav ul {
list-style-type: none;
}
#sidenav li a {
display: block;
background: url(water.png); /* free stock icon copyright: http://www.elegantthemes.com/ */
background-repeat: no-repeat;
background-position: center;
width: 128px;
height: 128px;
}
#sidenav li a:hover {
color: #fff;
background: url(waterhover.png); /* free stock icon copyright: http://www.elegantthemes.com/ */
background-repeat: no-repeat;
background-position: center;
width: 128px;
height: 128px;
}
/* menu frame cfg */
div#menubox {
position:absolute;
left:0 top:0;
padding-top: 200px;
width: 300px;
margin: 0px;
height: 100%;
/*background-color: #4f5d73;*/
}
div#menubox p {
text-indent: 5em;
}
div#menubox h2 {
text-align: center;
color: #77b3d4;
text-decoration: none;
}
div#menubox h2 a:link {
text-decoration: none;
}
div#menubox h2 a:visited {
color: #77b3d4;
text-decoration: none;
}
div#menubox h2 a:hover {
color: #4f5d73;
}
/*drop down menu cfg, learned from a tutorial found at www.csswizardry.com */
#menu {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
float:left;
width: 100%;
position: relative;
z-index: 5;
}
#menu li{
float: left;
margin-right: 10px;
position: relative;
text-align: center;
color: #c0d8f1;
}
#menu a {
display: block;
padding: 5px;
color:#4973AB;
background: #FFF;
text-decoration: none;
text-align: left !important;
}
#menu a:hover {
color: #4973AB;
background:#DBE9EC;
text-decoration: underline;
}
#menu ul{
background: #fff;
background: rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#menu ul li{
padding-top: 1px;
float:none;
}
#menu ul a{
white-space:nowrap;
}
#menu li:hover ul{
left:0;
}
#menu li:hover a{
background:#DBE9EC;
text-decoration:underline;
}
#menu li:hover ul a{
text-decoration:none;
}
#menu li:hover ul li{
background-color: #fff;
color: #4f5d73;
}
#menu li:hover ul li a:hover{
background:#333;
}
/* story frame cfg */
div#storybox {
clear:right;
margin: 0px;
margin-left: 304px;
padding-left: 20px;
text-indent: 3em;
width: 700px;
background-color: rgba(119,179,212,0.7);
min-height: 100px;
max-height: 500px;
border-top: groove;
border-left: groove;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-color: #fff;
overflow-y:scroll;
/*overflow-x:hidden;*/
color: #fff;
}
div#storybox h2 {
color: #fff;
text-align: center !important;
text-decoration: underline;
}
div#storybox h3 {
color: #d1edff;
text-align: center !important;
font-style: italic;
}
div#storybox a:link {
color: #0059FF;
text-decoration: none;
font-size: 1.3em;
}
div#storybox a:visited {
color: #0059FF;
text-decoration: none;
}
div#storybox a:hover {
color: #FFA500;
text-decoration: none;
}
/* begin scrollbar configuration, learned from stackoverflow forums */
#storybox {
scrollbar-face-color: #009cfe;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #009cfe;
scrollbar-3dlight-color: #009cfe;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #009cfe;
}
#storybox::-webkit-scrollbar {
width: 10px;
}
#storybox::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(255,255,255,1);
-webkit-border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
#storybox::-webkit-scrollbar-thumb {
-webkit-border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background: #009cfe;
-webkit-box-shadow: inset 0 0 1px rgba(255,255,255,1);
}
/* end scrollbar configuration */
/* top navigation cfg */
div#topnav {
color: #fff;
width: 1024px;
font-size: 2em;
font-family: sans-serif;
}
div#topnav ul {
list-style-type: none;
float: right;
}
div#topnav ul li {
display: block;
padding: 10px;
}
div#topnav ul li a:link {
color: #fff;
text-decoration: none;
}
div#topnav ul li a:visited {
color: #fff;
}
div#topnav ul li a:hover {
color: #4f5d73;
background-color: #fff;
}
/* END LAYOUT SETUP */
<div id="contentwrap">
<div id="topnav">
<ul>
<li>
resources
</li>
<li>
policies
</li>
<li>
sanitation
</li>
</ul>
</div>
<div id="menubox">
<h2>
Editors
</h2>
<ul id="menu">
<li>
John Howard
<ul>
<li>
Available Stories
</li>
<li>
A Grain of Salt
</li>
<li>
Despite Drought, Water Conservation Not a Priority
</li>
</ul>
</li>
</ul>
<div id="sidenav">
<ul>
<li>
</li>
</ul>
</div>
</div>
<div id="storybox">
<h2>
Who We Are
</h2>
<p>
California Water Wars offers a snapshot of water policy and politics in California. We are a professional news team with experience covering California water issues and government, including the Legislature, the bureaucracy and the lobbying community.</p>
<p>
Since statehood – before, in fact – disputes over water have defined California; north and south, inland and coastal. The mission of California Water Wars is to inform the public and policy makers about California water issues and to suggest solutions to the problems.
</p>
</div>
</div>
That's about it. You may also need to reposition other elements, which now end up under the #menubox. But that would be mostly a matter of adjusting the left margins.