Hi. Thanks for looking.
The page this thread considers is <!-- m --><a class="postlink" href="http://www.jagerlooff.nl/test.htm">http://www.jagerlooff.nl/test.htm</a><!-- m -->
This is the CSS used:
<style type="text/css">
<!--
* {
margin:0;
padding:0;
border:0px none;
}
html, body {text-align:center;}
#container {margin:63px auto 0 auto; width:750px; text-align:left;}
body {
background:#c0c0c0 url('images/stipple.jpg') repeat-x top;
font-size:0.7em;
font-family: Arial, Helvetica, sans-serif;
color:#000
}
#banner {
margin-top:0px;
margin-left:-1px;
height:200px;
background:#c0c0c0;
}
#menu {
background:#c0c0c0;
}
#content {position:relative;
height:200px;
background:#eee;
}
#content div p{
margin-top: 7px;
margin-bottom: 7px;
margin-left: 7px;
margin-right: 7px;
}
#left {
float:left;
overflow:auto;
width:550px;
height:200px;
background:#fff;
}
#right {
margin-left:550px;
background:#f2f2f2;
}
#footer {
margin-top:16px;
color:#777;
text-align:center;
}
ul, li {
display:inline;
list-style-type:none;
}
li {
}
#menu a {
color:#000;
}
#footer a {
color:#777;
}
-->
</style>
My questio is about the following piece:
}
#content div p{
margin-top: 7px;
margin-bottom: 7px;
margin-left: 7px;
margin-right: 7px;
}
In IE it works fine. Also when iI use padding instead of margin. On the other hand in Mozilla the margin or padding settings doe not have any effect.
Is there a Pro out there how can help me solve this issue??
Thanks.Rather than using margins on the <p> element, you're better off to use padding on the parent element.
Why? Because padding doesn't 'collapse'. Margins in CSS exhibit a wierd collapsing feaure that is very useful, but occasionally causes some confusion, as it is in your case.
What's happening is that the left and right margins of the <p> elements are collapsing to be the outside margins of the containing div. If you're determined to use margins, you can set 1px or padding or border on the parent and this will prevent the collapse, since the marign can't collapse through some other border thickness.
If that makes no sense, there's lots of blogs that explain the behaviour better. Google is your friend.
Meanwhile, I recommend using padding when padding is what you're trying to acheive. Just don't forget to use the tantek-filter for your IE5 viewers.Could you please adjust my code to what you're suggestion. I am no expert zo I could use your help on this.
Thanks.I added the tankek filter. I searched via Google. and added now the highpassfilter.css. Is this what you mean?
Look at <!-- m --><a class="postlink" href="http://www.jagerlooff.nl/test.htm">http://www.jagerlooff.nl/test.htm</a><!-- m -->
Look can see it in the source code.
I edited the marging to padding to:
}
#content div p{
padding:7px;
}
but still no effect in Mozilla.Actually, only top and bottom margins collapse. Left and right margins never collapse. Check out the W3C HTML validator: <!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A//www.jagerlooff.nl/test.htm">http://validator.w3.org/check?verbose=1 ... l/test.htm</a><!-- m -->
Most of those errors won't affect browsers. What you really seem to be using is HTML 4.01 Transitional, switching to that doctype will get rid of a number of those inconsequential errors. The one that's goofing Mozilla up is the missing end-div tag. If your CSS is correct and there are still problems, always validate your HTML. It catches simple mistakes that fatigued eyes easily miss
The page this thread considers is <!-- m --><a class="postlink" href="http://www.jagerlooff.nl/test.htm">http://www.jagerlooff.nl/test.htm</a><!-- m -->
This is the CSS used:
<style type="text/css">
<!--
* {
margin:0;
padding:0;
border:0px none;
}
html, body {text-align:center;}
#container {margin:63px auto 0 auto; width:750px; text-align:left;}
body {
background:#c0c0c0 url('images/stipple.jpg') repeat-x top;
font-size:0.7em;
font-family: Arial, Helvetica, sans-serif;
color:#000
}
#banner {
margin-top:0px;
margin-left:-1px;
height:200px;
background:#c0c0c0;
}
#menu {
background:#c0c0c0;
}
#content {position:relative;
height:200px;
background:#eee;
}
#content div p{
margin-top: 7px;
margin-bottom: 7px;
margin-left: 7px;
margin-right: 7px;
}
#left {
float:left;
overflow:auto;
width:550px;
height:200px;
background:#fff;
}
#right {
margin-left:550px;
background:#f2f2f2;
}
#footer {
margin-top:16px;
color:#777;
text-align:center;
}
ul, li {
display:inline;
list-style-type:none;
}
li {
}
#menu a {
color:#000;
}
#footer a {
color:#777;
}
-->
</style>
My questio is about the following piece:
}
#content div p{
margin-top: 7px;
margin-bottom: 7px;
margin-left: 7px;
margin-right: 7px;
}
In IE it works fine. Also when iI use padding instead of margin. On the other hand in Mozilla the margin or padding settings doe not have any effect.
Is there a Pro out there how can help me solve this issue??
Thanks.Rather than using margins on the <p> element, you're better off to use padding on the parent element.
Why? Because padding doesn't 'collapse'. Margins in CSS exhibit a wierd collapsing feaure that is very useful, but occasionally causes some confusion, as it is in your case.
What's happening is that the left and right margins of the <p> elements are collapsing to be the outside margins of the containing div. If you're determined to use margins, you can set 1px or padding or border on the parent and this will prevent the collapse, since the marign can't collapse through some other border thickness.
If that makes no sense, there's lots of blogs that explain the behaviour better. Google is your friend.
Meanwhile, I recommend using padding when padding is what you're trying to acheive. Just don't forget to use the tantek-filter for your IE5 viewers.Could you please adjust my code to what you're suggestion. I am no expert zo I could use your help on this.
Thanks.I added the tankek filter. I searched via Google. and added now the highpassfilter.css. Is this what you mean?
Look at <!-- m --><a class="postlink" href="http://www.jagerlooff.nl/test.htm">http://www.jagerlooff.nl/test.htm</a><!-- m -->
Look can see it in the source code.
I edited the marging to padding to:
}
#content div p{
padding:7px;
}
but still no effect in Mozilla.Actually, only top and bottom margins collapse. Left and right margins never collapse. Check out the W3C HTML validator: <!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A//www.jagerlooff.nl/test.htm">http://validator.w3.org/check?verbose=1 ... l/test.htm</a><!-- m -->
Most of those errors won't affect browsers. What you really seem to be using is HTML 4.01 Transitional, switching to that doctype will get rid of a number of those inconsequential errors. The one that's goofing Mozilla up is the missing end-div tag. If your CSS is correct and there are still problems, always validate your HTML. It catches simple mistakes that fatigued eyes easily miss