Forum Moderators: not2easy
I am having problems trying to render a form the same way in different browsers. The browsers used are Firefox 1.0.4, Internet explorer 6.0 and Opera 7.23 in a Windows enviroment. I am trying to solve this through CSS ways with no luck and I don't even know which browser is doing the thing right and which one is doing it wrong.
The problem is related to a <fieldset> element with a <p> element inside, having the latter a defined top and bottom margin.
(I should state that the first move made is to zero all margins and paddings through CSS.)
Firefox renders the <p> element with no margins, it shows the fieldset's border just stuck to the content of the <p>. I.E. and Opera show the margins instead.
I have tried adding a <div> with top and bottom margins around the <p> but Firefox keeps rendering the fieldset's border next to its contents: again no margins. I.E. and Opera act as if there were no <div>, the same amount of margin as if there only a <p> element.
Next text: <fieldset> with a <div> and a <p> inside, but <div> has a padding instead of a margin. Now Firefox shows both div's padding and p's margin. I.E. and Opera render it the same way.
Next text: adding a padding to <fieldset>. The padding applied is added in the three browsers, but Firefox still doesn't show the margins of the <p> element in those cases they weren't show previosly.
Is there any way of unifying the way this combination is shown through these browsers?
An example of the code (CSS plus XHTML):
----------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
fieldset {
border:solid 1px #000;
}
p {
margin:20px 0;
}
div.margin {
margin:20px 0;
}
div.padding {
padding:20px 0;
}
</style>
</head>
<body>
<form action="">
<fieldset>
test alone, with no P around
</fieldset>
<fieldset>
<p>test inside P</p>
</fieldset>
<fieldset>
<div class="margin"><p>test inside P and DIV with margin</p></div>
</fieldset>
<fieldset>
<div class="padding"><p>test inside P and DIV with padding</p></div>
</fieldset>
----------
Thanks for reading.
Best regards,
Zeldere.
Another test I made was to replace <p> margins with the same amount of padding. Firefox shows them, as well as the rest of the browers, but if another <p> is added next to the first one the paddings add up instead of joining.
Regards,
Zeldere.
