Browser Compatibility Differences

[DesignLessDesign]

Hello All,

I have created a website for my company and have already gone live, even though I know I have one slight issue.

The problem is that the shopping cart looks great in firefox and internet explorer but for some reason is padded to the right of my tpl header and footer. I've tried playing with the different css values but nothing seems to make a difference to the safari browser without skewing the firefox and IE look.

I understand that I probably won't get many hits on this post because not everyone has Safari but I'm hoping that sombody will have encountered this problem before.

Check out my website here Computech Systems Catalog

[mprough]

This might help....

http://www.sitepoint.com/forums//sho...d.php?t=487888

I know that this post is already ancient, but in case anyone is having the same problem and finding this via Google search, I would say...

It's all about line-height. Set a line height for whatever it is you want to match padding on and that will usually kick all of the browsers into shape.

Doron

~Melanie

[gjh42]

Styling differences especially between two standards-compliant browsers like FF and Safari often are due to different error handling. Fix the HTML errors and see what happens:
http://validator.w3.org/check?verbos...og%2Findex.php

(I don't have Safari, so don't know how they display differently.)

[DesignLessDesign]

Here is a pic of the firefox that works correctly
[SCR]http://www.computechracing.com/images/probFirefox.jpg[/SCR]

Here is a pic of the Safari that has the problem
[SCR]http://www.computechracing.com/images/probSafari.jpg[/SCR]

[DesignLessDesign]

Issue has been fixed.

To all that were curious. I had a padding-top of 3px applied to the spry menu bar container that was originally 2px. It was originally 2px because I designed it using safari and looked good but when I checked it out on IE I had to add an extra pixel of padding to allow the spry menu to align into my background image correctly.

The issue was that the container that held the header was x amount tall and adding that extra pixel created an overflow and caused the shopping cart container to shift to the right of the overflow. Keeping the extra pixel to the padding and increasing the header container by 1px allowed a smooth solution.