CSS background just wont load.. Confusing.

@NerdygeekMay 13.2010

I have check this code a few times and can’t see any errors in it yet it still won’t load the body background image. I have no idea why because everything to me looks fine.

Here is the HTML

[CODE]<!– Doctype : Choose one and delete this comment –> <!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>

<title> </title>

<!– Meta Tags –> <meta http-equiv=”content-type” content=”application/xhtml+xml; charset=utf-8″ /> <meta name=”robots” content=”index, follow” />

<meta name=”description” content=”” /> <meta name=”keywords” content=”” /> <meta name=”author” content=”” />

<!– Favicon –> <link rel=”shortcut icon” href=”” />

<!– CSS –> <link rel=”stylesheet” href=”style.css” type=”text/css” /> <!– RSS –> <link rel=”alternate” href=”” title=”RSS Feed” type=”application/rss+xml” />

<!– JavaScript : Include and embedded version –> <script src=”” type=”text/javascript”></script>

</head>

<body> <div id=”wrapper”> <!– start wrapper –> <div id=”nav”> <!– start nav –> </div> <!– end nav –> <div id=”feature”> <!– start feature –> <img src=”images/fimg.png” alt=”Blinds Images” /> </div> <!– end feature –> <div id=”body”>

<div id=”content”> <!– start main content –>

Mark

</div> <!– end main content –>

<!– Start side –> <div id=”side”> <div class=”box”> <!– contact form –> <div id=”cbox”> <h3>Quick Contact & Call Back Form</h3> <form> <input type=”text” name=”name” size=”32″></textarea> <input type=”text” size=”32″></textarea> <input type=”text” size=”32″></textarea> <textarea rows=”15″ cols=”32″ name=”message”></textarea> </form></div> </div> </div>

</div> </div> </body> </html>[/CODE]

Here is the CSS.

[CODE]*{ margin:0; padding:0}

#wrapper {width: 1000px; margin: 0 auto;}

#nav {background: url(images/nvbg.png) repeat-x; height:54px;}

#feature{background: url(images/fbg.png) repeat-x; height:242px; }

#feature img {float: right; margin-right: 22px; margin-top: 22px;}

#body {background: url(images/conbg.jpg) repeat-x;}

#content {float: left; width: 699px;}

#side {float: right; width: 300px;}

#footer {background: url(images/ftbg.jpg) repeat-x; height: 150px;}

[/CODE]

Do you see anything wrong with the id “body” because that is the element giving the problem?

Thanks all.

to post a comment

CSS

8 Comments(s) _↴

@thraddashMay 13.2010 — #[B]body[/B] may be a reserved word, try changing it to something else.

@NerdygeekauthorMay 13.2010 — #[B]body[/B] may be a reserved word, try changing it to something else.[/QUOTE]

It's not as I use it on all my designs and it is working on them.

Thanks for the suggestion though.

You didn't see any problems with the code I guess?

I can't see one single error but yet it still won't work :-(

@thraddashMay 13.2010 — #Looks like all your content is [B]float[/B]ing... so your body has no [B]height[/B].

Try adding a [CODE]<div style="clear: both;"></div>[/CODE] before the end of the body <div> tag. Or set a [B]height[/B] in the #body style.

@NerdygeekauthorMay 13.2010 — #Looks like all your content is [B]float[/B]ing... so your body has no [B]height[/B].

Try adding a [CODE]<div style="clear: both;"></div>[/CODE] before the end of the body <div> tag. Or set a [B]height[/B] in the #body style.[/QUOTE]

Thank you. Got it to work. I forgot about clearing when I'm using the floating Divs. Thank god for forums and kind people.

Especially you today.

:-)

@thraddashMay 13.2010 — #Try here...

[CODE]<div id="wrapper"> <!-- start wrapper -->
 
  <div id="nav"> <!-- start nav -->
  </div> <!-- end nav -->
 
  <div id="feature"> <!-- start feature -->
   <img src="images/fimg.png" alt="Blinds Images" />
  </div> <!-- end feature -->
 
  <div id="body">
 
   <div id="content"> <!-- start main content -->
   Mark
   </div> <!-- end main content --> 
 
   <!-- Start side -->
   <div id="side">
   <div class="box">
   <!-- contact form -->
   <div id="cbox">
   <h3>Quick Contact & Call Back Form</h3>
   <form>
   <input type="text" name="name" size="32" />
   <input type="text" size="32" />
   <input type="text" size="32" />
   <textarea rows="15" cols="32" name="message"></textarea>
   </form>
   </div>
   </div>
   </div>
 
   [COLOR="Red"]<div style="clear: both;"></div>[/COLOR]
 
  </div>
 </div>[/CODE]

@NerdygeekauthorMay 13.2010 — #Thank you.

I was able to get it to work without adding the clear as the footer image was the right width.

I just had to add a float left to the body id and that sorted it.

Thanks again.

@thraddashMay 13.2010 — #Your right, setting the body to float as well would fix the problem.

In my opinion floating content causes hassles so I try and neutralise it as soon as possible.

I'm guessing your footer now does the clear instead?

@NerdygeekauthorMay 14.2010 — #I didn't need to clear the floats at all.

Also in #CSS _↴

Major Time Sensitive Layout issue...headache i want to be skilled professional in css IE has a 22px gap in the footer...

Success!

Help @Nerdygeek spread the word by sharing this article on Twitter...

Tweet This

CSS background just wont load.. Confusing.

8 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS background just wont load.. Confusing.

8 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #CSS _↴