This is floated left and also contains an image in the background.
In most browsers, eg. Safari, Firefox, IE8 etc. there’s the correct amount of space between the bottom of the logo in the h1 and the “primary” div but in ie7 and 6 there’s a lot more space than there should be.
I’ve put the sample page up on a web server and wondered if someone could tell me what the problem might be in these two browsers?
You referred to a line height on the h1. I know that there’s a line height on the body element set as part of the reset styles that I had, but I couldn’t see any line height on the h1. Did you mean that the h1 was inheriting the line height from the body? Actually I don’t even know what the line height on the body is for. I just copied it as part of the reset styles that are freely available from eric meyer. Can you explain the purpose of it?
In any case, the change in code did fix the issue which is great.
I know my text-indent technique isn’t the most ideal. I guess I’m just used to it now. I should try your alternative though.
Yes you set the line-height in the body to 1 but that won’t over-ride any default settings that browsers may have explicitly set on an element by default. (Just as setting font-size:13px on the body won’t affect the font-size of the h1 either because it is styled specifically by the browser and not inherited from a parent.)
Normally I set the line-height on the body to around 1.3 anyway to give text room to breathe.