Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Relative Positioning/BG Color in NS

    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.

    Thanks.


    http://www.witchkraftracing.com/xml/secondarytest.asp

  • #2
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #3
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    'me,

    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?

    Thanks.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://css.maxdesign.com.au/floatutorial/

    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.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #5
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    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:

    www.witchkraftracing.com/xml/secondarytest.asp

    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?

  • #6
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    body, html {
      min-height: 100%;
      _height: 100%}
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •