Simon Dean <sjdean@simtext.plus.com> wrote:
[color=blue]
>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.[/color]
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.
[color=blue]
>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.[/color]
[color=blue]
><div id=banner1>
> <p>some text</p>
></div>
><div id=banner2>
> <p>some text</p>
></div>[/color]
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 <steve@pugh.net> <http://steve.pugh.net/>
