Getting non absolute divs flush with browser window?

Hi llplc,
I see you have set margin and padding to 0 for body, try adding html as wellhtml, body{margin:0; padding:0;}

Hope that helps.

Thanks for the tip, but it still won't sit flush.

Oddly enough it works (without using the code you supplied) in ie 5.2 on the mac. But in my other browsers it does not.

I may have to left align the site and use absolute positioning to get the look I want.

Hi llplc,
Sorry sometimes I can't see the forest for the trees.
The margin on the body wasn't the problem.

Try using a negative margin-top like:#container{margin-top:-12px;}

Hope that helps

Setting a negative margin does work, but it creates a problem with mac ie 5 because that browser was always interpreting things properly. A negative margin adversely affects the rest of the layout in ie 5.

But I discovered the problem. I went to your web site and then to the CSS Layout Generator and plugged in what I wanted. It created a layout that worked. Comparing them I found this:

from my original layout:

<div id="container">

<div id="header"><p>this is the header</p></div>

but when I do this:

<div id="container">

<div id="header"></div>

The container div sits flush. Can anyone explain this? I really don't understand it.

Hi llplc,
Possibly it the "P" tag being a block element reserves some space above it.
Try p{margin-top:0;}

Hope that helps.

Paragraphs have default top and bottom margins, so
zeroing the p margins will indeed fix the problem.

When a block element like a div has another BE inside
it, and that inner BE has vertical margins, the inner margins
will actually protrude from the div unless the div has either
borders or padding. That's what the W3C requires, no lie.

Sounds crazy, but there's defensible reasons for doing it
that way. I understand there was a major debate over
this issue...

Thanks guys. I didn't realize that the P tag reserved some space above it. I've got things working nicely now.

Could I trouble you for one more piece of help?

I have two versions of my nav. One is done using a UL displayed inline and the other is images with old js code (the latter being a backup if I can't get the plain text to work).

In all mac browsers the plain text (UL) version works beautifully. On the pc, however, at least IE does not render the llist the way the mac does. Basically, IE win ignores the padding that has been applied to the list items.

here's the url:
http://www3.sympatico.ca/patrick_cote/

The left border line should extend below the text and when you mouseover the blue background should be visible below the text.

If this is too complicated to fix I'll use the images, but I'd really like to get it working in windows.

thanks again

Hi llplc,
The problem is caused by IE's rendering of the box model.
Put "border-bottom:solid 1px #FFFFFF;" in your "#nav ul li" and "display:block" in "#nav li a "

Hope that helps