This example is created to showcase a specific problem. In between two paragraphs, there's a div element with its height and line-height set to 0, along with margins at 0 as well. Ideally, the paragraphs should be right next to each other without any space from the div, but in IE6, this does not happen. The issue seems to be exclusive to Internet Explorer 6 as it works fine on all other browsers.
Below is the HTML snippet with inline styles:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Test</title>
</head>
<body>
<div id="container" style="border: 1px solid blue;">
<p style="margin: 0;">
Some text
</p>
<div style="height: 0; line-height: 0; margin: 0; border: 1px solid red;">
</div>
<p style="margin: 0; border: 1px solid green">
Should be right below "Some text"
</p>
</div>
</body>
</html>
A few borders have been added for visual clarity.
Check out the screenshot below to see how IE6 handles this:
Any suggestions on fixing the small gap between the bottom of the red div and the top of the green paragraph?