background color not visible

Forum Moderators: open

Message Too Old, No Replies

background color not visible

tinkerbell

4:54 pm on Mar 11, 2009 (gmt 0)

My coding experience is just passed a beginner, but I have talked to an experienced programmer. We can't get my background color to display correctly in FF. The CSS code for the relevant sections is:

div.body{
margin: 0px auto 0px 0px;
clear: both;
width: 600px;
vertical-align: top;
text-align:left;
background-color: #fafad2;
/*background-color: #FFF1D5; */
padding: 5px 3px 0 3px;
}
div.colLeft {
float: left;
width: 285px;
vertical-align: top;
}

div.colRight {
float: right;
width: 280px;
vertical-align: top;

This works fine in IE6, but in FF 3.0.3 the background stops after 2 lines of the div.colLeft and div.colRight. Any suggestions on how to correct this are appreciated!

birdbrain

7:56 pm on Mar 11, 2009 (gmt 0)

Hi there tinkerbell,

and a warm welcome to these forums. ;)

From the minimal code that you have supplied, this solution has to be my guess...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
div.body{
margin:0 auto;
width:600px;
background-color:#fafad2;
padding: 5px 3px 0 3px;
}[blue]
div.body:after {
content:'';
display:block;
clear:both;
}[/blue]
div.colLeft {
float:left;
width:285px;
}
div.colRight {
float:right;
width:280px;
 }
</style>
</head>
<body>
<div class="body">
<div class="colLeft">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>
<div class="colRight">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>
</div></body>
</html>

birdbrain

tinkerbell

8:42 pm on Mar 11, 2009 (gmt 0)

Hello birdbrain,
Your brilliant! I've tried for weeks to get this code corrected, and now it works. Many thanks.
Thank you too for the welcome. Lucky for me I happened on the forum. I didn't want to supply too much unnecessary code, but apparently I gave just enough. I understand the forum is for all to contribute. Don't know how much help I can offer anyone, but I certainly will when I can.
Thank you again!
tinkerbell

birdbrain

9:02 pm on Mar 11, 2009 (gmt 0)

No problem, you're very welcome. ;)

p.s. asking for a solution is as much a contribution to the forum as supplying a solution. :)