http://www.missionenvironment.com/ I am trying to get my top logo to have no space between the nav under it, much like it is in my forum and my blog. I cannot figure out why it is acting differently elsewhere. Help? It actually works in IE but not firefox. whats going on...??
Images are a 'special' type, though more modern browsers (opera, Safari) treat it more as an inline-block. Either way, it's an inline element you've placed inside a DIV, so the whitespace inside the DIV is being treated as renderable content. Easiest solution: Set the image to display:block; Though I'd consider axing the use of the image tag since that's a presentational image, and just use an image-replacement method like glider-levin instead. BTW, you know your menu breaks on 'large font' machines because you used dynamic sized fonts, right?
Hrm, I use veritcal-align: bottom to fix that usually... Not sure what the problem is with your layout though...
<img src="jpg.jpg" style="display: block;" /> I think he meant that. No idea what glider-levin is....
I think what deathshadow means is that because the image is an inline element, it will have space for descenders (g, y, j, etc) by nature. To make the image not have any space for descenders (aka kill the space below) is to set the display mode to block or vertical-align:bottom. And, Gilder/Levin is an image replacement method ( "I will google before asking questions" )
About 20% of windows CRT users run their machines one 'notch' higher on resolution than everyone else using a setting called "120dpi/Large Fonts", this setting is becoming increasingly popular since vista made it easier to get at (one of the FEW good things I have to say about V), and as smaller LCD's get higher resolutions. (1920x1200 native res on a 17" laptop? 1440x800 at 15"?) Normal windows "small fonts" is 96dpi, so on large font machines if you use PT font sizes, they will be 25% larger on 'large font' computers. Likewise, if you use %/em based on default, they will be 25% larger in IE/Opera. (Gecko and KHTML/Webkit ignore the system metric on their default fonts, but pay attention to it for PT, making both browsers garbage for people who want larger fonts or the same physical size fonts at a higher resolution) Because of this enlargement, if you want your page to actually work on large font machines without graphical glitches, if working in fixed width you should use the same metric as your fonts for the width... either change your px width to em, or change your em fonts in something that's supposed to render as a single line to px. This page I threw together a few years ago shows the quirks of all the different font sizes at different resolutions in different browsers... Pay close attention to who the 'odd man out' is - it's NOT IE. http://battletech.hopto.org/for_others/font_test.html Attached is a picture of how it currently looks at 'large fonts' in Opera/IE... which is nowhere near as bad as it was yesterday (the menu was double the width of your 800px friendly container)