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.
Seems to be related to this image: http://zetabin.com/img/3columnheaderunderline.png If you adjust the image, it should solve the problem.