SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    Shropshire
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overlapping divs problem in IE

    I have spent about a day trying to get the page layout at http://www.echocd.co.uk/clients/cartoon to sit properly and have just solved a problem of getting my middle columns to appear equal (after much research and reading on here).

    My one remaining problem though is that in IE my top and bottom navigation bars are behaving strangely. The top left is overlapping the top right by a few pixels and the bottom left is slightly to short (doesn't meet with bottom right).

    I have tried changing the widths but they are contained within left and right column divs and are set to the same width and it doesn't resolve it or it makes it wrong in Moxilla etc.

    The relevant CSS for this area of the page is:

    Code:
      
    #leftcol {
     width: 588px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     text-align: left;
     padding-right: 16px;
     padding-left: 16px;
     padding-bottom: 4px;
     padding-top: 6px;
     background-color: #FFFFFF;
    }
    #content {
     text-align: left;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     color: #FFFFFF;
     padding-right: 16px;
     padding-left: 16px;
     padding-top: 4px;
    }
    #topnavleft {
     background-color: #FFBE37;
     width: 588px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     color: #FFFFFF;
     text-align: left;
     padding-right: 16px;
     padding-left: 16px;
     padding-top: 4px;
     padding-bottom: 4px;
     height: 10px;
    }
    #topnavright {
     background-color: #AA2B00;
     text-align: left;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     color: #FFFFFF;
     padding-right: 16px;
     padding-left: 16px;
     padding-top: 4px;
     padding-bottom: 4px;
     height: 10px;
    }
    #bottomnavleft {
     background-color: #AA2B00;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     color: #FFFFFF;
     text-align: left;
     padding-right: 16px;
     padding-left: 16px;
     padding-top: 4px;
     padding-bottom: 4px;
     width: 588px;
     height: 10px;
     float: left;
    }
    #bottomnavright {
     background-color: #FFBE37;
     text-align: left;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     color: #FFFFFF;
     padding-right: 16px;
     padding-top: 4px;
     padding-bottom: 4px;
     height: 10px;
     margin-left: 590px;
    }
    #containerleft {
     width: 588px;
     float: left;
     background-color: #FFFFFF;
     position: relative;
     height: 100%;
     
    }
    #containerright {
     margin-left: 620px;
     background-color: #FFCC66;
    }
    #wrap {
     background-color: #FFCC66;
     background-image: url(../images/middlebg.jpg);
     background-repeat: repeat-y;
     background-position: left top;
    }
    #clear {
     clear: both;
    }
    Any help would be most appreciated as I am nearly there and it is just this problem stopping me from showing the client.

    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Its the three pixel jog in IE thats causing you problems.

    Add these styels at the end of your style sheet.
    Code:
    * html #bottomnavleft {margin-right:-3px;}
    * html #bottomnavright {margin-left:587px}
    * html #containerleft {margin-right:-3px;}
    * html #containerright {margin-left:617px;}
    #clear {
     clear: both;
     overflow:hidden;
     height:1px;
     margin-top:-1px;
    }
    They must come after any styles of the same name.

    I've also added a better clearing div as above. Remove the html that syas <br style="clear:both" /> and use the div version only.

    Have a look at the FAQ sticky thread on floats for more detailed explanation

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    Shropshire
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for that Paul - it works brilliantly.

    I did look at many threads (both sticky and not) and tried so many different things I got to a point where it was becoming messy so I thought it best to ask the question instead :-)

    Anyway, thanks again.


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
  •