...

View Full Version : fixing collapsing margins



sixrfan
10-26-2010, 03:59 AM
on this site (http://bestsodforme.com/) i added a bottom margin to the h3 that starts off "Serving corporate and residential properties..." but for some reason it isnt getting applied.

i suspect it has something to do with an issue called Margin Collapsing, which i've read up about but cant figure out how to fix in this circumstance. i tried a border, i tried padding, but nothing worked.

please advise how to fix. thanks!

sujithpr
10-26-2010, 07:09 AM
Try this

<html>
<head>
<style type="text/css">
h3
{
background-color:yellow;
margin-bottom:100px;
}
</style>
</head>

<body>
<h3>This is a heading with specified margins.</h3>
some text

</body>

</html>

Arbitrator
10-26-2010, 07:57 AM
on this site (http://bestsodforme.com/) i added a bottom margin to the h3 that starts off "Serving corporate and residential properties..." but for some reason it isnt getting applied.

i suspect it has something to do with an issue called Margin Collapsing, which i've read up about but cant figure out how to fix in this circumstance. i tried a border, i tried padding, but nothing worked.

please advise how to fix. thanks!This issue has nothing to do with margin collapsing; the problem is a result of the style rule h3 { display: inline; ... } in the file style.css.

Per CSS2.1 (http://www.w3.org/Style/css2-updates/css2/box.html#margin-properties) regarding the margin property and margin-* properties: "These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements."

sixrfan
10-26-2010, 02:21 PM
thanks arbitrator. but when i remove the display:inline from the h3, then the text drops to below the bottom of the picture rather than wrapping around it, which is what i want it to do.

that being said, how do i solve this mess?

teedoff
10-26-2010, 03:29 PM
Have you tried just wrapping the <h3></h3> tags within a paragraph tag? I did this and it seemed to work. Not sure if thats the best solution.

Well I think you still have display: inline on your <h3> tag, so if you remove that style, not sure the <p> tag will work the same.

SB65
10-26-2010, 03:31 PM
Once you've removed the display:inline, the h3 is dropping because of this:


h1, h2, h3, h4, h5, h6 {
clear:both;
font-weight:normal;
}

Remove the clear:both and the text will sit alongside the image.

sixrfan
10-26-2010, 03:43 PM
that worked. thanks!

teedoff
10-26-2010, 03:47 PM
Once you've removed the display:inline, the h3 is dropping because of this:


h1, h2, h3, h4, h5, h6 {
clear:both;
font-weight:normal;
}

Remove the clear:both and the text will sit alongside the image.

Dang I didnt see that! lol...yes that would cause it to drop.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum