Forum Moderators: not2easy
Currently, my site uses what I considered to be the best option to achieve my desired effect for posts. For each post, there are four seperate divs, a div for the rounded header, rounded footer, for the background borders (all of these divs use background-image: url(...) to display the images) and for the post itself (contains the text of the post). They are arranged like this:
<div class="postheader><!-- --></div>
<div class="postbackground>
<div class="post">
POST CONTENT HERE
</div>
</div>
<div class="postfooter><!-- --></div>
The problem is, unless I place the last paragraph of each post in a specially define p.bottom tag (to removed the lower margin) it forces the rounded footer down (because of default P margins), leaving an ugly space between this foot and the rest of the borders. This seems rather hack-ish to me, and I was wondering if there is a better way to do it that you might know of. Thanks in advance!
-scot
<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>
[edited by: tedster at 6:29 am (utc) on May 10, 2005]
In the <head> try:
<style type="text/css">
.post p {
margin: 0;
padding: 0;
}
</style>
I have a special P define that I used to close posts, with a margin-bottom = 0, but I was wondering if there was any other way,
.post p {margin-bottom:0;}
...it will not affect the display of any other paragraph. Because of margin collapsing rules that rendering engines follow, the default margin-top of each paragraph will continue to generate space between all paragraphs. To eliminate that space you would need 0 for BOTH margin-top and margin-bottom.
Then when you get to the bottom of the post, there is no p following, so there is no margin-top, and hence no space at all. One rule for the whole div.
