IE7 float layout issue in table column - html

Question

I could use some assistance with a rendering issue from the IE7 experts out there; my layout works beautifully on all browsers except IE7, and I can't quite figure out the magic style to get it working.
JSFiddle example of the issue is here: http://jsfiddle.net/rB29C/2/
If you view it in IE7, the link (wineglass image) is pushed down to a second line below the checkbox. My goal is to have them in the same line. If you view the fiddle in IE8+ or any other browser, it is working as expected.
I think it has something to do with the width of the floated element, but I can't figure out the magic style combination to fix this. I do have conditional stylesheets in my app so I can do an IE7 specific style, though I prefer to avoid markup based changes if possible.
I'd love to understand what's going on, too--so I can hopefully learn to avoid this in the future :)

Answer 1

IE7 seems to push items in the cell to the bottom when the width of the cell is too small. I increased the width of td.type to 14% and it seemed to work in the fiddle, but if your table needs to shrink and grow this might not be the best solution(if the table is squished the wine glass will again drop to the bottom). Otherwise you may consider using a set pixel width instead of a %

Answer 2

I've figured it out and the solution is not in CSS but rather in the HTML. Simply move the wine glass picture between different cells like so:
<table>
<tbody>
<tr>
<td class="type">
<input class="checkbox" type='checkbox' />
</td>
<a class="link" href="#"></a>
<td class="name">Name
</td>
<td class="dates">Dates
</td>
<td class="score">Score
</td>
</tr>
</tbody>
</table>
The issue with this is that it only works in the IE7 environment and not in others. Maybe you could condition it with php depending on what browser the page is in.
<?php
$isIE7 = (get_broswer('broswer') == 'IE' && get_browser('version') < 8 )
?>
<table>
<tbody>
<tr>
<td class="type">
<input class="checkbox" type='checkbox' />
<?php if ($isIE7) echo('</td>
<a class="link" href="#"></a>');
else echo('
<a class="link" href="#"></a>
</td> ');?>
<td class="name">Name
</td>
<td class="dates">Dates
</td>
<td class="score">Score
</td>
</tr>
</tbody>
</table>
I'm not sure if you want to avoid php or not, but if you do there is also a JavaScript version I can crank out for you.

Answer 3

I was able to figure out a solution for my problem; I've updated the JSFiddle with the new styles:
http://jsfiddle.net/rB29C/13/
To summarize, I set the following additional style from my original fiddle, and IE now seems to layout and size things properly (including the containing td):
input.checkbox {
display: inline;
float: left;
}
a.link {
display: inline;
float: left;
clear: right;
margin: 0;
}
Hopefully this is helpful to someone else who is struggling with IE7's oddities!