IE 7 Breaking CSS ><

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?

 

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

 

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.

 

Ahh, this problem is cross browser- not just IE.

 

Seems to be related to this image:
http://zetabin.com/img/3columnheaderunderline.png

If you adjust the image, it should solve the problem.