Grow your CSS skills. Land your dream job.

PLASE HELP!!! – IE7 and IE6 position: absolute not working!

  • # January 20, 2010 at 5:13 pm

    A lot of people have checked out this post but unfortunately no one has offered up a solution. I’m desperate to get his fixed. If you read this, it would be awesome if you could ehlp me out.

    I’m really new to CSS and web design. I built a website at http://www.moneytogotexas.com. It looks great in FireFox but in IE6 and IE7, the red tagline and the form gets pushed to the right of the background img (the pic of the broken car and the background of the form).

    These two things are elements within the main1 div and I’m using position:absolute to position them (h2 and form) on top of the background image. I have searched all over the web and cannot find a solution to these problems in IE6 and IE7. Can someone please tell me what I am doing wrong before I pull out any hair I have remaining. :)

    I almost forgot. I am using CSS960 as a framework.

    The HTML and CSS are below:

    HTML:

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




    Are you trying to figure out how to pay for car repairs

    Are you trying to figure out how to

    pay for your car repairs…












    Quick and Easy

    • Get a loan up to $5,000 to repair your car

    • Preliminary approval takes only 15 minutes

    • Almost no paperwork

    • We come to your repair shop

    • Cheaper than a Payday or Title Loan

    How It Works

    • Step 1: Call Us For Approval

    • Step 2: Loan Specialist Meets You at Your Repair Shop

    • Step 3: Complete Paperwork

    • Step 4: We Pay For Your Repairs

    • Step 5: Pick Up Your Car

    Requirements

    • No Credit Check

    • Clean Car Title

    • Current Income

    • Proof of Insurance

    • Proof of Residence

    • Car is 1995 or newer

    The MoneyToGo Guarantee

    We guarantee that our Repair Loans Cost Less and Give You More Time than a Payday Loan
    or Title Loan

    Car repairs are expensive and can be scary. You probably need a few months to save up the money to
    pay for them but you need your car back on the road right away. Stop using payday and title
    loans. MoneyToGo is here to help. The Repair Loans we arrange have 3 to 6 month terms. Has a lower
    cost than rolling a payday or title loan for the same period of time.

    CALL US TODAY AT 1-800-531-4217. It’s no obligation.

    The Money To Go Guarantee

    Repair Shops

    We work with any type of repair shop

    National Chains, Regional Chains or Individually Owned Shops… You’re our partners.

    Our mission is to arrange convenient and easy financing for your customers that have no credit or bad
    credit. That way they can pay for their transmission repair, brake replacement, body work or any
    major car repair and immediately get back on the road. If you think about it, we turn frowns
    upside down.

    If you are a repair shop we are not already working with, call us today at
    1-800-531-4217.


    CSS Below:

    Code:
    /* GENERAL STYLES */

    /* HEADER */

    #header {
    border-bottom: 10px #419639 solid;
    }

    #header img {
    float: left;
    }

    #header h1 {
    position: relative;
    margin: 36px;
    text-align: right;

    font-weight: normal;
    font-size: 25px;
    }

    /* MAIN1 */

    #main1 img {
    position: absolute;
    top: 0px;
    }

    #main1 h2#question {
    color: white;
    font-size: 27px;
    font-family: helvetica, arial, sans-serif;
    position: absolute;
    top: 343px;
    margin-left: 15px;
    line-height: 33px;
    overflow: hidden;
    }

    #main1 a {
    line-height: 50px;
    color: blue;
    font-size: 15px;
    margin-left: 600px;
    }

    #main1 #contact_form {
    position: absolute;
    margin-left: 637px;
    top: 200px;
    color: white;
    font-family: helvetica, arial, sans-serif;
    position: absolute;
    font-size: 14px;
    line-height: 27px;
    padding-left: 15px;
    }

    #main1 #contact_form #button {
    position: absolute;
    top: 160px;
    left: 0px;
    }

    /* 3 COLUMNS */

    #column1 h2, #column2 h2, #column3 h2 {
    text-align: center;
    margin-top: 435px;
    color: #37992f;
    font-size: 36px;
    line-height: 40px;

    }

    #column1 h4, #column2 h4, #column3 h4 {
    color: black;
    font-family: helvetica, arial, sans-serif;
    font-weight: normal;
    position: left;
    line-height: 25px;
    font-size: 19px;
    margin: 5px;
    }

    #column2 small {
    font-size: 18px;
    }

    /* GUARANTEE */

    #guarantee-wrap {
    background: #f3f5f3;
    }

    #guarantee-wrap img {
    position: absolute;
    top: 40px;
    right: 20px;

    }

    #guarantee h2 {
    padding-top: 15px;
    padding-left: 10px;
    color: black;
    font-family: helvetica, arial, sans-serif;
    font-weight: bold;
    font-size: 34px;
    line-height: 40px;
    margin-bottom: 5px;
    }

    #guarantee h3 {
    padding-left: 10px;
    color: black;
    font-family: helvetica, arial, sans-serif;
    font-weight: normal;
    font-size: 24px;
    line-height: 30px;
    margin: 0px;
    text-align: justify;
    }

    #guarantee p {
    padding-left: 10px;
    color: black;
    font-family: helvetica, arial, sans-serif;
    font-weight: normal;
    font-size: 18px;
    line-height: 22px;
    margin: 0px;
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: justify;
    }

    #guarantee span, #repair-text span {
    color: #37992f;
    font-family: helvetica, arial, sans-serif;
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    margin: 0px;
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: left;
    }

    /* REPAIR SHOPS */

    #repair-sign img {
    padding-top: 50px;
    padding-left: 10px;
    }

    #repair-text h2 {
    padding-top: 30px;
    color: #37992f;
    font-family: helvetica, arial, sans-serif;
    font-weight: bold;
    font-size: 34px;
    line-height: 40px;
    margin-bottom: 5px;
    }

    #repair-text h3 {
    color: black;
    font-family: helvetica, arial, sans-serif;
    font-weight: normal;
    font-size: 24px;
    line-height: 30px;
    margin: 0px;
    }

    #repair-text p {
    color: black;
    font-family: helvetica, arial, sans-serif;
    font-weight: normal;
    font-size: 18px;
    line-height: 22px;
    margin: 0px;
    margin-top: 5px;
    margin-bottom: 20px;
    text-align: justify;
    }

    /* FOOTER */

    #footer-wrap {
    background: #37992f;
    border-bottom: 1px #82cb7c solid;
    }

    #footer1 p {
    color: white;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    text-align: justify;
    margin: 3px;
    font-size: 14px;
    line-height: 16px;
    }

    #footer2 h4 {
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    text-align: center;
    margin: 3px;
    font-size: 26px;
    line-height: 40px;
    }

    #footer-bottom {
    background: #37992f;
    }

    #footer-bottom p {
    color: white;
    text-align: center;
    margin-top: 30px;
    margin: 3px;
    font-size: 14px;
    line-height: 16px;
    }

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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