Background only showing up in IE

Mr Creeky · 11-28-2008, 02:32 PM

Made a simple page after spending hours on my main page trying to fix this problem.

When I add float:left; & float:right; The background color of #fff disappears but only in anything other than IE.

This is my first attempt at a site without using <table> at all so be kind

http://www.caitsolutions.com/test.html

drhowarddrfine · 11-28-2008, 03:30 PM

Validate and fix your html errors first. Then, ignore what IE is doing and get it working in FF.

tomws · 11-28-2008, 03:43 PM

Get and use the Firebug extension for Firefox. One good thing about it is that when you bring up the html and hover your mouse over the tags, you see where the browser is placing your containers - and it's not always where you think they should be.

In your case, the div containing the 2 lists collapses - it doesn't wrap the 2 lists as you'd expect. That's why you're not seeing the white background. Adding a <div style="clear:both"></div> after the last ul "stretches" it again to contain the two lists. After using floats, be sure to use a clear.

Excavator · 11-28-2008, 04:08 PM

Hello Mr Creeky,
This will clear your floats -

Code:

#wrapper {
	width:760px;
	overflow:auto;
	margin: 15px auto 0px auto;
	text-align:left;
	background-color: #FFF;
}

Read about that here.

Excavator · 11-28-2008, 04:29 PM

Instead of using a ul to float your text left/right it might be better to use divs. Like this -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Test</title>
<style type="text/css">
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000;
	background: #E3EEF9 url(http://www.caitsolutions.com/images/layout/sky.png) repeat-x;
}
* {
	margin: 0;
	padding: 0;
}
#wrapper {
	overflow: auto;
	width: 760px;
	margin: 15px auto 0px auto;
	text-align: left;
	background: #FFF;
}
#leftside {
	margin: 10px 0 0 10px;
	width: 380px;
	float: left;
}
#rightside {
	margin: 10px 10px 0 0;
	width: 330px;
	float: right;
}
#wrapper p {
	margin-top: 15px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="leftside">
        <p>
        	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
            minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
            aliquip ex ea commodo consequat.
        </p>  
        <p>
        	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
            minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
            aliquip ex ea commodo consequat.
        </p>  
    <!--end leftside--></div>
    <div id="rightside">
        <p>
        	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
            minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
            aliquip ex ea commodo consequat.
        </p>  
        <p>
        	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
            minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
            aliquip ex ea commodo consequat.
        </p>  
        <p>
        	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
            minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
            aliquip ex ea commodo consequat.
        </p>  
    <!--end rightside--></div>
<!--end wrapper--></div>
</body>
</html>

Mr Creeky · 11-29-2008, 12:34 AM

Thanks for your help guys, i have got the page working now.

I looked at the html Validate but did not understand the errors it said that page has. To me the page looked ok but it gave an error on things like this, "<br /><br />"

drhowarddrfine · 11-29-2008, 02:49 AM

I don't see that error but what do you not understand? It says you are missing tags and the places you are missing them. Even though the page looks OK now doesn't mean it will stay that way as you add things or it will look good in every browser.