SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    I, Human FTIGraphix's Avatar
    Join Date
    Apr 2003
    Location
    Utah
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Divs not working inside Divs in Firefox

    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;}
    Attached Images Attached Images
    Last edited by FTIGraphix; Sep 21, 2007 at 20:35.

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    I, Human FTIGraphix's Avatar
    Join Date
    Apr 2003
    Location
    Utah
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •