Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] IE6 element positioning problem

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #26762
    chriswillow
    Member

    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:



    Her of the Dog :: Mobile Dog Grooming

    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;
    }

    #66613
    AshtonSanders
    Participant

    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?

    #66569
    chriswillow
    Member

    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. :)

    #66571
    AshtonSanders
    Participant

    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

    #66629
    chriswillow
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.