Problems With Margins On Divs

Please check this page: http://retrocitysunglasses.com/newblank3.html

The first cell inside the table of div “headerlogo” is 65px. In my style sheet, I do not specify a height of 65px for that cell. The extra 5px of spacing creating uneven spacing between the top and the bottom of the entire “headerlogo” div. Why?

Also, there is supposed to be a 10px margin at the bottom of the “headernav” div but it looks like 25px instead… why?

Hi, it’s because images are inline elements and leave room for some text descendants. Set images’ vertical align :slight_smile:

img{vertical-align:bottom;}

The next issue is caused by the <h1> inside "#contentmain". It's pushing the margin throuigh the parent and thus a margin collapse. You can give "#contentmain" a 1px top padding or border to fix this (or get rid of hte <h1>'s margins

You might want to look into a reset :)

*{margin:0;padding:0;}


Or Eric Meyers :)
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Thank you, thank you!

You’re welcome :slight_smile:

Please, Ryan, do not recommend this foolish move. See this argument and [url=http://csscreator.com/node/34411#comment-145749]this follow-up for why css reset considered harmful. (Sorry, Hixie, I couldn’t resist stealing your silly phrase.) In addition to my own arguments, consider Stomme poes’s comments on the harm done to forms by using

* {margin: 0;  padding: 0;}

. I’ll leave it to you to search out her comments.

cheers,

gary

I realize the pitfalls of doing that, however there are no forms on that site (I know that it could be added)

I gave the OP multiple options and if hte OP isn’t well informed enough to know how to cohose resets then let the question be asked here :slight_smile: