...

View Full Version : 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 :eek:

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 -


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

Read about that here. (http://www.quirksmode.org/css/clearing.html)

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 -
<!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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum