Grow your CSS skills. Land your dream job.

Widht problem in IE6

  • # February 5, 2009 at 5:05 am

    Hello there,

    I hope somebody can help me with a ‘width’ problem I am facing with my layout.

    I put an example on the website http://www.werkstuk.com
    If you make the screen smaller you can see that the blue ‘content-div’ is moving
    beneath the ‘index-div’! I can’t figure out what the right css code is to solve this problem.
    In IE7 and FF it works great.

    See the code here:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;

    <head>
    <title>MM Masterpage</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <head>

    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }
    #banner {
    position: relative;
    height: 100px;
    width: 100%;
    background-color: red;
    }
    #wrappermain {
    float: left;
    width: 100%
    }
    #index {
    float: left;
    width: 200px;
    height: 400px;
    background-color: orange;
    /*display: none;*/
    }
    #content {
    /*float: left;*/
    width: auto;
    margin-left: 200px;
    height: 400px;
    overflow: auto;
    background-color: silver;
    }
    * html #content { /* Star HTML patch for IE6 */
    width: 80%; /* Why can I not use value ‘auto’ */
    background-color: blue;
    }
    #footerend {
    clear: both;
    width: 100%;
    height: 25px;
    background-color: green;
    }
    </style>

    </head>
    <body>
    <div id="banner">BANNER</div>
    <div id="wrappermain">
    <div id="index">INDEX</div>
    <div id="content">
    CONTENT<br />
    <img src="pixel2000breed.gif" />
    <img src="pixel2000hoog.gif" />
    </div>
    </div>
    <div id="footerend">FOOTEREND</div>
    </body>
    </html>

    Best regards,
    Kenneth

    # February 5, 2009 at 5:40 am

    check out this

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <title>MM Masterpage</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }

    #banner {
    position: relative;
    height: 100px;
    width: 100%;
    background-color: red;
    }
    #wrappermain {
    float: left;
    width: 100%
    }
    #index {
    float: left;
    width: 200px;
    height: 400px;
    background-color: orange;
    clear:left;
    /*display: none;*/
    }
    #content {
    /*float: left;*/
    width: auto;
    margin-left: 200px;
    verflow: auto;
    height:400px;
    background-color: silver;
    clear:right;
    }

    #footerend {
    clear: both;
    width: 100%;
    height: 25px;
    background-color: green;
    }
    </style>

    </head>
    <body>
    <div id="banner">BANNER</div>
    <div id="wrappermain">
    <div id="index">INDEX</div>
    <div id="content">
    CONsdfsdfsdfdsfsdfsdfsdfsdfsdfsdfsdfsdfsd sdfsd sdf s df sd dsf sdfsd df sfsfsdfsdfsdfsdfsdfsdfsdfsdfsdTENT<br />
    <img src="pixel2000breed.gif" />
    <img src="pixel2000hoog.gif" />
    </div>
    </div>
    <div id="footerend">FOOTEREND</div>
    </body>
    </html>

    # February 5, 2009 at 7:11 am

    Ramesh, thanks for helping me, but adding the ‘clear: right’ atrribute doesn’t solve my problem!
    If this isn’t what you meant, what am I doing wrong?

    Regards,
    Kenneth

    # February 5, 2009 at 8:58 am

    not only clear i have add many things u just copy the html code and check it out

    # February 5, 2009 at 9:24 am

    Hello Ramesh,

    If you look in IE6 with the following link: http://www.werkstuk.com/ramesh.html
    you will see your code. Do you see that the layout is still not in place…
    Other suggestions?

    # February 6, 2009 at 1:49 am

    its coming fine for me in ie6

    # February 7, 2009 at 3:53 am

    @ramesh,

    it looks fine on your IE but did you change your screen resolution for your test as the original poster said, it happens on smaller screens

    @hoven

    I will have a look at this later dude, if you don’t get it fixed soon

    hoven:
    I checked out your code in firebug, I played about, but I think having a % and pixel values is causing you problems, so I changed a few things, if you don’t mind

    before the code, here is a question 100% – 200px does that leave 80%??

    I think thats why your code was not behaving how you wanted it to, so I made it 100% – 20% = 80%

    full code for you to test:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




    INDEX
    CONTENT

    FOOTEREND


    tested on IE6, FF in resolutions 1024×768 & 800×600

    # February 9, 2009 at 8:41 am

    Thanks Ikthius,

    This works for me partially! Thanks.
    I have to make different website with this layout where each leftdiv
    has a different widht (in pixels). I will play with this a bit more.

    Regards,
    Kenneth

    # February 9, 2009 at 8:57 am
    "hoven002" wrote:
    Thanks Ikthius,

    This works for me partially! Thanks.
    I have to make different website with this layout where each leftdiv
    has a different widht (in pixels). I will play with this a bit more.

    Regards,
    Kenneth

    so your trying to make your own template then???

    does it have to fill in the whole page as in 100%?

    # February 9, 2009 at 4:25 pm

    Yes I am trying to make a template! You have some tips I can use?

    # February 9, 2009 at 5:08 pm
    "hoven002" wrote:
    Yes I am trying to make a template! You have some tips I can use?

    no not really, I am not a big fan of templates, cause not all sites end up the same.

    I don’t think you will get all browsers to see it the same, unless you go for tables.

    ik

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".