Body background going through div wrapper

HTML & CSS
1 
<head>

<title>Untitled Document</title>
<style type="text/css">
ul
{
padding-left: 0;
margin-left: 0;
background-color: #f81e1d;
color: White;
float: left;
width: 930px;
font-family: arial, helvetica, sans-serif;
}
ul li { display: inline; }
ul li a
{
padding: 0.2em 1em;
background-color: #f81e1d;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
ul li a:hover
{
background-color: #fc9392;
color: #fff;
}
</style>
</head>

<body style = "background:#fd5857 url('background.gif') repeat-x top;">
<div id = "wrapper" style="width:950px; margin:auto; background-color:white; margin-top:0;">
<div style = "width:930px; background-image:url('image1.gif'); background-repeat:repeat-x; margin-bottom:0:">
<img src = "image2.gif" />

</div>

<div style = "margin-top:0;">

<ul style = "margin-top:0; border-top:1px white solid;">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

<div id ="content">
<div style = "float:left;">
<img src="image3.jpg" width="310" height="400" alt="" style="background-color: #F81E1D ;margin:0; " />
</div>

<div style = "float:left;margin-left:10px;">
<img src="image4.jpg" width="290" height="400" alt="" style="background-color: #F81E1D; margin:0;" />
</div>

<div style = "float:left; margin-left:10px;">
<img src="image5.jpg" width="310" height="400" alt="" style="background-color: #F81E1D; margin:0;" />
</div>

</div>
</div>

</body>

I’m having trouble with my background. For some reason the body background is going through the div wrapper even though the div wrapper background is styled as white.

Could anyone suggest a way of fixing this.

2

Why are you using inline styles on some elements? Put everything in the <head>, or better still, in an external stylesheet. According to the hierarchy of css, inline styles override styles embedded in the <head>. Maybe the fact that you have styled the body inline has something to do with it wiping out your white background. BTW, I am not an expert.

3

Hi,

You need to clear your floats so that the background on the wrapper extends around the floats (see the css faq on floats).

e.g.


#wrapper{overflow:hidden}

If you need visible overflow then use another method for clearing (see faq).

Floats are removed from the flow and to make a parent wrapper realise the floats are there you have to clear them before the closing div of the parent and then the flow of the document is regained.

Also make sure you have a full doctype or IE will revert to quirks mode and behave like a browser made last century.

Avoid inline styles like the plague (even for demos) as it makes this just so much harder.:slight_smile: