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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Big white space in Internet Explorer.

    Hello.

    I've been helping a friend create this web page ssmvs.110mb.com and it looks perfect in Firefox. In IE the main text is pushed down below the left menu but still in the correct position horizontally. I've looked on google for answers and played with widths on the css but cannot get it to behave as I want it to.

    Any help on resolving this would be greatly appreciated.

    Thanks

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Last week I had a simliar problem. The answer was to remove some margin from the left hand container. IE seems to add something to the margin and as it cannot get side by side, it obviously goes under.

    Hope this helps.

    I coudn't get to your css to check.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's my css. If you could have a look and let me know what you reckon the problem is that'd help loads.

    Thanks

    Mike

    /* Screen layout: */

    /***** Body and main container *****/

    body {
    width:770px;
    margin:0 auto;
    padding:0;
    line-height: 1.1;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font:76% Verdana,Tahoma,Arial,sans-serif;
    background:#f4f4f4 url(img/bg.gif) top center repeat-y;
    color:#404040;
    }

    #wrap {
    background:#ffffff;
    color:#404040;
    margin:0 auto;
    width:760px;
    }

    /***** Various tags *****/

    a {
    text-decoration:none;
    font-weight:bold;
    color:#286ea0;
    background-color:inherit;
    }

    a:hover {
    text-decoration:underline;
    color:#286ea0;
    background-color:inherit;
    }

    a img {
    border:0;
    }

    p {
    margin:0 0 1.4em 0;
    }

    /***** Header *****/

    #header {
    text-align: left;
    margin:10px 0 0;
    padding:0;
    height:45px;
    }

    #header h1 {
    color:#505050;
    background-color:inherit;
    width:350px;
    margin:0 0 10px;
    font-size:2em;
    float:left;
    }

    #header h1 a {
    color:#505050;
    background-color:inherit;
    text-decoration:none;
    }

    #header p {
    width:400px;
    float:right;
    text-align:center;
    margin:8px 0 0;
    font-weight:bold;
    line-height:1.3em;
    }

    #frontphoto {
    margin:0 0 10px;
    border:0;
    }

    /***** Left sidebar *****/

    #leftside {
    text-align: left;
    float:left;
    width:140px;
    margin:0 0 5px;
    padding:0;
    }

    #leftside h2,#leftside h3 {
    color:#505050;
    background-color:inherit;
    font-size:1.3em;
    margin:0 0 5px;
    padding:0;
    }

    #leftside div.announce {
    clear:left;
    margin:10px 0 15px;
    padding:7px 5px;
    width:126px;
    font-size:0.9em;
    background-color:#f4f4f4;
    color:#505050;
    border-left:4px solid #cccccc;
    line-height:1.5em;
    }

    #leftside div.announce p {
    margin:10px 0 0;
    padding:0;
    }

    /***** Main menu *****/

    ul.avmenu {
    text-align: left;
    float: left;
    width:140px;
    margin:0 0 18px;
    padding:0;
    list-style:none;
    }

    ul.avmenu li {
    width:140px;
    padding:0;
    line-height:1.4em;
    display:inline;
    }

    ul.avmenu li a {
    background-color:#f4f4f4;
    color:#505050;
    font-weight:bold;
    width:130px;
    float:left;
    margin-bottom:5px;
    padding:5px 1px 5px 5px;
    border-left:4px solid #cccccc;
    text-decoration:none;
    }

    ul.avmenu li a:hover,ul.avmenu li a.current {
    background-color:#eaeaea;
    border-left:4px solid #286ea0;
    color:#505050;
    }

    ul.avmenu ul {
    margin:0 0 0 15px;
    padding:0 0 5px 0;
    font-size:0.9em;
    width:125px;
    }

    ul.avmenu ul a {
    padding:3px 1px 3px 5px;
    font-weight:normal;
    width:115px;
    }

    ul.avmenu ul ul {
    width:113px;
    }

    ul.avmenu ul ul a {
    width:100px;
    }

    /***** Right sidebar *****/

    #extras {
    float:right;
    width:140px;
    margin:0 0 5px;
    padding:0;
    line-height:1.4em;
    }

    #extras p, #extras ul {
    margin:0 0 16px;
    padding:0;
    }

    #extras p {
    font-size:0.9em;
    line-height:1.4em;
    }

    #extras li {
    list-style:none;
    line-height:1.2em;
    margin:0 0 6px 0;
    padding:0;
    }

    #extras ul ul {
    margin:6px 0 0 10px;
    padding:0;
    }

    #extras ul ul li {
    margin: 0 0 4px 0;
    }

    #extras ul ul li a {
    font-size:1.1em;
    font-weight:normal;
    }

    #extras h2, #extras h3 {
    color:#505050;
    background-color:inherit;
    font-size:1.2em;
    margin:0 0 8px;
    padding:0;
    }

    /***** Main content *****/

    #content {
    text-align: left;
    visibility: show;
    width:600px;
    padding-bottom: 200px;
    margin:0 0 5px 150px;
    border-left:1px solid #f0f0f0;
    padding:0 0 0 10px;
    line-height:1.5em;
    }

    #contentwide2 {
    margin:0 150px 5px 0;
    border-right:1px solid #f0f0f0;
    padding:0 10px 0 0;
    line-height:1.5em;
    }

    #content h2,#contentwide h2, #contentwide2 h2 {
    font-size:1.6em;
    margin:0 0 10px;
    }

    #content h3,#contentwide h3, #contentwide2 h3 {
    font-size:1.3em;
    margin:0 0 8px;
    }

    #content img,#contentwide img, #contentwide2 img {
    padding:1px;
    display:inline;
    background:#cccccc;
    color:#303030;
    border:4px solid #f0f0f0;
    }

    #content ul, #contentwide ul, #contentwide2 ul, #content ol, #contentwide ol, #contentwide2 ol {
    margin:0 0 16px 20px;
    padding:0;
    }

    #content li, #contentwide li, #contentwide2 li {
    margin:0;
    padding:0 0 0 5px;
    }

    #content ul ul, #contentwide ul ul, #contentwide2 ul ul, #content ol ol, #contentwide ol ol, #contentwide2 ol ol {
    margin:0 0 0 16px;
    padding:0;
    }

    /***** Footer *****/

    #footer {
    clear:both;
    margin:0 auto;
    padding:15px 0;
    border-top:4px solid #f0f0f0;
    width:760px;
    text-align:center;
    color:#808080;
    background:#ffffff;
    }

    #footer p {
    margin:0;
    padding:0;
    }

    #footer a {
    color:#808080;
    background-color:#ffffff;
    text-decoration:none;
    font-weight:bold;
    }

    #footer a:hover {
    text-decoration:underline;
    }

    /***** Various classes *****/

    .left {
    margin:3px 10px 2px 0;
    float:left;
    }

    .right {
    margin:2px 0 2px 10px;
    float:right;
    }

    .textright {
    text-align:right;
    }

    .center {
    text-align:center;
    }

    .small {
    font-size:0.8em;
    }

    .bold {
    font-weight:bold;
    }

    .postinfo {
    background-color:#f4f4f4;
    border-left:4px solid #cccccc;
    color:#606060;
    font-size:0.9em;
    line-height:1.4em;
    margin:1px 0 20px;
    padding:8px 5px 8px 8px;
    }

    .clearing {
    clear:left;
    padding:0;
    margin:0;
    visibility:hidden;
    }

    .hide {
    display:none;
    }

  • #4
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    From what I can tell it's a problem with your markup.

    You have a wrapper div, and then you're floating a sidebar in it. Then outside of this wrapper div, you have your content with a left margin.

    That layout relies on #wrapper having no height, and allowing #content to scoot up into that place.

    To me it makes much more sense to simply stick #conent inside of #wrapper and let the normal flow be your #content div.

    Even better, because of the way IE6 calculates width, I would float the content right, and the sidebar left, and let the "gutter" between them just be empty space. That gives IE a little wiggle room as things expand and contract. If you float both opposite and then place them literally beside each other often IE6 will push one of them below the other as it thinks there's not enough room.

  • #5
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks. I'm very new to this so any chance you could write some html/css to help explain what you mean. Still not sure.

    Mike


  •  

    Posting Permissions

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