PDA

View Full Version : Tearing hair out! Wrapper BG



_SiD_
Mar 4th, 2010, 10:36 PM
Using this method to centre a 888px wide page in the centre of browser. It's my norm, use it all the time without a hitch. Until now. Everything lines up correctly, all <div>s are correctly positioned as if the wrapper is working but I can't get a background to display in either the "body" or the "page".

I use the tag #page as a wrapper. But it doesn't seem to be expanding with the content placed inside it. .

Checking the position of the #body & #page in Firefox shows them tucked away at the top of the page.

The code and CSS validate. I'm now like Gene Hackman at the end of "The Conversation" ripping everything to pieces.

I've stripped everything right down to the barebones but still nothing.

Anybody, somebody... HELP!!!!


#body {
margin: 0;
padding: 0;
text-align: center;
}

#page {
text-align: left;
margin: auto;
padding: 0px;
width: 888px;
background-color: #003a65;
}


<body>

<div id="page">

<div id="banner-diary"> <!--= differemt ID for each banner -->
</div> <!--= close banner -->

<div id="left-cont">
</div>

<div id="right-cont">
</div>

</div>


</body>
</html>

Excavator
Mar 4th, 2010, 10:56 PM
Hello _SiD_,
To center an element you need three things:

a DocType Declaration
an element with a width
that elements left/right margins set to auto


This seems to work fine...

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#body {
margin: 0;
padding: 0;
text-align: center;
}
#page {
text-align: left;
margin: auto;
padding: 0px;
width: 888px;
background: #003a65;
}
</style>
</head>
<body>
<div id="page">
<div id="banner-diary"> <!--= differemt ID for each banner -->
</div> <!--= close banner -->
<div id="left-cont">
</div>
<div id="right-cont">
</div>
</div>
</body>
</html>

_SiD_
Mar 5th, 2010, 12:45 AM
E,

thanks for quick response.

I have all three of those (only posted the structural part of the HTML, apologies) - full HTML below.

My problem is the content behaves as if it has centered successfully, but the wrapper doesn't behave as it should, i.e. doesn't expand to the full hight of the content it contains and display a background. It seems to be stuck at the top of the page.
Any ideas?

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

</style>
<title>??? Primary School | Diary </title>

<link rel="shortcut icon" href="../icon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/screen-test.css"/>
<link rel="stylesheet" type="text/css" media="print" href="../css/print.css" />
<link rel="stylesheet" href="index.html" type="text/css" />
<link rel="stylesheet" href="css/screen.css" type="text/css" />

</head>

<body>

<div id="page">

<div id="banner-diary"> <!--= differemt ID for each banner -->
</div> <!--= close banner -->

<div id="left-cont">
</div>

<div id="right-cont">
</div>

</div>


</body>
</html>

skywalker2208
Mar 5th, 2010, 12:52 AM
Can you post the full css or do you have a link so we can see this?

_SiD_
Mar 5th, 2010, 01:08 AM
This should be enough to give you a clue.

http://10on12.com/hairpulling/staff.html

When I use Safari to inspect each element and I mouse over "body" or "page" rather than the entire page/content being highlighted I get a thin strip at the stop of the page.

I think it's a conflict somewhere in the CSS as I've stripped the HTML down to it basics and still can't seem to pin it down.

Appreciate any thoughts.

S

Excavator
Mar 5th, 2010, 02:08 AM
That site is centered in FF3.6, IE8 and IE7.
The floats need cleared though, like this -
#page {
text-align: left;
margin: auto;
padding: 0px;
width: 888px;
background-color: #003a65;
overflow: auto;
}

See how clearing floats with overflow works (http://www.quirksmode.org/css/clearing.html).


When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

_SiD_
Mar 5th, 2010, 01:38 PM
Sorted.

Very much appreciated.

S