Site not rendering correctly in FireFox

Hi All,

I am trying to figure out the solution to a problem. My site renders fine in IE but in FireFox the right column spills over the right side of the mainwrapper border. I have my site set up using all three columns. The border between the left and middle columns is far less than the border between the middle and right columns.

I have the latest version of Zen Cart installed. I have the main wrapper set at 90% because I have a background border that I want to show on all sides. Setting this to 100% did not fix the problem.

I am using a custom template copied from template_default. I am using no other style sheet. I have tried changing the column widths and even tried changing them to 25% (in Admin.) This had limited results. It did push the right column to the left but the center column is still not centered.

I did check to make sure my site validates and it does except from problems related to external banner links in my footer banner.

I checked a few other websites that use Zen Cart that render correctly in FireFox and found that they are utilizing the Classic Template. Is there something from the Classic Template that I should copy over to my custom template? I would really like to get things fixed for FireFox as more and more of my customers are using this browser.

Thanks!

what is the url???

Actually I've attached my CSS. Thanks for helping!

what is the url???

Hard to see interaction from a file cannot see the ie vs ff look

Hello,

I'd rather not share my URL. I'll see if I can figure it out on my own. I appreciate you willingness to help though! :)

Your choice..."A online cart that one must guess the url???"

Hello,

I copied and pasted another CSS from another website to determine that it was a CSS issue and not a template issue. I have narrowed my problem to the margins I have set for the left and right column containers. Basically I want a 1.5em margin around my sideboxes on both the left and right side. I want my center column to be centered in the remaining space in the center.

When I delete these margins the center column behaves nice and centers itself. When I add the margins to the left and right sidebox containers then the center column pushes the right column over so that it is overlapping the main wrapper.

It's almost as if the center column needs a container too. You would think that the left and right margins would cause the center to fill in with the space that is left.

Hello,

I figured out how to get my side columns to render the same in both IE and Firefox. I had been trying to set the margins in too many places and in too many ways! My solution is below:

The column width of my sideboxes is 160px set in Config/Admin. To add a margin to the left side of the left sidebox and the right side of the right side box I changed the left and right column width to 180px (located in Config/Admin about a third of the way down.)

My CSS Settings are:

My Center column setting is:

.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 1.0em;
}

My Left Box Container setting is:

.leftBoxContainer {
border: 1px solid #9F5B8C;
margin-top: 1.5em;
margin-bottom: 1.5em;
}

My Right Box Container setting is:

.rightBoxContainer {
border: 1px solid #9F5B8C;
margin-top: 1.5em;
margin-bottom: 1.5em;
}

I hope this saves somebody time! :)