IE 7 Breaking CSS ><

Discussion in 'CSS' started by Riverofrhyme, Sep 21, 2010.

  1. #1
    http://zetabin.com

    In chrome/firefox whatever, when you hover the Victory Road image in the middle, the colour fades in, and a tooltip slide in to give you a little information on it. However, in IE 7 the tooltip's width is too great, and is always showing.

    Next problem: In chrome/firefox etc there is a nicely ordered 3 column layout at the bottom. In IE 7, the middle column is pushed down about 5 lines.

    How do I fix these problems?
     
    Riverofrhyme, Sep 21, 2010 IP
  2. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Make the following changes to your style.css file:

    #content-content .holder {
        overflow:hidden;
        height:170px;
        max-height:170px;
        position:relative; /* Add this line */
    }
    Code (markup):
    #content-content .tooltip {
        position:relative;
        z-index:100;
        top:-3px;
       [B] width:775px;[/B] /* Changed from 795px due to left padding */
        height:30px;
        background-color:#000;
        color:#fff;
        opacity:0.8;
        [B]filter: alpha(opacity=80);[/B] /* Added so IE also has opacity */
        padding-left:20px;
        padding-top:7px;
        font-size:80%;
    }
    Code (markup):
    #content-content .center {
        position:relative;
        padding-left:281px;
        margin-right:79px;
        [B]width:241px;[/B] /*Remove this line */
    }
    Code (markup):
     
    GWiz, Sep 21, 2010 IP
  3. Riverofrhyme

    Riverofrhyme Peon

    Messages:
    137
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks, that helped a lot :) . Just two small problems in IE with that code though =\ . If you look in the middle column, there's a weird grey line for about 1cm in place of the image I normally have there. Because of that, the image now extends too far.
     
    Riverofrhyme, Sep 23, 2010 IP
  4. Riverofrhyme

    Riverofrhyme Peon

    Messages:
    137
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Ahh, this problem is cross browser- not just IE.
     
    Riverofrhyme, Sep 23, 2010 IP
  5. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #5
    GWiz, Sep 23, 2010 IP