Results 1 to 5 of 5

Thread: Float pushing down content in IE

  1. #1

    Float pushing down content in IE

    I have encountered a problem in IE where my right hand navigation is pushing the content down to below it, my code works in safari and in Firefox.

    Live Page: http://drafts.1stclassmedia.com/mph

    I've stripped out all my margins and padding but I cant see what else it owuld be,can anyone help?

    XHTML:
    Code:
    <body>
    <div id="container">
    <div id="sidebar">
    <ul>
    <h2>Navigation</h2>
    <li><a href="#" title="home">Home</a></li>
    <li><a href="#" title="home">Home</a></li>
    <li><a href="#" title="home">Home</a></li>
    <li><a href="#" title="home">Home</a></li>
    </ul>
    </div>
    <div id="bodyblock">
    <div id="header"><img src="image1.gif" alt="header" /></div>
    <div id="navbar">&nbsp;</div>
    <div id="advert"><img src="image2.gif" alt="castle" /></div>
    <div id="main">
    <h1>Header</h1>
    <p>Content here</p>
    </ul>
    </div><!--main-->
    </div>
    <!--bodyblock-->
    <div id="footer"><p>footer her</a></div>
    </div><!--container-->
    </body>
    CSS:
    Code:
    body {
    margin:0px;
    background:url(../gifs/back.gif) repeat-x #333333;
    font-size:62.5%;
    text-align:center;
    }
    
    #container {
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    background:url(../gifs/backctr.gif) repeat-y;
    width:800px;
    }
    
    #bodyblock {
    margin-top:0px;
    width:600px;
    }
    
    #header {
    width:580px;
    height:117px;
    margin:0px 10px;
    padding:0px;
    background:url(../gifs/header.gif) no-repeat;
    }
    
    #header span {
    display:none;
    }
    
    /*sidebar*/
    #sidebar {
    float:right;
    margin-top:0px;
    text-align:left;
    width:200px;
    }
    
    #sidebar ul {
    padding:0px 5px;
    margin-bottom:10px;
    }
    
    #sidebar li {
    padding: 0px 5px;
    list-style-type:none;
    }
    
    #sidebar p {
    font:1.1em Arial, Helvetica, sans-serif;
    padding:0px 10px;
    color:#fff;
    }
    
    #sidebar a {
    font:1.0em Arial, Helvetica, sans-serif;
    color:#CCCC99;
    text-decoration:underline;
    }
    
    #sidebar a:hover {
    color:#FFFFFF;
    background-color:#CCCC99;
    text-decoration:none;
    }
    
    #sidebar li a {
    font:1.2em Verdana, Arial, Helvetica, sans-serif;
    padding:3px;
    color:#fff;
    border-bottom:1px #CCCC99 solid;
    text-align:right;
    text-decoration:none;
    display:block;
    }
    
    # html body #sidebar li a {
    width:154px;
    padding:2px;
    }
    
    #sidebar li a:hover {
    background-color:#CCCC99;
    color:#000;
    text-decoration:none;
    }
    
    /*main styling*/
    
    h1 {
    font:1.4em Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#000;
    padding-bottom:2px;
    border-bottom:1px dotted #CCCC99;
    }
    
    h2 {
    font:1.2em Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#333;
    background:url(../gifs/sidenav.gif) repeat-x;
    height:24px;
    width:180px;
    padding:0.5em 0.2em;
    margin:0px 10px;
    }
    
    #advert {
    width:560px;
    height:276px;
    padding:0px 20px;
    }
    
    #navbar {
    width:580px;
    height:8px;
    border:1px solid #333;
    background:url(../gifs/nav.gif) repeat-x;
    margin:2px 10px;
    }
    
    #main {
    width:560px;
    margin:5px 0px;
    padding:20px;
    }
    
    #main p {
    font:1.2em Arial, Helvetica, sans-serif;
    line-height:1.3em;
    color:#333;
    text-align:left;
    }
    
    #main ul {
    font:1.2em Arial, Helvetica, sans-serif;
    list-style-type:disc;
    }
    
    #main li {
    padding:1px 0;
    }
    
    #main a {
    font:1.2em Arial, Helvetica, sans-serif;
    color:#CCCC66;
    text-decoration:underline;
    }
    
    #main a:hover {
    color:#333;
    background-color:#cccc99;
    text-decoration:underline;
    }
    
    #footer {
    height:18px;
    background:url(../gifs/footer.gif) no-repeat;
    clear:right;
    width:800px;
    }
    
    #footer p {
    padding:0px 20px;
    font:1.1em Arial, Helvetica, sans-serif;
    color:#CCCC99;
    }
    
    #footer a {
    font:1.0em Arial, Helvetica, sans-serif;
    color:#CCCC99;
    text-decoration:underline;
    }
    
    #footer a:hover {
    font:1.0em Arial, Helvetica, sans-serif;
    color:#333;
    }

  2. #2
    Have you validated your code?

    http://validator.w3.org/check?uri=ht...edia.com%2Fmph

    For you CSS, try setting all margins and padding to 0 that way only margins and adding you specify are added.

    * {margin: 0; padding:0;}
    body {margin: 0; padding:0;}

  3. #3
    I have done as you suggested but if you look at my page in IE there is still a gap at the top.

    Its driving me nuts I've built loads of sites before with this layout, usually they have a header so I just removed the DIV and it doesnt work. THink I've missed something daft!

  4. #4
    if you put borders around the bodyblock & sidebar divs it helps you see the problem. They are too big (in ie) to fit side by side. You'll have to shrink one or other then you should be fine.

  5. #5
    Try as adman suggested. uasually I define inner DIVs width by percentages. so the mainblock and rightbar would occupy percentage of the full 100% of the container.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012