HTML Forum

**evil_twinkie** · 11:44 AM

I honestly can't figure out what I'm doing wrong, so it came down to my final resort: asking.

My problem is I want this ugly blue background to fill the entire page, but for some silly reason it will only go as far as the "nav" div, unless I specify in the css body tag a certain pixel height (% don't change anything)

The Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
    <head>
        <title> </title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    </head>
    <body>
        <div id="global">
            <div id="nav"></div>
            <div id="content"></div>
            <div id="left"></div>
            <div id="bottom"></div>
        </div>
    </body>
</html>

and..

Code:

body { 
    background: blue;
    margin: 0px;
}

#global {
    width: 760px;
    height: auto;
    margin: 0px auto;
}

#nav {
    width: 760px;
    height: 200px;
    background-color: black;
}

#content {
    clear: right;
    float: right;
    width: 680px;
    height: 200px;
    background-color: gray;
}

#left {
    clear: left;
    float: left;
    width: 80px;
    height: 200px;
    background-color: green;
    
}
#bottom {
    clear: both;
    float: left;
    width: 760px;
    height: 40px;
    background-color: red;
}

The Result:

See that whitespace there? That should be filled in with the blue background color.

Any help is GREATLY appreciated!

**Maxamillious** · 11:47 AM

You need to place an id/class into your body tag that contains your desired background color.

**GrandpaD** · 12-12-2007, 12:25 PM

What brower are you using? I put your code on a server and it looked fine in IE6, Firefox and Safari.

My only suggestion would be to completely define the body margins in the body selector.

Code:

 
margin: 0px 0px 0px 0px;

**evil_twinkie** · 01:31 PM

Thanks for the quick responses-

Quote:

Originally Posted by Maxamillious

You need to place an id/class into your body tag that contains your desired background color.

What exactly do you mean? I tried giving a class name to the body tag in my css script and applying that to the body tag in the xhtml code, but it didn't change anything:

Code:

body.main { 
    background-color: blue;
    margin: 0px 0px 0px 0px;
}

and

<body class="main">

Quote:

Originally Posted by GrandpaD

What brower are you using? I put your code on a server and it looked fine in IE6, Firefox and Safari.

My only suggestion would be to completely define the body margins in the body selector.

I test it with both IE5, 6, and Firefox, on two different computers and had the same results throughout. I adjusted the margin like you said and it also had no effect :/

OH! One thing I forgot to mention- When I save the page filetype as .html the background color works just fine. However, since I'm writing it in xhtml aren't I supposed to save it as .xhtml? The validator on W3C told me I was supposed to when I checked via direct upload.

**davemies** · 12-12-2007, 02:05 PM

just this
body {
background-color: blue;
margin: 0px 0px 0px 0px;
}

if that doesn't work post a url

are you using a strict doctype?

**Maxamillious** · 12-12-2007, 02:08 PM

I usually avoid color names. Try using a color number instead.

Code:

.background-color { background-color: #0000ff; }


and


<body class=“background-color”>

**GrandpaD** · 12-12-2007, 02:12 PM

Quote:

Originally Posted by evil_twinkie

OH! One thing I forgot to mention- When I save the page filetype as .html the background color works just fine. However, since I'm writing it in xhtml aren't I supposed to save it as .xhtml? The validator on W3C told me I was supposed to when I checked via direct upload.

I'm don't know. But I put it on a server with both extensions and both display properly.

It may have something to do with your editor. I use an old Allaire Homesite program which is pretty basic and upload via FTP.

BTW, this pretty much pushes the limit of my knowledge.

**evil_twinkie** · 02:26 PM

Quote:

Originally Posted by davemies

if that doesn't work post a url
are you using a strict doctype?

It's not up on the net, and yes I am using xhtml strict

Quote:

Originally Posted by Maxamillious

I usually avoid color names. Try using a color number instead.

I usually do too. In this case I was just futzing around with this layout and wanted to make everything straight forward. Using the hex code of a color doesn't change anything. :/

Quote:

Originally Posted by GrandpaD

I'm don't know. But I put it on a server with both extensions and both display properly.
It may have something to do with your editor. I use an old Allaire Homesite program which is pretty basic and upload via FTP.
BTW, this pretty much pushes the limit of my knowledge.

That's really odd it will work for you. My editor is notepad, heh. It's been a couple of years since I wrote up a website and I noticed there are some new standards, so I'm just giving myself a refresher.

This is just really frustrating. I've even tested it on different operating systems, vista and xp, in multiple versions of IE and Firefox. Right now the only way I can make it work is if I use the .html extension instead of .xhtml - but that doesn't explain at all the result of the background only appearing in the "nav" div...

**LadynRed** · 12-12-2007, 02:49 PM

Ok, the problem is that you have not properly cleared your floated div. Putting the clear on the floated element is not the way to do it as it seldom works properly.

http://css-discuss.incutio.com/?page=ClearingSpace

**chrishirst** · 12-12-2007, 04:37 PM

your use of .xhtml is part the problem. Unless the server is set to serve out pages with that extension as a ContentType of text/html the user agent will interpret it as something else, probably even text/plain.

The extension could be anything your server supports as text/html. .php, .asp, .htm, .html, shtml etc.

**evil_twinkie** · 12-12-2007, 06:56 PM

Quote:

Originally Posted by LadynRed

Ok, the problem is that you have not properly cleared your floated div. Putting the clear on the floated element is not the way to do it as it seldom works properly.
http://css-discuss.incutio.com/?page=ClearingSpace

AAah okay, that was what I wanted to know. I wasn't sure if I was even using the appropriate syntax. Thanks for the link.

Quote:

Originally Posted by chrishirst

your use of .xhtml is part the problem. Unless the server is set to serve out pages with that extension as a ContentType of text/html the user agent will interpret it as something else, probably even text/plain.
The extension could be anything your server supports as text/html. .php, .asp, .htm, .html, shtml etc.

Okay thanks, I'll keep that in mind. Right now this page isn't even up on any server, it's just chillin' on my computer. That's good to know though if I ever run into that problem.

Well I'm pretty sure I've got a good handle on the problem now. Thanks everyone for the quick help! (Wow, all of these replies in one day, not bad

)

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!