content positioning different in IE/FF

[Squeak]

So I'm having problems getting some text and images in the footer of my site to align the same in FF2 and IE 6.

This is the site: http://www.soilsensor.com

And this is the css: http://www.soilsensor.com/global.css

At the bottom there is a footer with a copyright notice and an email icon. In FF this is centered nicely between the top and the bottom of the div. In IE6, this is pushed up against the top of the div.

At any rate, I can't figure out what is causing this. I know it's probably something simple, but you know how that goes

[zro@rtv]

first I recomend you take care of the errors and make it validate.

a note.
w/ xhtml, tags that do not have a 'closing tag' ... they 'self close'.... so img, mets, br, etc would be written as such:

<br /> <img src="foo.jpg" />

etc...

also theres no reason for that huge block of <br />'s... use padding or margin instead in the css!

also, don't use target="_blank" in xhtml either. If you REALLY want to control browser behavior add it client side with JS/domScripting.

[koyama]

I agree with zro@rtv. You need to fix those issues.

Originally Posted by Squeak

At the bottom there is a footer with a copyright notice and an email icon. In FF this is centered nicely between the top and the bottom of the div. In IE6, this is pushed up against the top of the div.

I'm sorry, but there is a bug in IE6 that causes the line-height to be “killed” for any line box with a replaced inline element in it. In your case what is triggering the bug is the mail icon image.

Microsoft Internet Explorer: Line-height / Replaced Element Bug

I don't know any good fix for this bug, but as a workaround you can use some top padding in the footer instead of altering the line-height.

[Squeak]

Great, thanks for the tips. This is my first website in probably, oh... 6 years, so I'm struggling a lot to catch up on everything!

[timgolding]

http://w3c.org will get you up to speed