Browser Compatibility: Looks good in Firefox and IE, slightly off on Opera

Hello all,
I was wondering if someone could helo me with an issue. My home page looks the same in Firefox and IE, but there is a slight difference in Opera. The images on the top go slightly beyond the brder in Opera. There must be something that I need to add to my coding to accomodate padding in the Opera browser, but I do not know what it is. Any help would be appreciated. Here is the link.

best regards,
Joe

 

Bump. This thing got pushed down pretty fast.

thanks,
Joe

 

Quick note : both browsers report the image is the same size : 55x75

BBL with more

 

More info : it looks like FF may not be actually placing 4px between the images whereas opera is (or the other way around).

Trying playing with the --> style="padding-right:4px" <-- code in the img code to get the desired results.

To me the space firefox is rendering as 4px does not look at all like 4px.

I did some test and it seems 4px should be more like what opera is displaying instead of that little sliver firefox is claiming is 4px.

Also (from looking at your css style sheet) you should know that sometimes firefox doesn't properly render a 0px img border of zero without something like this :

img {border:none; }

a:img {
border-style: none;
border: none;
}

I had issues with firefox displaying borders on img links when I told it not too without doing something like the above.

Hope that helps

 

Actually, the culprit is the align attribute in each of the images. Images are inline elements by their very nature, and so they don't need to "align" since they will do that automatically.

Remove the align attribute from the images and your site will work fine in IE 6, IE 7, FireFox 1.0.3 and Opera 9 (among others - the ones I listed are the ones I personally tested the site in).

By the way, VERY nice layout.

 

Thanks for taking the time to look.
Joe

 

Thanks, I did try messing with the align and never seemed to get it looking the way I wanted. But I think you are right. I will try what you recommend and let you know the result.

I appreciate your feedback on the layout.

best regards,
Joe

 

Hey Dan,
I tried what you recommended and it looked good in preview, but when I went to view it in IE and Firefox, there were larger gaps and not all images fit in each row. Is there a style that I need to add to my stylesheet for inline elements to appear correct?

thanks,
Joe

 

I don't see why there would be a problem. I had it working fine live on my end. I didn't even add any custom styles at all.

Have you made any changes to the source code since I last looked at it (other than removing the align attributes)?

 

Not that I can think of. It's odd. It looked perfect from the front end. As soon as i removed the align attribute, everything moved tighter and appeared perfect. Then I preview in the browser and it looked crazy. I will give it another try tonight.

 

Hey Dan,
I did it again and you were right. It now looks the same in all three browsers I checked. The thing I do not uderstand is that I use Dreamweaver as an editor. As I looked through the code, it was correct, but didn't look right viewing in the browser. When I put each tag directly after each other instead of putting each new one on a new line, it corrected. Why should that make a difference. I like to organize my code so that each image is on a separate line. Was that the problem or should that not matter?

thanks,
Joe

 

It shouldn't matter one iota. Though Dreamweaver does have its own host of issues (part of the reason why I gave it up and started hand-coding).