Member Avatar for stonest123

I've just started styling a website that i've designed but i have hit a problem straight away. that problem is that when i create a div for all my content to go into and try to give it a background color, it doesn't do anything, and if i give it a height there is still a white background around the edges..

My code for the site:

<html>
<body>
<link rel="stylesheet" href="/mainmenu.css" type="text/css">
<div id="body">

<?php
$conn=odbc_connect('backuplogs','','');
if (!$conn)
{exit("Connection Failed: " . $conn);}
 
$sql="SELECT DISTINCT Location FROM BackupLog";
$rs=odbc_exec($conn,$sql);
?>



<div id="content">
<form action="getinfo.php" method="POST">
<select name=t1>



<?php
while (odbc_fetch_row($rs))
{
$location=odbc_result($rs,"Location");

echo "<option>";
echo $location;
}
?>



</select>

<select name=t2>



<?php
$sql2="SELECT DISTINCT Responsible FROM BackupLog";
$rs2=odbc_exec($conn,$sql2);

while (odbc_fetch_row($rs2))
{
$responsible=odbc_result($rs2,"Responsible");

echo "<option>";
echo $responsible;
}
odbc_close($conn);
?>

</select>

<input type=Submit value=Search>
</div>
</div>
</body>
</html>

the css file:

#body {
	background-color: #104E8B;
	 }
 
#content {
	background-color: #104E8B;
	 }

Thanks for any help

  • 5 Contributors
  • 8 Replies
  • 419 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by pakishpk

Dani AI

Generated

The white “frame” almost always comes from the browser’s default page margins or from the page container not filling the viewport. A reliable fix: move the stylesheet into a proper head, reset html/body margins, and apply the page color to an element that actually spans the full page (either the real body/html or a wrapper that fills 100%). Avoid naming an element body as an id to reduce confusion with the body element.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Backup Log</title>
  <link rel="stylesheet" href="/mainmenu.css" />
</head>
<body>
  <div id="siteWrapper">
    <!-- PHP-generated form and content -->
  </div>
</body>
</html>
/* ensure page color reaches the viewport edges */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* full-page wrapper that keeps the color even when content is short */
#siteWrapper {
  min-height: 100%;
  background: #104E8B;
}

/* content box on top of the page color */
.content {
  max-width: 1000px;
  margin: 0 auto;
  background: #ffffff;
  padding: 20px;
}

Quick troubleshooting checklist:

  • Confirm the CSS file is linked in the head and actually loads (Network tab shows 200).
  • Inspect the computed styles (DevTools) to see which selector sets the background and whether margin or padding is present on body or html.
  • Use a DOCTYPE (e.g., HTML5) to avoid quirks-mode layout differences.
  • Replace ambiguous id names like body with siteWrapper or .page so CSS/JS remain clear.
  • Validate markup for unclosed tags (missing </form>/</option> can produce strange rendering).

This pulls together points from (set the page-level background), (avoid ambiguous id names and use a doctype), and (validate markup). The single most common root cause for the white border is the default body margin—resetting it and ensuring the stylesheet is applied fixes the issue.

Recommended Answers

All 8 Replies

Member Avatar for Borzoi

Instead of wrapping the whole site in a <div> tag, set the body to have a background colour in the CSS:

body
{
  background-color: #104e8b;
}

The reason why you're getting the white border is because you're wrapping it all in a <div> which naturally has a bit of padding all around.

Also, here's some errors with your code:

-The link to the stylesheet should be in the <head> tag.
-You're missing a <head> and <title> tag.
-You haven't closed your <form> tag
-You haven't closed any of your <option> tags
-You haven't closed your link to the stylesheet or <input> tag (end with /> instead of just >)

Member Avatar for stonest123

Thanks Borzoi, the poor coding is due to me messing about with it getting annoyed and leaving it at that, admittedly i took out the head and title tag when playing around with the divs.

Where would i set the background color in the .css file then if not in a div?

Member Avatar for drjohn

And never use reserved words as your tag ids or classes!
eg body is a reserved word in html, and you use it as an id.
It is VERY bad practice to do that.

You can set the background-color to anything - to the body, an h1, h2, p, ul, you name it.

Oh, and do use a doctype, or you will trigger quirks mode, which is also a bad thing, as it is different in different browsers.

Member Avatar for stonest123

OK, I'll change that now.
so how do I change the background color for the whole page in the css file?
Thanks

Should also mention i cleaned up my tags and doctype etc..

Edited by stonest123 because: n/a
Member Avatar for teedoff

Again, delete the body id as you have it now. So then it would just be:

<html>
<body>

page here

</body>
</html>

Then, in your stylesheet create a rule like so:

body{
     background-color: grey;
}

One good thing is the html validator here. You should religiously validate your code there to catch any errors in coding you may have.

Now the body div you had is probably not causing your issues. I suspect its the poor coding you have. So fix those as well.

Edited by teedoff because: n/a
Member Avatar for pakishpk

Instead of wrapping the whole site in a <div> tag, set the body to have a background colour in the CSS:

Gary

Member Avatar for stonest123

Thanks everyone!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.