Making website look better on Windows

[commdiver]

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

[gjh42]

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;
}

[commdiver]

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!

[gjh42]

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.

[commdiver]

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!

[kuroi]

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

[commdiver]

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)?

[gjh42]

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.

[gjh42]

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.

[commdiver]

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!