View Full Version : Relative Positioning/BG Color in NS

01-02-2004, 05:57 PM
Hey Guys,

I've been working on moving a site to a table-less design and have found a great deal of help here on the forum.

I'm currently running into a problem displaying my page in Netscape 7. It looks fine in IE 6, but it's fairly messed up in Netscape. The "cat" section isn't placed where it should be (has the black border and is laid on top of another box). The white background also doesn't stretch 100% down when you scroll on the page. The page is currently:

- XHTML validated
- CSS validated

I've been reading and searching, trying to find something to solve this, but haven't come across anything. Any help would be greatly appreciated.



01-02-2004, 07:53 PM
For the cat problem: Get rid of the relative positioning and float it. You'll also need to float every other element on the page, but that's not a problem (or if you don't want that many floats, put the things that need to be side-to-side in a non-positioned containing box).

For the 100% problem: You've currently got body { height: 100% } which means 100% of the viewport and not the document. Simply remove this property and it'll stretch the entire length of the document. It would fall short in IE as your page currently stands, but it has an annoying bug, it won't let things overflow. For example:
<div style="height: 10em">{20 lines of text here}</div>

(don't use inline styles in real pages, kids)The div will stretch the whole height of the text inside in IE, but in everything else, they'll do the appropriate action dictated by the overflow property.

01-02-2004, 08:18 PM

I changed everything to float:left; and that seems to work. However,

- What does float left DO exactly? I've read the definition and everything, but still don't totally understand it's use. More so, why does it need to now be "everywhere" in the CSS file?

Can you please explain the div/overflow usage with the white background? Are you saying I should be using the example code you listed? How does the "10em" specify a solution?


01-02-2004, 08:31 PM

might provide some help on the float property.

Basically an element is removed from the flow, shunted across to which ever side you specify and the rest of the content is wrapped around it.

01-02-2004, 10:14 PM
That does help Readme .. thanks for the link.

So I have most of it working. I don't completely understand the trick for getting the white background to extend the full height of the window.

Also, I'm not sure if it's just a Netscape bug, but this doesn't look the same in IE vs. NS:


If you see on the row with the "cat" box, and the longer box beside it, the left margin isn't the name on IE6 vs. NS7. I've tried manually setting each margin and it doesn't seem to make any difference. Is this a known problem?

01-03-2004, 05:40 PM
About the height stretching thingymabob: The easiest way to do it would have to be min-height: 100%; but sadly IE doesn't support min-height. It's still possible though, using the Underscore Hack (http://www.pixy.cz/blogg/clanky/cssunderscorehack/):
body, html {
min-height: 100%;
_height: 100%}