I have the following html code snippet :-
<html>
<head>
<style>
body ul
{
margin: 0px;
border: 1px solid black;
padding: 0px;
list-style-type: none;
}
ul li {
display: inline;
padding: 0px;
margin: 0px;
border: 1px solid red;
}
table
{
display: inline;
margin: 0px;
padding: 0px;
border:1px solid green;
}
</style>
</head>
<body>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>
<table>
<tbody>
<tr>
<td>Item3</td>
<td>Stars</td>
</tr>
</tbody>
</table>
</li>
</ul>
</body>
</html>
I have to render this code in quirks mode(Due to an Iframe in the page, to render it properly I found that Quirks mode suits the best). I see that IE8 displays the code as:
Table not aligned with the other list items.
Whereas mozilla displays it as :-
Here the table is aligned but the text is not.
What is going wrong here? How do I fix this across browsers