Web Design Forum: BrownWarrior - Viewing Profile - Web Design Forum

For me your font isn't displaying at all in IE9. It displays fine when I put IE into IE8 or 7 mode but not IE9.

As for differences between FF, Safari and Chrome, the font looks a little leaner in Chrome but it is very slight. However it's clearly legible in both.

Thanks for your suggestion Wickham.

I had acually already tried this but I tried it again anyway. It seems adding display:block to a <td> element is a no no, it breaks the colspan and the <td> element then acts as though it is one column wide. For me it only worked in IE, all the other browsers broke the same way, including FF.

I have found a solution - to put a div wrapper around the .imgDiv, let that div inherit dimensions from the <td> and this works.

.details    
{           
    font-size:16px;        
    width:300px;  height: 200px;
    position:relative;           
}        

.imgDivWrapper
{
    width:inherit;
    height:inherit;
    position:relative;
}

.imgDiv
{    
    position:absolute;     
    bottom:0px;     
    background:url("../../Content/LM_DROPDOWN_BG_BUTT_01.png") no-repeat center;     
    width:300px;    
    height:30px;    
}
 

Pedro, on 05 July 2011 - 01:58 PM, said:

Nope this doesn't fix it. Thanks for the suggestion though.

Thanks Renaissance,

This works perfectly! My actual CSS makes it a little more complex. Firstly I'm selecting on a class not all tr elements, 2 I didn't say before but I'm actually then applying styles to a div inside the td of the next tr. So my CSS looks like this..

.myClass:hover + tr td div

And it works. I have tested in IE FF Chrome Safari and Oprea and it is working perfectly in all five!

Many Thanks!