keep 2 Tables inline inside a legend

Question

I have added two tables with only one row on each of them inside legend control

 <legend>                       
       <asp:Table ID="LegendTableSite" runat="server" style="display:inline-block">                            
            <asp:TableRow>                                
                <asp:TableCell>test</asp:TableCell>
                <asp:TableCell><asp:DropDownList ID="ddlSite" runat="server" AutoPostBack="True" CssClass="username" DataTextField="SiteAndNB" DataValueField="SiteID" OnSelectedIndexChanged="ddlSite_SelectedIndexChanged" >
                        <asp:ListItem Selected="True" Value="0">No Site</asp:ListItem>
                    </asp:DropDownList></asp:TableCell>                                    
            </asp:TableRow>
        </asp:Table>                       
        <asp:Table ID="LegendTableFilter" runat="server" style="display:inline-block">                            
            <asp:TableRow>              
                <asp:TableCell><asp:LinkButton ID="LnkbtnFilterAll" runat="server" OnClick="LnkbtnFilterAll_Click" CssClass="LinkButton button-on">&nbsp;All&nbsp;</asp:LinkButton></asp:TableCell>
                <asp:TableCell>&nbsp;-&nbsp;</asp:TableCell>
                <asp:TableCell><asp:LinkButton ID="LnkbtnFilterApproved" runat="server" OnClick="LnkbtnFilterApproved_Click" CssClass="LinkButton">&nbsp;Approved&nbsp;</asp:LinkButton></asp:TableCell>                
            </asp:TableRow>
        </asp:Table> 
</legend>

in IE both tables are one above the other and in Chrome they are well inline

is there any solution that keep tables inline for both browsers ?

Answer 1

Not an elegant solution, but you can define both tables inside other table like in the old design times:

<table>
  <tr>
    <td style='vertical-align: top;'>
      <%-- definition of table 1 --%>
    </td>
    <td style='vertical-align: top;'>
      <%-- definition of table 2 --%>
    </td>
  </tr>
</table>