Question

I have some Sharepoint-produced HTML markup which is not the best you’ve seen, and cannot interfere in the markup, but have to style it via CSS.

The markup goes more or less like this:

<div id="searchbox">
<table>
<tr>
<td>
<table class="mstable">
<tr>
<td><input></input></td>
<td><select><option></option><option></option></select></td>
</tr>
</table>
</table>
<div id="fontsize">
<a href=""/>
<a href=""/>
</div>
</div>

Here is the CSS applied

#searchbox {
    float: right;
    margin-right: 15px;
    margin-top: 10px;
    text-align: right;
    width: 40%;
}

#fontsize {
    float: right;
    width: 46px;
}

.mstable {
    border-collapse: collapse;
    margin-left: 2px;
    margin-top: 2px;
    width: 100%;
    color: #000000;
    font-family: Verdana;
    font-size: 0.7em;
    font-style: normal;
    font-weight: normal;
}

What I am trying to do is put the fontsize div, next to the table. Currently, after the table there’s a break and the fontsize id goes under it.

I set display:inline to all the table descendants of searchbox and the fontsize div, and in Firefox I get the desired result, but in IE (all versions 8 and below) it ignores it..

I know my solution would be to remove these tables and make it div-only but I don’t know if I have this possibility..

Edit: I resolved the problem by setting float:left to both table and fontsize div AND setting a width in pixels to the table itself such as to limit it from expanding to the whole searchbox div.

Answer 1

This should do it for you :

http://jsfiddle.net/nULYR/8/

works in ie7+

EDIT

<table>
<tr>    // here is 
<td>    // the problem
<table class="mstable">
<tr>
<td><input></input></td>
<td><select><option></option><option></option></select></td>
</tr>
</table>
</table>

With : http://jsfiddle.net/nULYR/13/

Without : http://jsfiddle.net/nULYR/12/