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/
