9 replies [Last post]
llplc
Offline
newbie
Last seen: 15 years 45 weeks ago
Joined: 2003-11-13
Posts: 5
Points: 0

I'm working on a site for a client that I'm trying to do totally in css. One of the problems I'm having is that I cannot get a div to be flush with the top of the browser window if it's not absolutely positioned. Is this a limitation of css? Or is there a way to solve this problem?

here's the rough of the site:
http://www3.sympatico.ca/patrick_cote/

The container div is centred and holds all the other content. But it is about 10-15 pixels from the top of the window.

thanks[/url]

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

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.

llplc
Offline
newbie
Last seen: 15 years 45 weeks ago
Joined: 2003-11-13
Posts: 5
Points: 0

Getting non absolute divs flush with browser window?

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.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Getting non absolute divs flush with browser window?

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

llplc
Offline
newbie
Last seen: 15 years 45 weeks ago
Joined: 2003-11-13
Posts: 5
Points: 0

Getting non absolute divs flush with browser window?

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.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Getting non absolute divs flush with browser window?

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

Hope that helps.

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 15 years 47 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

Getting non absolute divs flush with browser window?

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

http//www.positioniseverything.net/

llplc
Offline
newbie
Last seen: 15 years 45 weeks ago
Joined: 2003-11-13
Posts: 5
Points: 0

Getting non absolute divs flush with browser window?

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

llplc
Offline
newbie
Last seen: 15 years 45 weeks ago
Joined: 2003-11-13
Posts: 5
Points: 0

Getting non absolute divs flush with browser window?

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Getting non absolute divs flush with browser window?

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