White Space on Top?

[Simon Dean]

Hello!

Im looking to try and get into CSS for formatting my sites. Seems like a
nice premise, and should allow easier design for the future. But gees,
Im having a hard time of it.

I would like to create something like at http://www.blargle.co.uk or
http://www.celebrityresearcher.co.uk without the tables.

I figure should be easy, to have two DIV rows, 100% width, and then have
three DIV columns underneath...

I couldn't even get past the two rows.

When I use absolute positioning, Firefox draws everything in the right
place, but doesn't give me 100% width. Unlike IE. However if I remove
the position property, Firefox does indeed draw the DIVS to the full
width of the screen.

Except, it also includes a white space at the top, like some kind of
margin! I've tried to set all margins to 0px and padding to 0px, but
still the white space on top remains - Unless I add a border, then it
all draws in the correct places.

Curiously, the differences between border 1px and border 0px seems to
just move the box while any text inside stays at the same position on
the screen.

Im confused...

I don't want to use border:1px and it seems most of everyone out there
uses borders, or separation between DIV elements, whereas I want to
retain my designs...

Sorry, I havent got any code on me, Im at work at the moment, and what I
have is at home, but I just wanted to run this past you. I am a newbie,
I have much to learn, I have searched, but can't find much in relation
to this particular issue. There's probably some glaringly obvious mistake.

Cheers
Simon

PS I'll try and post a URL tonight, but I think I have something like:

<div id=banner1>
<p>some text</p>
</div>
<div id=banner2>
<p>some text</p>
</div>

#banner1 {
background:#f00;
top:0px;
height:50px;
left:0px;
width=100%px;
}

#banner2 {
background:#0f0;
top:0px;
height:50px;
left:0px;
width=100%px;
}

[Steve Pugh]

Simon Dean <sj****@simtext.plus.com> wrote:

I figure should be easy, to have two DIV rows, 100% width, and then have
three DIV columns underneath...

I couldn't even get past the two rows.

When I use absolute positioning, Firefox draws everything in the right
place, but doesn't give me 100% width. Unlike IE. However if I remove
the position property, Firefox does indeed draw the DIVS to the full
width of the screen.
You should always set a width for absolutely positioned elements. If
you don't then, as you've seen, browser behaviour varies. But I doubt
that you need absolute positioning at all.
Except, it also includes a white space at the top, like some kind of
margin! I've tried to set all margins to 0px and padding to 0px, but
still the white space on top remains - Unless I add a border, then it
all draws in the correct places.

Curiously, the differences between border 1px and border 0px seems to
just move the box while any text inside stays at the same position on
the screen. <div id=banner1>
<p>some text</p>
</div>
<div id=banner2>
<p>some text</p>
</div>

The paragraphs have a default top margin. Under CSS margin collapsing
rules this will collapse with the top margin of the parent div. So you
end up with a margin above the div that is the larger of the margin
set on the div (default zero) and the margin set on the paragraph
(default about one line height). See
http://www.w3.org/TR/CSS21/box.html#x25

To prevent margin collapsing the div needs a non-zero amount of either
padding or border. Or you can remove the margin-top from the first
paragraph via the :first-child selector (not supported by IE but as IE
doesn't collpase margins properly not an issue).

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Simon Dean]

You should always set a width for absolutely positioned elements. If
you don't then, as you've seen, browser behaviour varies. But I doubt
that you need absolute positioning at all.

Yes, must wrap my head around what they all mean, absolute should be
fairly straight forward, but static and relative are two unknowns to me
at the moment.

Curiously, the differences between border 1px and border 0px seems to
just move the box while any text inside stays at the same position on
the screen.

<div id=banner1>
<p>some text</p>
</div>
<div id=banner2>
<p>some text</p>
</div>

The paragraphs have a default top margin. Under CSS margin collapsing
rules this will collapse with the top margin of the parent div. So you
end up with a margin above the div that is the larger of the margin
set on the div (default zero) and the margin set on the paragraph
(default about one line height). See
http://www.w3.org/TR/CSS21/box.html#x25

To prevent margin collapsing the div needs a non-zero amount of either
padding or border. Or you can remove the margin-top from the first
paragraph via the :first-child selector (not supported by IE but as IE
doesn't collpase margins properly not an issue).

Ahh, OK, I think I just about understand that... Failed to realise that
it would seem from this newbies point of view, that each html tag can
have a property... I forgot about the <p> tag!

There sounds like a hell of a lot to learn, but it all seems so
flexible and customisable... should be interesting.

Thank you very much for your kind help!

Cheers
Simon

[theo]

look at a few templates, to become familiar

http://wholives.com/tools/freestuff.htm