Divs not working inside Divs in Firefox

**FTIGraphix** · Sep 20, 2007 16:26

I'm pretty new to this but I'm trying to code with web standards (strick xhtml and css). I've attached two pictures below - one of the site in IE (which looks great) and the other in Firefox (which is having problems). The problem seems to be Firefox not recognizing the div. Feel free to enlighten me on other problems as well =) Here's the code:

Code HTML4Strict:

<!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">
<head>
<title>USU Replication</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css.css" type="text/css" />
</head>
 
 
<body>
 
<div id="main">
 
<div id="second">
 
<p id="third">
<img src="images/logo.jpg" alt="USU Logo"/>
</p>
 
<p id="fourth">
<a href="home.html">USU Home </a><a href="home.html">A-Z Index </a><a href="home.html">Calendars </a><a href="home.html">MyUSU </a>
<a href="home.html">Contact </a><a href="home.html">people/web search</a>
</p>
</div>
 
<div id="fifth">
 
<h3 class="toplinks"><a href="home.html">Future Students </a></h3><h3 class="toplinks"><a href="home.html">Current Students </a>
</h3><h3 class="toplinks"><a href="home.html">Alumni &amp; Friends </a> </h3><h3 class="toplinks"><a href="home.html">Faculty &amp; Staff </a></h3><h3 class="toplinks"><a href="home.html">Community &amp; Vistors</a></h3>
 
</div>
 
<div id="mainpic">
  <a href="http://www.usu.edu/cob"><img src="images/extension_anniversary.jpg" alt="One Hundred Years!" /></a>
</div>
 
<div id="welcome">
<h6>Welcome</h6>
<ul>
<li>About USU</li>
<li>Parents</li>
<li>Regional Campuses</li>
<li>Student Life</li>
<li>Visit the Campus</li>
</ul>
</div>
 
</div>
<p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10-blue"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
  </p>
<p>
 <a href="http://jigsaw.w3.org/css-validator/check/referer">
  <img style="border:0;width:88px;height:31px"
       src="http://jigsaw.w3.org/css-validator/images/vcss" 
       alt="Valid CSS!" />
 </a>
</p>
 
</body>
</html>

Code CSS:

@charset "utf-8";
/* CSS Document */
 
body {background-color: #D5DDDA;}
 
#main {background-color: #FFFFFF;
	   width: 758px;
	   margin: auto;}
 
#second {background-color: #003366;
		  background-image: url(images/header_bg.jpg);
		  background-repeat: no-repeat;
		  background-position: right;
		  margin: 4px 5px 0 5px;
		  width: 749px;}
 
#third {float: left;}
 
#fourth {float: right;
		margin: 10px 30px;}
 
#fourth a:link, #fourth a:visited {color: #BFBFFF;
		   		font-family: Arial, Helvetica, sans-serif;
		   		font-size: 12px;
				text-decoration: none;}
 
#fourth a:hover {color: #FFFFFF;}
 
#fifth {background-color: #0054A8;
		width: 749px;
		clear: both;
		margin: 1px 5px 2px 5px;
		height: 20px;}
 
#fifth a:link, #third1 a:visited {color: #FFFFFF;
					font-family: Arial, Helvetica, sans-serif;
					font-size: 12px;
					text-decoration: none;
					font-weight: bold;}
 
 
.toplinks {float: left;
		   margin: 2px 5px 0 2px;}
 
.toplinks a:hover {background-color:#003366;}
 
#mainpic {width: 749px;
		  margin: 1px 5px 0 5px;
		  clear: both;}
 
#welcome {background-color: #2F26D9; 
		  background-image: url(images/blue_logo_bg.jpg);
		  background-position: bottom;
		  background-repeat: no-repeat;
		  color: #FFFFFF;
		  font-family: Arial, Helvetica, sans-serif;
		  font-size: 12px;
		  clear: both;
		  width: 150px;
		  margin: 1px 1px 1px 5px;
		  text-align: left;}
 
h6 {font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;}
 
ul {list-style-type: none;
	list-style-position: outside;
	text-align: left;
	float: left;
	margin-left: 0px;}

**Centauri** · Sep 20, 2007 23:07

Forget to upload the example pics?

If you are referening to the background on #second not appearing, it would be due to its having no height due to both the content divs being floated, and therefore out of the document flow (IE gets this wrong). You need to clear the floats, and overflow:hidden; applied to #second styling should fix the problem.

**FTIGraphix** · Sep 21, 2007 20:36

I'm pretty sure I uploaded them the first time, but I just did it again - it's pending review. And yes, the problem seems to be with the background on the second div, so i'll check out your suggestions.

User Tag List

Thread: Divs not working inside Divs in Firefox

Thread Tools

Display

Divs not working inside Divs in Firefox

Bookmarks

Bookmarks

Posting Permissions