Ok, I know that using tables for layout is bad. But we have a client that has ie6 installed on all workstations and we have to make a complicated layout that works perfectly on it so the clean CSS solution didn't work so I had to do it with tables.
Here's the HTML code that I have :
<body>
<table id="main_table">
<tr>
<td>
<div class="content">Content</div>
</td>
</tr>
</table>
</body>
Here's the CSS that I have :
body{margin:0;padding:0;}
#main_table{border-collapse:collapse;border-spacing:0;width:100%;}
#main_table td{margin:0;padding:0;}
#main_table div.content{margin:0;padding:0;}
And for some mysterious reason, there's some kind of margin between the cell's top and the div. I'm absolutely positive that all my margins and paddings are at 0 but it's still there.
I tried : - a span instead of the div and the problem is still there; - use position:relative on the table cell and position:absolute on the div but the div always take his position from the top left of the browser, not the top left of the element.
Anyone had a similar problem in the past? Thanks in advance for your help.
EDIT : The problem is not only in IE6 but in all browsers.