1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Weird table-in-div bug in IE and FF

Discussion in 'CSS' started by J.D., Mar 20, 2005.

0
  1. #1
    Just spent a couple of hours trying to figure out a strange strip I had between two div's and it appears that it's a really weird bug in IE - inner element's margin is affecting margins of the outer element that has enough padding to suppress these margins. Here's an example, if anyone comes across this layout:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head><title>Table-in-div bug in IE</title></head>

<body style="background-color: #ACF;  padding: 0; margin: 0;">

<div style="background-color: white; margin: 0; padding: 10px;">
	<table style="border-collapse: collapse; margin: 3px auto; border: 1px solid blue;">
		<tr><td>table</td></tr>
	</table>
</div>

<div style="background-color: white; margin: 0;">
The blue strip above is only visible in IE; its height is equal table's margin
</div>

</body>
</html>
    Code (markup):
    Even FF chokes on this one. It ignores the border-collapse property when calculating table's margins and if you reduce margin to 0px, the top of the border will not be visible. Opera is the only browser that handled this HTML properly!

    J.D.
     
    J.D., Mar 20, 2005 IP