Ok, the last few days have been interesting. Trying to convert my test page into a modern page has been quite an experience. Now I finally got the CSS and the xhtml to validate. Things display ok (even in that crappy IE). Except for my navigation bar has a 1 inch margine on the top and bottom. I looked through my code multiple times, did some tests, and I still can't seem to figure out what is causing this. http://www.highpoly3d.com/tutorials/wings3d/index.php
#menu { height: 25px; margin: 3em 0; padding:0 1em; border-bottom: 1px solid black; border-top-width: thin; border-top-style: dotted; }
I thought 3em was just a chracter thing and would only make a small pixel difference? Anyhow, i'll edit that out and give it a whirl.. Thanks.
Ok im back it works. Seems i'll need to pay more attention to this em stuff and do reading on it. Anyway, you guys rock... that's why i bookmarked this site like 3 times in 3 days.
em refers to the size of a character and is not "pixel related" so to speak. If you have a font that only fits one letter on your screen at a time, then 3em is three screens. The advantage of it is that everything keeps a nice relationship. For instance, if you have padding of 1em, your text will always have one character of room to "breath" regardless of how large the user makes the text. If you were to specify 10 pixels, that might look good at "normal" size, but users can adjust the fonts to be larger or smaller, so that distance on a large font would not feel as adequate. Pixels are best for "drawn" elements. For instance, if you want a pixel of space between two borders or 10 pixels between two pictures. Hope that helps.