PS header with rollover nav messed up in FF and Opera

[ackerley1]

I am working on a redesign of a site and I have created a header image with a navigation menu in PS. In IE it displays fine, but in FF and Opera, the navigation buttons display with white space between them.

I have checked the padding and spacing to ensure this was not causing it. I have tried changing the doctype to strict. Even played with CSS for a.link etc. styles that may be effecting it.

This is a first time for me and I am out of ideas on how to correct it.

You can view it here:
www.hotpropertybelize.com/2006/temp2.php

Can anyone help me out?

Rob

[texxs]

did you try setting the borders to zero manually? Sometimes that'll do the trick.

[ackerley1]

Yes, I have tried that... even setting border,margin and padding values to zero in the css file. The table is all zero's.

Any other suggestions?

Rob

[texxs]

hmmmm,

page margin (top especially) table size (shouldn't be messed with, but you knew that), umm, um,

Can you post the .psd and a link so I can tinker w/ it?

I've run into this before, I just can't remember what to do to fix it . . .

[ackerley1]

How would I post the PSD? it would be huge...

If I load it to the server with the URL, can you download it that way?

I could email it to you?

[texxs]

yup, I do it sometimes at work. That psd probably won't be so big, and you can take it right back off the server after I download anyway.

p.s. just ftp it like any other image, it'll just take a little longer....

[Easywebdev]

Line breaks. IE is a pain with that.

In your image tags do not have any line breaks between them, if you have to have a break for clarity purposes then place them within the image tag.

eg.
[img][/img][img][/img][img][/img]

If you have
[img][/img]
[img][/img]
then Internet explorer will "helpfully" insert some whitespace that no css padding or margin can remove. That applies to all elements, if you are using tables then put your line breaks within the tags, dont have them between tags.
<td
>
I havent been doing much front end designing this last few years but I thought IE6 was supposed to fix that (bug has been there since IE 4), but apparently not.

[ackerley1]

IE displays fine...it is FF and Opera that create the white space...

Rob

URL to PSD is:
http://www.hotpropertybelize.com/200...perty1_hdr.psd

[texxs]

got it, you can remove. I'll post again in a few minutes

[Easywebdev]

Broken link to the psd. Not sure which browser gave that problem but it was back in the IE 4 days (it may have been the gecko engine and I'm giving IE a bad name) I first came across it. Hav your tried placing your line break within the tags rather than between them?