wrong layout in internet explorer 6

Discussion in 'CSS' started by HenkR, Oct 1, 2008.

  1. #1
    Hi,

    can somebody tell me why internet explorer 6 displays the pictures on this site under each other while internet explorer 7 displays them next to each other like it should?

    http://www.kantoordeckers.be/

    This is the stylesheet:

    /* CSS layout */

    /*Container*/
    #container {
    background-position: bottom;
    border: 2px solid #8c8c8c;
    width: 900px;
    margin: 0 auto;
    background-image: url('images/bodyback.jpg');
    background-repeat: repeat-x;
    }


    /*Heading*/
    #masthead {
    background-color: #FDF002;
    background-image: url('images/logogeel.jpg');
    background-repeat: no-repeat;
    background-position: 20px center;
    height: 100px;
    }
    #masthead p {
    text-align: right;
    color: #666666;
    padding: 10px 20px 20px 20px;
    }
    #masthead a {
    color: #666666;
    }
    #masthead a:hover {
    color: #666666;
    text-decoration: none;
    }



    /*Navigation*/
    #top_nav {
    height: 28px;
    background-image: url('images/Navigationback.jpg');
    background-repeat: repeat-x;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-color: #808080;
    border-bottom-color: #808080;
    }
    #top_nav ul {
    list-style-type: none;
    width: 100%;
    padding: 0px;
    margin: 0px;
    }
    #top_nav li {
    float: left;
    }
    #top_nav a {
    padding: 5px 15px 5px 15px;
    text-decoration: none;
    display: block;
    color: #666666;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #969593;
    font-weight: bold;
    }
    #top_nav a:hover {
    text-decoration: none;
    background-color: #FFFF00;
    font-weight: bold;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #969593;
    }


    /*Content*/
    #page_content {

    }


    /*Footer*/
    #footer {
    clear: left;
    }
    #footer p {
    color: #666666;
    vertical-align: middle;
    text-align: center;
    margin-top: 50px;
    }
    #footer a {
    text-decoration: underline;
    color: #666666;
    }
    #footer a:hover {
    color: #FDF002;
    text-decoration: none;
    }

    body {
    font-family: "Trebuchet MS", sans-serif;
    background-color: #FFFFFF;
    font-size: small;
    color: #666666;
    }
    h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    color: #666666;
    }
    #home {
    text-align: center;
    }
    #home img {
    border: 1px solid #666666;
    display: inline;
    }
    #home #image {
    float: left;
    text-align: center;
    margin-left: 100px;
    }
     
    HenkR, Oct 1, 2008 IP
  2. Sensei.Design

    Sensei.Design Prominent Member

    Messages:
    3,847
    Likes Received:
    162
    Best Answers:
    0
    Trophy Points:
    310
    Digital Goods:
    1
    #2
    because ie6 is crap ;)

    you can amke it work on ie6 using conditional comments checkwikipedia
     
    Sensei.Design, Oct 1, 2008 IP
  3. HenkR

    HenkR Active Member

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #3
    Found a solution:

    it works when I use this:

    #home #image {
    float: left;
    text-align: center;
    display: inline;
    margin-left: 100px;


    Hope it's still good in IE7 now
     
    HenkR, Oct 2, 2008 IP