border displaying too hight

[rrmcguire]

I have two pages:

http://www.meadowlarkco.com/customersnew2.php

and

http://www.meadowlarkco.com/carriersnew.php

on the customers page the border surrounding CSS splashcontentleft is displaying in line with the image next to it.

on the carriers page the border surrounding CSS splashcontent right is a little highter than the image.

Both images are the same height, but I cannot figure out why the border isn't in line with the image on the carriers page?

Any help would be appreciated.

thanks

 

[Vragabond]

It is because of the collapsing margins. The concept is not that easy to understand, but to dumb it down for your example, a child element with a margin merges the margin with its parent. That means that the <p> element in the carriers text margin gets merged with the splashcondense element and pushes the whole element down. The h1 element is ignored, because it is floated and thus removed from normal document flow. It does not happen on the other page, because there the h1 element is not floated and has margin-top: 0.

If you give your paragraph margin-top: 0, you should see the result you're after.

I hope that helps.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]