Quantcast

Maximum PC

It is currently Fri Dec 26, 2014 4:28 pm

All times are UTC - 8 hours




Post new topic Reply to topic  [ 4 posts ] 
Author Message
 Post subject: Doctype messes up background
PostPosted: Sat Aug 22, 2009 1:34 am 
Team Member Top 50
Team Member Top 50

Joined: Sat Jun 25, 2005 11:04 am
Posts: 1026
Centered, the website has a picture on the top, two colums in the middle, then a footer on the bottom. When I don't have a doctype, it works, but when I put a strict doctype the background around the mid section disappears.

If I remove the floats, the background appears correctly, but the two columns in the middle are stacked on top of each other.

The code does validate according to http://validator.w3.org/.

Here's a simplified version of the page:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body style="background-color: blue;">
<div style="width: 1024px; height: 100%; margin: 0px auto; background-color: white; display: block;">
   <img style="width: 1024px; height: 200px;" src="pic.jpg" alt="pic">

   
   
   <div style="width: 150px; float: left; display: block;">
      <p>dfjk;lasdk</p>
   </div>

   <div style="width:850; float: left; display: block;">
      <p>adlsfjlk</p>
   </div>

   <div style="width:1024; float: left; display: block;">
      <p>adlsfjlk45365tregwerg4</p>      
   </div>
</div>
</body>
</html>


Top
  Profile  
 
 Post subject:
PostPosted: Sun Aug 23, 2009 9:59 pm 
Team Member Top 50
Team Member Top 50

Joined: Sat Jun 25, 2005 11:04 am
Posts: 1026
I found the solution. It was as simple as putting <br style="clear: both"> at the end before the last </div>. I found the answer from http://www.glish.com/css/3.asp.

Here is the final code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body style="background-color: blue;">
<div style="width: 1024px; height: 100%; margin: 0px auto; background-color: white; display: block;">
   <img style="width: 1024px; height: 200px;" src="pic.jpg" alt="pic">

   
   
   <div style="width: 150px; float: left; display: block;">
      <p>dfjk;lasdk</p>
   </div>

   <div style="width:850; float: left; display: block;">
      <p>adlsfjlk</p>
   </div>

   <div style="width:1024; float: left; clear: both; display: block;">
      <p>adlsfjlk45365tregwerg4</p>     
   </div>
   <br style="clear: both">
</div>
</body>
</html>


Top
  Profile  
 
 Post subject:
PostPosted: Mon Aug 24, 2009 8:47 am 
Team Member Top 50
Team Member Top 50

Joined: Sat Jun 25, 2005 11:04 am
Posts: 1026
Apparently I spoke too soon. It now works properly in IE, FF, but doesn't work properly in chrome.


Top
  Profile  
 
 Post subject:
PostPosted: Wed Aug 26, 2009 8:23 pm 
Team Member Top 50
Team Member Top 50

Joined: Sat Jun 25, 2005 11:04 am
Posts: 1026
Hopefully Ithis will be the last time I post here. I found the solution (hopefully). I just had to add overflow: hidden; to the first div. When I did that, the <br> tag at the end was no longer necessary.


Top
  Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 4 posts ] 

All times are UTC - 8 hours


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group

© 2014 Future US, Inc. All rights reserved.