Forums

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

Home Forums CSS two IE6 problems that I can’t seem to solve

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #27113
    FJDdesign
    Member

    Hi
    I’m having 2 IE6 issues. I’m creating a very small e-commerce site sing paypal (simple free version). I’ve searched and searched and I can’t seem to find the answer so I’m hoping you can help

    First issue: I’ve got a div that, for some reason, is adding a large padding or margin on top of it that I can’t seem to clear.

    2nd Issue:
    I’ve got a paypal button that I’m using a class to style and it’s got this weird gray background for some reason. The class has a background image that used to be a png, but I changed it to a jpg and it’s still happening. It’s a form with input type: "submit"

    Browser shot of the IE6 problem:
    http://i10.photobucket.com/albums/a121/ … _sucks.jpg

    There are multiple pages this problem is occurring on, because they are all using the same class.
    So here’s an example of how it’s supposed to look if you click on this link through a more modern browser: http://www.poufpillows.com/pillows/silk … night.html

    here’s the link to the full CSS file. I’m using a conditional statement (thanks CSS-Tricks!) to load a separate CSS file for IE6: http://www.poufpillows.com/IE6orLess.css

    The cart class structure:
    <div id=cart_container>
    <div id=cart>
    <form….paypal provided code…..>
    <input type="hidden" etc etc, paypal provided code…>
    <input type="hidden" etc etc, paypal provided code…>
    <input type="submit" class="addtocart" … paypal provided code… >
    </form>
    </div> <!— end cart div —>

    for the menu at the bottom, the specific class that’s having the problem is called ".nav_zoom"

    below should be all the CSS that’s actually used in the page:

    Code:
    * { margin: 0; padding: 0; }

    body { background-color: white; padding-top:30px; }

    .clear { clear: both; }

    a img { border: 0; }

    /*

    Typography

    */

    a {
    text-decoration:none;
    color: #3f403f;
    font-family: Arial, Helvetica, sans-serif;
    font-size:0.85em;
    }

    a:visited { text-decoration:none; }
    a:active { color:#a1a4a1; }
    a:hover { color:#CCCCCC; }

    p { font-size:0.8em;
    font-family: futura, Helvetica, sans-serif;
    line-height: 1.05em;
    }

    #page_container { margin: 0 auto;
    width: 755px;
    height: 553px;
    }

    #menu2 {
    float:right;
    margin-top:10px;
    }

    #nav2 {list-style-type:none; }
    #nav2 li {display:block; line-height:1em; text-align:right;}

    #layout1 { padding-top:156px; width: 755px; }

    #collections { padding-top:156px; width: 790px; }
    #collections a { margin-right:20px; }

    h2.vert_title { width: 42px; height: 234px;
    padding-top:74px;

    background:url(“images/about_title.jpg”);
    background-position:bottom;
    background-repeat:no-repeat;
    text-indent: -9999px;

    }

    /* elements for the zoomed pages */

    #pillow_page {width:630px;
    padding-top:150px;
    margin: 0 auto;
    }

    #zoomed { float:left;
    width: 315px;
    }

    #zoomed_text { background-color:#313132;
    width: 199px;
    height: 265px;
    float:right;
    color:#FFFFFF;
    padding: 50px 58px 0px 58px;
    }

    #pillow_page .nav_zoom { font-family: Arial, Helvetica, sans-serif;
    text-align:right;
    font-size:.8em;
    padding: 0; margin: 0;
    }

    .cart_container { position:relative; right: -120px; margin-top: .8em;
    width: 120px; height: 38px; }

    .cart { width: 40px; float:left; position: relative; bottom: 0px;
    background:none;
    }

    .addtocart_text { position:relative; bottom: 0px; padding: 25px 0 0 45px;}

    .addtocart {
    color:#FFFFFF;
    background:none;
    border:none;
    font-size:.8em;
    height: 38px; width: 40px;

    background:url(‘images/cart.jpg’) no-repeat;
    }

    #67774
    AshtonSanders
    Participant
    "FJDdesign" wrote:
    First issue: I’ve got a div that, for some reason, is adding a large padding or margin on top of it that I can’t seem to clear.

    I didn’t find a solution for this, as it’s hard for me to test in IE6, but did you try removing your: Clear div?

    Code:
    "FJDdesign" wrote:
    2nd Issue: I’ve got a paypal button that I’m using a class to style and it’s got this weird gray background for some reason. The class has a background image that used to be a png, but I changed it to a jpg and it’s still happening. It’s a form with input type: "submit"

    the problem is that it is still a clear png: images/cart.png (IE6 can’t handle the clear PNG)

    #67900
    Brido
    Member
    Code:
    .clear { clear:both; padding:0px; margin:0px; line-height:0px; }

    .nav_zoom { display:inline; float:right; font-family:Arial,Helvetica,sans-serif; font-size:0.8em; margin-top:16px; text-align:right; }

    Replace these two classes in your css. Let me know the results.

    Also, you are getting the gray background behind your image… because it’s a png, and IE6 will not read the alpha transparency without some sort of png fix. Search around for "jquery png fix".

    #67916
    FJDdesign
    Member

    Thanks for your help! (both of you)

    first… I could have sworn that I edited my css and changed the PNG to a JPG, guess I didn’t upload or something. That was my stupid overlook mistake.

    second…. I had removed the .clear altogether, and I tried Brido’s suggestion, none worked. Then I did something so obvious that I don’t know why I didn’t do it before. I converted those three links into a UL and then styled it and got it to work perfectly, and IE removed that extra space. I’m still very confused as to why IE was adding that space, even without a UL, it shouldn’t have been there, but then again we all know IE shouldn’t be doing a lot of things. oh well.

    problem solved!
    thanks

    Code:
    Code:
    .nav_zoom { width: 200px; display:inline;
    float:right; font-family:Arial,Helvetica,sans-serif; font-size:0.8em; margin-top:16px; text-align:right; }

    ul.nav_zoom li {
    display: inline; /* Prevents “stepdown” */}

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.