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 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    content pushed down in IE, any ideas?

    Hi folks,

    I have what's probably a common IE problem. My main content is getting pushed down below my right navigation bar. I can't figure it out. You can see it in IE at www.jontakiff.com/jonffbasement.html.

    Obviously, the main content is getting pushed down below the right navigation bar. The nav bar is floated right, so the content should float nicely left, but no, in IE6 it drops down. I have attempted playing w/margins and padding for all elements with no results. Any ideas? Here's some of my code which might explain the problem:

    The framework w/borders to try to help see the prob...

    *{border:1px solid red;}
    html,body{border:0;}

    #everything{margin:0px auto;background:url(images/headfinally5.jpg);background-repeat:repeat;}

    body{padding:0px;margin:0px;text-align:center;font-family:verdana;georgia;sans-serif;font-size:80%;line-height:1.6;}

    #wrap{width:79%;margin:0px auto;text-align:left;border:1px solid black;background-color:black;}

    /*rightnav and main section*/

    #rightnav{border:0px solid silver;float:right;width:28%;margin:0em 0em;padding:1em 0em .5em 0em;font-size:normal;}

    #main {color:black;border:2px solid red;
    background-color:#678aa7;font-weight:500;height:100%;
    margin-right:28%;margin-left:2em;margin-bottom:0em;
    margin-top:0em;padding:.75em 1.75em;}

    /*top navigation section*/

    #navbuttons{padding-bottom:5.5em;margin:0em;z-index:1;}

    Any ideas? I hate to ask since it's probably not a quick fix but after two hours of trying to figure it out, it's either get help or smash the monitor.

    Thanks in advance...

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    The problem was not within the code that you pasted.

    The primary cause is that IE6 expands boxes when contents gets too big.

    In your case, residing within your #main, you have several <div class="notes"> like
    Code:
    <div class="notes">
    <a href="#helpanchor" onclick="lyrics1();">Lyrics&nbsp;|</a>
    <a href="http://www.myspace.com/therobinquivers">
    &nbsp;&nbsp;Myspace</a>
    </div>
    together with the style
    Code:
    div.notes {
    height:1em;
    color:silver;
    border-top:1px solid silver;
    font-size:10px;
    margin:1% 0 0 80%;
    padding:0em 0em .4em 0em;
    }
    I have highlighted the problem in red. With 80% margin this gives you only 20% space for your contents. As you see even in Firefox, these <div>'s don't appear nicely with contents spilling over.
    Instead you should use,
    Code:
    div.notes {
    height:1em;
    color:silver;
    border-top:1px solid silver;
    font-size:10px;
    text-align: right;
    padding:0em 0em .4em 0em;
    }
    Now, the main div will still drop when images no longer fit in the liquid area. You might resolve this be e.g. adding some element in your top header with a certain width that you don't want your page to go below.

    Hope this helped

  • #3
    New Coder
    Join Date
    Oct 2006
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thank you

    Koyama, that is in fact the problem. Thanks so much, you saved me at least an hour of troubleshooting and taught me some new stuff.

    -Jon


  •  

    Posting Permissions

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