Making website look better on Windows

[commdiver]

I am working on a dummy site at "queencharlotte soaps .com /test" (without the spaces and quotation marks). I built the website on a Mac and tested it in Firefox, Chrome, Opera, and Safari. It looks great in all, but looks awful on Windows (Internet Explorer, Firefox, Chrome, and Opera).

Here are the problems that I need to fix:

1. The logo stretches too far to the left.

2. On any product page, such as this one. the Add to Cart button is not contained inside the box that surrounds the product.

3. On any product page, the product images are much larger than they are on my Mac.


I would appreciate any help, especially from someone who also has a Mac and Windows-based PC. Thank you in advance.

[gjh42]

How does the logo stretch too far to the left? It looks centered in the header when the window is wide enough for it to fit (Firefox 3.6, Windows XP). When the window is too small, the logo sticks out to the right as expected.

You have the listing product boxes defined to a fixed height so they line up evenly; when the content is taller than this, it overflows. What does it do in your Mac?

Your listing image dimensions all look to be 91 x 125 px; what are they on your Mac?

[richphitzwell]

Fix the center box to specified width in the stylesheet or replace the logo with css and reduce the number of characters to be shown on the description in admin>config>maximum values I believe or increase the size of the boxes to the max that it would be in the stylesheet.

[commdiver]

I tested this on Mac OS X 10.6.6 and on Windows XP SP3. This screenshot shows how the logo (which is actually an image in my sales text area) looks like in Firefox for Mac (it looks the same way on the other browsers). This screenshot shows how the logo looks like in Firefox for Windows XP (it looks the same way on the other browsers). This screenshot shows how the add to cart buttons look on my Mac, while this screenshot shows how they loon on my Windows-based PC.

The listing images are scaled down to 125px X 125px on both my Mac and Windows. Do the images and the logo looks fine on your Windows? Maybe it is just the computer I have...

Richphitzwell, how would I show my logo with CSS? If I reduce the amount of characters shown, that would not really fix the problem. Yes, it would not longer overflow, but at the same time there would be less displayed on Mac. Is there a way to make the boxes larges for only Windows?

[stevesh]

Every aspect of your site looks the same here in IE7, IE8 and Firefox, all on Windows XP (though I've never known the OS to make a difference). My IE6 box isn't up at the moment - is that what you're using ?

[commdiver]

I am using IE7. So, if the website is only looking weird on my computer, I have nothing to worry about, correct?

[Vger]

Well, if you built your own template with its own CSS stylesheet then any problem you get in appearance between Mac and Windows Browsers may be down to not coding CSS for Windows non-compliancy problems. And the answer to that queston is "how long is a piece of string".

But it could also be a caching issue on your PC, so I'd suggest you delete all saved content (Temporary Internet Files) and set IE to "Always use the latest version of the page you visit", which will mean it won't load a page cached on your PC.

Vger

[kuroi]

This is primarily to do with the width of your browser window and how your browsers cope when given an image that is too wide to fit the space available (allowing for the big margins you've put each side of your layout).

When the width of the site is smaller than the width of that wide header image some browsers will follow the instructions you gave about preserving the margins leaving the image overflowing, others will ignore the margin settings allowing the right margin to collapse to keep the site wide enough to accommodate the image.

Basically they're coping in different ways with your design issue, and to get them to act the same you need to remove the underlying design problem, e.g. by making that a background image.

[commdiver]

For which CSS tag would I make that the background image for?

What about the product images and product boxes?

Thank you.

[gjh42]

Your first two screenshots are an apples-to-oranges comparison; the window for the Windows view is narrower than the window for the Apple view, so the issue can't appear for the Apple view there.
You would probably make your image a background for the #logoWrapper, though I would have to test it to be sure that's correct for your template.