Dear All, I believe I have come across a bug in Microsoft Internet Explorer that is present in at least versions 6 and 7. As far as I could find out from searching the Internet, no one else has come across this bug---please feel free to correct me if I am wrong! Could someone please glance through this e-mail: I ask for help towards the end...
The problem can be seen when trying to apply CSS to the following XHTML fragment: <div id="header"> <div class="left"> <p>Left</p> </div> <div class="right"> <p>Right</p> </div> <div class="subheader"> <p>Subheader</p> </div> </div> (See http://www.zap.org.au/~john/web/test-css/test.html for the full XHTML file; the CSS is in http://www.zap.org.au/~john/web/test-css/test.css). In particular, the following CSS definitions to do with margins and padding take effect: p { margin: 1em 0; padding: 0 } #header { margin: 0; padding: 0 } #header div.subheader { margin: 0; padding: 0.5em 0 } #header div.subheader p { margin: 0; padding: 0 } Also: #header div.left { float: left; clear: left } #header div.right { float: right; clear: right } #header div.subheader { clear: both } The problem is that the word "Subheader" is displayed with additional padding under IE6/IE7, as if a "padding-top: 0.75em" appeared somewhere. You can see this at http://www.zap.org.au/~john/web/test-css/test.html , where I have included red borders to make the effect visible. Compare this with the same page rendered correctly, I believe, under Mozilla Firefox, Konqueror, Safari, etc: the word "Subheader" is nicely centred with padding-top and padding-bottom both 0.5em. I have "solved" the problem by using the following: #header div.subheader { margin: 0; padding: 0 } #header div.subheader p { margin: 0; padding: 0.5em 0 } That is, I swapped the padding from the outer "div.subheader" to the inner "p". This seems to work in all the browsers I have access to, as can be seen at http://www.zap.org.au/~john/web/test-css/test-working.html (the CSS is http://www.zap.org.au/~john/web/test-css/test-working.css). Now for my question: does anyone know of or can think of a way to achieve the same result WITHOUT using the inner <p> tags? In other words, I would like something like the following for the markup: <div id="header"> <div class="left"> Left </div> <div class="right"> Right </div> <div class="subheader"> Subheader </div> </div> Is this possible? Have I missed something? Any hints would be appreciated. Yours truly, John Zaitseff -- John Zaitseff ,--_|\ The ZAP Group Phone: +61 2 9643 7737 / \ Sydney, Australia E-mail: [EMAIL PROTECTED] \_,--._* http://www.zap.org.au/ v ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/