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 (http://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.


If you have


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/2006/hotproperty1_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?

[ackerley1]

Easywebdev...

It is all set in tables... should that not constrict it? I have done this many times on various sites and have never encountered this.

Tried the line break thing and that didn't work either...

Wondering if I did something within in PS that caused this?

[texxs]

Can't seem to find fix in the html. Don't see any line breaks at all, blank img tags either . . . looking at PSD now . . .

[ackerley1]

I just checked the html file produced by PS prior to me changing or adding anything and it displays perfect across all broswers...

Is there a way to compare code between files in DW?

[texxs]

same here. I'm thinking it has something to do with the wrapper div or the hdr div.
I noticed it's a php file, I viewed the css file and there is a border in the wrapper style (border: 0px 2px 0px 2px; -- it goes top, left, bottom, right? -- if so then it shouldn't effect things).

hmmm . . .

[ackerley1]

Clockwise... T-R-B-L... but in this case it is no matter...

hmmm...

Since the raw html file from PS works... I am going to compare the two file and see what is different...

Thanks for all the help

Rob

[texxs]

ya i tried setting those borders all to zero to no avail.

Maybe if we sleep on it . . .

good luck

[speed]

Add the following to the end of format.css and you should be good to go:

#Table_01 img {
display: block;
margin: 0;
padding: 0;
}

[ackerley1]

Well that little bit of code worked perfectly... It must have been the display: block; parameter becuse I tried the padding and margin parameters and it did nothing.

Thanks for all the help everyone...

Rob

[texxs]

That's a nice tip for all of us. Nowadays we all run in to a table in a div and wrapper div's more and more.

Thanks speed!