Grow your CSS skills. Land your dream job.

[Solved] IE6 element positioning problem

  • # November 14, 2009 at 4:51 pm

    Hi Guys.

    I’ve been building a website over the last few days and it works fine in browsers, except for IE6. (Which I understand is a common problem)

    Live Example: http://chriswillow.110mb.com/

    Screenshot of problem: http://i35.tinypic.com/2ppwrk6.png

    Is there any way you guys can either solve this problem, or point me in the right direction for a solution? It would be very much appreciated.

    Many Thanks in advance.

    HTML

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


    data="images/contentleftbackground.swf"
    width="370" height="400"> value="images/contentleftbackground.swf" />

    Her of the Dog is a Liverpool based Mobile Dog Grooming Service.

    For more Information please browse our website, or do not hesitate to contact us.

    As many dog owners have difficulty reaching a grooming Salon because of work commitments or who have an elderly or nervous dog which does not settle in a Strange Environment. We offer a complete service for your dog in the comfort of your own home, reducing the time that your dog needs to spend away from you.

    CSS

    Code:
    .body, div, h1, h2, h3, h4, h5, h6, p, ul, img {
    margin: 0px;
    padding: 0px;
    }

    #body {
    font-family: Arial, Helvetica, sans;
    background: url(images/background.png) repeat-x;
    background-color: #E8E8E8;
    }

    #container {
    width: 740px;
    margin-right: auto;
    margin-left: auto;
    }

    #header {
    width: 740px;
    height: 117px;
    }

    #logo {
    background: url(images/logo.png) no-repeat;
    height: 117px;
    width: 150px;
    }

    #links {
    float: right;
    display: block;
    position: fixed;
    top: 50px;
    left: 553px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    background: url(images/linksbackground.png) no-repeat;
    width: 455px;
    }

    ul#menu {
    list-style: none;
    }

    ul#menu li {
    float: left;
    font-size: 14px;
    padding-right: 15px;
    padding-left: 15px;
    }

    ul#menu a:link {
    color: black;
    text-decoration: none;
    }

    ul#menu a:visited {
    color: black;
    text-decoration: none;
    }

    ul#menu a:active {
    color: black;
    text-decoration: none;
    }

    ul#menu a:hover {
    color: black;
    text-decoration: underline;
    }

    #contentleft {
    background: url(images/contentleftbackground.jpg) no-repeat;
    display: block;
    position: fixed;
    top: 140px;
    height: 400px;
    width: 370px;
    }

    #contentright {
    height: 400px;
    width: 370px;
    top: 140px;
    position: fixed;
    left: 640px;
    float: right;
    }

    #contentright p {
    font-size: 13px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    overflow: auto;
    padding-left: 20px;
    padding-top: 115px;
    text-align: center;
    }

    #footer {
    top: 560px;
    height: 36px;
    background: url(images/footerbackground.png) no-repeat;
    display: block;
    position: fixed;
    width: 740px;
    padding-top: 10px;
    padding-bottom: 10px;
    }

    #footer p {
    text-align: center;
    font-size: 12px;
    vertical-align: middle;
    }

    #footerleft {
    float: left;
    padding-left: 50px;
    }

    #footerright {
    float: right;
    padding-right: 50px;
    }

    #footerright a:link {
    color: black;
    font-size: 12px;
    text-decoration: underline;
    font-family: sans-serif;
    }

    #footerright a:visited {
    color: black;
    font-size: 12px;
    font-family: sans-serif;
    }

    #footerright a:active {
    color: black;
    font-size: 12px;
    font-family: sans-serif;
    }

    #footerright a:hover {
    color: black;
    text-decoration: none;
    font-family: sans-serif;
    }

    # November 15, 2009 at 12:56 am

    Hi Chris,

    Welcome to the CSS-Tricks forum.

    You forgot to mention what the problem is that you are experiencing. I’m checking your two links and there are many differences. What’s the problem that you’d like corrected?

    # November 15, 2009 at 8:58 am

    Thanks for your reply.

    There are only 2 problems really, and I presume the solution will be the same for both issues.

    The linkbar is not in the correct position, and the text is not in the correct position.
    It looks like it should be a simple solution, maybe only a few CSS properties to be changed, but I do not have the required knowledge to fix the position.

    EDIT: I have now solved this problem. (Used display:inline and changed some padding values)

    Thank you to those who read this topic and to AshtonSanders for replying. :)

    # November 15, 2009 at 11:59 am

    Sure thing. You’re welcome.

    One more note: For some reason, your main logo is not showing (and the text is running behind the image) in my Firefox 3.5.

    Talk soon,
    Ashton

    # November 15, 2009 at 6:25 pm

    The logo wouldn’t upload to that website for some reason, it is however working ok at my end.

    Thanks once again.

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

You must be logged in to reply to this topic.

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