Product Details page in Safari and Firefox

[mfreeze]

In the AC 7.0.4 admin, using Safari or Firefox, the product details page is messed up and the left hand menu is unreadable. Any other option selected on the left menu is fine. In Firefox, it can be fixed by navigating to another selection on the left menu then returning to product details or by changing the screen resolution to 1440 or less. In Safari, it is messed up no matter what you do.

See the image below.



Any idea what the problem might be? I checked the CSS in Firefox and made some changes dynamically but nothing seemed to work.

[igavemybest]

It's never worked right for me in Firefox. I just use IE.

[michael.p.larsen]

I had the same problem. IIRC I just set the width on the container of the menu items.

[jmestep]

Ditto for always having a problem in FireFox. At one time, maybe in 7.0, it worked OK, but not it later builds.
I never have a problem in my local test sites though, so I thought it might be a network latency problem.

[mfreeze]

I use IE myself so it was never a big issue. But now I have a client that uses only Firefox and Safari on his MAC and won't use IE due to security concerns.

In Safari, the problem exists both in remote and local sites.

I checked the width on the menu container and it is set to 170 and changing it does not have any effect. I'm still looking but it is very frustating that it is only on the product details page but not on any other page on the menu.

[michael.p.larsen]

It didn't work for you?

This is what I have in the Admin/Products/ProductMenu.ascx file:

Code: Select all

<asp:Panel ID="ProductMenuPanel" runat="server" Width="170px">

You could also try creating a CSS class and assigning it to the panel...
The class could have:

Code: Select all

.ProductMenuPanelWidth
{
     width: 170px !important;
}

Then change the panel:

Code: Select all

<asp:Panel ID="ProductMenuPanel" runat="server" Width="170px" CssClass="ProductMenuPanelWidth">

[mazhar]

Well I have another idea for a quick fix. What about increasing the overall admin layout width. Give a try edit the AbleCommerceAdmin/style.css file and locate following style

Code: Select all

#pageLayout

then change its width from 980 t0 1024 something like

Code: Select all

#pageLayout
{
	width:1024px;
	background-color:#E3EFFF;
	margin: 19px auto 0 auto;
}

Hopefully that should fix the problem

[mfreeze]

Your original solution with the ProductMenuWidth worked. I had added #ProductMenuPanel with a width of 170, which should have worked but didn't. When I made your changes, it worked. I still have one issue in Safari. The menu is working but the middle content is stretching. That is probably another width issue.

[michael.p.larsen]

I think maybe the addition of the css "!important" may have fixed it. This tells the browser to display at 170px no matter what.