My brain is going to explode.
This is the page that I'll reference:
<!-- m --><a class="postlink" href="http://www.ksu.edu/projects/carbon/james/">http://www.ksu.edu/projects/carbon/james/</a><!-- m -->
Ok, I can't for the life of me get this seemingly easy padding / margin problem to go away. In the center section, I want the paragraphs to have a 15px margin around them. Seems easy doesn't it? Nope.
If I set the margin to 0, they all tuck up under each other and in the corner like they should. Ok, so just set the margin to 15px and all is fine. Ironically, it works in IE6, but bonks in my Firefox 0.9 ( and other mozilla code based browsers ). The problem is that when any kind of margin is set on the paragraphs, there is then a margin that now appears under the TabContent section, above all three middle sections.
The only thing I could think up for this to happen is that the left and right sections are floated, and the middle section isn't and it somehow has a margin collapsing problem. I dunno.
I would GREATLY apprecaite some help on this, as it is making my brain really hurt.
Thanks.add 15px padding to the container blockOk, I seemed to fix the problem by putting a 1px padding on the contaier div and then reducing my margin on the paragraphs to 14px. This only puts a 14px padding between the paragraphs but that's ok I guess.
I guess my bigger questions is why this happened at all. I still don't understand why. That answer is probably more useful to me for the future than finding the actual solution.Originally posted by thejoker101
Ok, I seemed to fix the problem by putting a 1px padding on the contaier div and then reducing my margin on the paragraphs to 14px. This only puts a 14px padding between the paragraphs but that's ok I guess.
I guess my bigger questions is why this happened at all. I still don't understand why. That answer is probably more useful to me for the future than finding the actual solution.
Actually, I think, yet again, Gecko gets something annoyingly right. Recall that vertical margins collapse ( <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">http://www.w3.org/TR/CSS21/box.html#collapsing-margins</a><!-- m --> ). Without padding in the containing block, the vertical margins of internal elements bleed over the bounds of the containing block. The fixes are easy, one of which you've already discovered:
1) Add padding to the containing block. That forces the vertical margins of internal element to remain within the containing block.
2) Set the top margin of the first element in the containing block to zero. Set the bottom margin of the last element to zero, and you get rid of the problem.
This is the page that I'll reference:
<!-- m --><a class="postlink" href="http://www.ksu.edu/projects/carbon/james/">http://www.ksu.edu/projects/carbon/james/</a><!-- m -->
Ok, I can't for the life of me get this seemingly easy padding / margin problem to go away. In the center section, I want the paragraphs to have a 15px margin around them. Seems easy doesn't it? Nope.
If I set the margin to 0, they all tuck up under each other and in the corner like they should. Ok, so just set the margin to 15px and all is fine. Ironically, it works in IE6, but bonks in my Firefox 0.9 ( and other mozilla code based browsers ). The problem is that when any kind of margin is set on the paragraphs, there is then a margin that now appears under the TabContent section, above all three middle sections.
The only thing I could think up for this to happen is that the left and right sections are floated, and the middle section isn't and it somehow has a margin collapsing problem. I dunno.
I would GREATLY apprecaite some help on this, as it is making my brain really hurt.
Thanks.add 15px padding to the container blockOk, I seemed to fix the problem by putting a 1px padding on the contaier div and then reducing my margin on the paragraphs to 14px. This only puts a 14px padding between the paragraphs but that's ok I guess.
I guess my bigger questions is why this happened at all. I still don't understand why. That answer is probably more useful to me for the future than finding the actual solution.Originally posted by thejoker101
Ok, I seemed to fix the problem by putting a 1px padding on the contaier div and then reducing my margin on the paragraphs to 14px. This only puts a 14px padding between the paragraphs but that's ok I guess.
I guess my bigger questions is why this happened at all. I still don't understand why. That answer is probably more useful to me for the future than finding the actual solution.
Actually, I think, yet again, Gecko gets something annoyingly right. Recall that vertical margins collapse ( <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">http://www.w3.org/TR/CSS21/box.html#collapsing-margins</a><!-- m --> ). Without padding in the containing block, the vertical margins of internal elements bleed over the bounds of the containing block. The fixes are easy, one of which you've already discovered:
1) Add padding to the containing block. That forces the vertical margins of internal element to remain within the containing block.
2) Set the top margin of the first element in the containing block to zero. Set the bottom margin of the last element to zero, and you get rid of the problem.