SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Bad Browser?

  1. #1
    SitePoint Zealot shim's Avatar
    Join Date
    Jan 2003
    Location
    USA
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bad Browser?

    hello all,

    i have learned a lot in the process of creating my website: www.importrival.com. i, however, have a bit of a problem now.

    the site displays correctly in netscape6. but, in ie5, there is a LARGE gap between the header and the rest of the page AND the dotted vertical line between the menu and the photos is NOT present in ie5.

    i'm not quite sure what you need in order to help me but here's the css:

    #header {
    margin-top: 10px;
    margin-left: 10px;
    color: #000;
    height: 55px;
    }

    #footer {
    clear: both;
    width: 800px;
    margin-left: 0px;
    text-align: center;
    font-family: verdana,trebuchet,sans-serif;
    font-size: 11px/12px;
    padding: 3px;
    border-top: 1px dotted #999;
    color: #000;
    }

    #menu {
    position: absolute;
    left: 10px;
    width: 170px;
    margin-left: 10px;
    margin-top: 40px;
    margin-bottom: 20px;
    font: 11px/12px verdana,trebuchet,sans-serif;
    color: #333;
    padding: 0px 3px 3px 3px;
    border-right: 1px dotted #999;
    }

    #rightcol {
    position: absolute;
    left: 530px;
    top: 15px;
    width: 210px;
    font: 11px/12px verdana,trebuchet,sans-serif;
    color: #333;
    padding: 0px 3px 3px 3px;
    }

    #nav {
    position: absolute;
    left: 225px;
    top: 15px;
    width: 300px;
    padding: 0px 5px 5px 5px;
    }


    #content {
    position: absolute;
    left: 250px;
    top: 40px;
    width: 300px;
    padding: 5px;
    }

    all help will be much appreciated.

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is coming from your use of margin-top: 40px; in the menu declaration block.

    You shouldn't really be using entirely absolute positioning for this type of layout.
    If you do, then you'll need to double-check all the height attributes you've set for the various elements/divs.

    You've given the header a height of 55px although its content is actually 100px high.
    This kind of discrepency can play havoc with absolutely placed divs.

    I suggest that you redo the layout withouth the use of 'absolute' positioning.
    Familiarise yourself with the float and clear attributes of css and you'll be able to reproduce that simple layout easily.

    See also here for 'non-absolute' and hybrid css layout models:
    http://www.thenoodleincident.com/tut...son/boxes.html
    (specifically: http://www.thenoodleincident.com/tut...on/basic4.html)

    http://www.bluerobot.com/web/layouts/
    (specifically: http://bluerobot.com/web/layouts/layout3.html)

    http://www.thenoodleincident.com/tut...son/index.html
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


Bookmarks

Posting Permissions

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