treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Floating in IE

  • I'm making a website with some floating. It works perfectly in Firefox and Safari, but not in Internet Explorer.

    Can someone please help me with this?



    <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
    \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
    <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
    <head>
    <meta http-equiv=\"cache-control\" content=\"no-cache\" />
    <style type=\"text/css\">


    body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    }

    #container {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    }

    #content {
    margin-top: 3%;
    margin-right: auto;
    margin-left: auto;
    width: 1000px;
    height: 700px;
    overflow: hidden;
    }

    .resize {
    width: 100%;
    height: auto;
    min-width: 920px;
    }

    .resize {
    width: 100%;
    height: auto;
    min-height: 1000px;
    }

    #left {
    background-color: white;
    height: 560px;
    float: left;
    width: 710px;
    overflow-y: scroll;
    }

    #right {
    background-color: #333333;
    float: right;
    height: 700px;
    width: 290px;
    }

    #bottom {
    clear: left;
    background-color: #cccccc;
    width: 710px;
    height: 140px;
    }

    </style>


    </head>
    <body>

    <div id=\"container\">



    <div id=\"content\"



    <div id=\"left\">
    left
    </div>


    <div id=\"right\">
    right
    </div>


    <div id=\"bottom\">
    bottom
    </div>



    </div>



    </div>


    <div id=\"bg\">
    <img src=\"36613379.jpg\" class=\"resize\" alt=\"Background image\">
    </div>


    </body>
    </html>

  • 1) You're missing a closing ">" on your content div. Add that in and it works fine in ie 6/7 (i copied the code and did it myself and it works / validates)

    2) Also, you have no character encoding declared. You need that for it to validate, which is always a good thing to do. Add a standard UTF-8 character encoding by adding "<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>" to the <head> section of your page.

    3) Your <img> tag does not comply with xhtml standards as you've declared the code to be at the top of your header. It needs a closing forward slash, ie <img src="http://....&quot; alt="something" />

    4) Also, your <head> parent tag is not finished. You need a <title> element for it to validate.

    5) I should also point out that "overflow-y" doesn't exist in css 2.1, it does in css 3 though. As css 3 hasn't been released by the w3c, it won't validate unless you take that out.

    6) I assume you included the css in the xhtml for the purpose of this post, but make sure you include it in a separate file and link it in the head.

    I would suggest double checking your urls at the W3C validation service's website: http://validator.w3.org/

    Here's the code:

    <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
    \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
    <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
    <head>
    <meta http-equiv=\"cache-control\" content=\"no-cache\" />
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"styles.css\" />
    <title>Name of Page</title>
    </head>
    <body>
    <div id=\"container\">
    <div id=\"content\">
    <div id=\"left\"> left </div>
    <div id=\"right\"> right </div>
    <div id=\"bottom\"> bottom </div>
    </div>
    </div>
    <div id=\"bg\"> <img src=\"36613379.jpg\" class=\"resize\" alt=\"Background image\" /> </div>
    </body>
    </html>
  • Thanks for a quick answer, i found the error right after posting, it was the number 1 that caused it.
  • Yeah, I realize that #1 was what caused your problem. I was merely pointing out issues with that code that are just as important. There's no point in having a strict doctype if you don't adhere to it. Catching issues at the beginning is a lot easier than going back through hundreds of lines of code/css later.