Making website look better on Windows

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.

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?

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.

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?

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 ?

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

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

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.

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

What about the product images and product boxes?

Thank you.

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.

I tried making it the background image for #logoWrapper, but that did not work. Do you have any other suggestion? Thank you!

It does work - I just tested it on your site with Firebug. Since the logo is not in the template /images/ folder where it belongs, but in the base /images/ folder, you need a different url than the usual form.

stylesheet.css (line 1062)```
#logoWrapper {
background-color: #DCDCDC;
background-image: url(/images/qcs_logo.jpg);
background-repeat: no-repeat;
height: 158px;
}

Ok, that partially fixes that problem. Now the image is cramped in like in, as you can see in this screenshot. Is there a way to fix this?

Thank you!

Add to your #mainWrapper {} rule

min-width: 880px;

or whatever is the narrowest it can get without looking wrong, so the page won't contract below that.

Is there any way to prevent it from moving the page over to the left, as it does in this screenshot? Also, is there any way to get those buttons circled in read lined up in one row (they line up perfectly fine on my Mac)?

Thank you!

Yes. Make the image smaller so that it fits the space.

kuroi:

Yes. Make the image smaller so that it fits the space.

That changes the look again on the Mac. Is there no way for Windows to display this properly without having to distort the look on the Mac?

How can I fix the blurry product images or the Add to Cart button overflowing the border (both of which look fine on the Mac)?

moving the page over to the left, as it does in this screenshot?

The page is off to the right, not the left, in that screenshot. Unless you mean something completely different from how I understand your observation.

stylesheet.css (line 1049)
#mainWrapper {
background-color: #DCDCDC;
border: 1px solid #9A9A9A;
text-align: left;
vertical-align: top;
width: 97%;
}
This is in control, and I don't see min-width anywhere in your stylesheet.

Also, I have noticed that your stylesheet appears to be doubled, with two complete nearly identical stylesheets in one file. This is bad, as it makes it harder to tell what is in control, as well as increasing the page loading time.

Blurry product images are generally a result of serving large images and asking the browser to resize them at runtime. Maybe Mac machines do this better than Windows machines, but it is still a drain on pageload resources. Make your main (small) images the exact pixel size you want them to display at in the product listings.

Can you post an example of how the product text fits in Mac, for the same product where it doesn't fit in Windows? Either the text is smaller or the fixed-size box is resizing in Mac.

stylesheet.css (line 850)

body {
background-color: #000000;
color: #000000;
font-family: verdana,arial,helvetica,sans-serif;
font-size: 62.5%;
margin: 0 10em;
}

This is forcing a 10em (100px) space at each side of the page, so the #mainWrapper can't get over to the left as it should in smaller windows. There is seldom a good reason to put a margin on the body element.

Yes, I meant "right", not "left". Sorry...

The logo picture problem has been fixed. Thank you!

The buttons on the main page are still messed up, even after changing everything you suggested. Would you have any idea why this is?

I am not understanding the image part. The reason why my images are bigger is because I want customers to see a bigger one when they actually click on it. Is there a way to have seperate images, one for the product listing and one for when customers click on the image to enlarge it? Maybe the Image Handler add on...?

If you click here, you will see how the product listing looks like on my Mac.

Thank you!