Layout looks wrong on my PC browser, but is fine on my mac

hello i am in the process of creating a store and when i view it on my mac in safari, camino and firefox it shows perfectly. however i just turned on my pc and looked at it in firefox and the image and "new products for october" is so big it pushed everything to the right off the screen :( is there a way i can fix this?? Any help would be greatly appreciated.

you have same problem viewing with IE on your pc or is it just FF? do you have link to the site ? this might be something we need to test with out FF to see.

id have to download ie on my pc so that i am unsure of....the web address is sassyequine.com/store

I have just checked it in IE8 and netscape and it is doing the same thing.

first : IE is integrated with window OS , so your PC should come with one version of IE.

Second : your Images are wayyyyyy to big , you need to make them much smaller. your large image pop up were bigger then my 24inch wide screen monitor.

Now , your site width is set to 90% , so your site will expand to occupy 90% of your browser window , what you see is normal . you can set your site to fixed size so content will be same location regardless of monitor size and resolution .

"Now , your site width is set to 90% , so your site will expand to occupy 90% of your browser window , what you see is normal . you can set your site to fixed size so content will be same location regardless of monitor size and resolution ."

I would love to do this...but I dont know how...could you help be??

i tried making my image smaller but now when i view it in mac its smaller than the "new products for october" and it doesnt look good...and on the pc its lining up better...lol

Open your stylesheet.css located in
/store/includes/templates/desert_noon/css/stylesheet.css

look for following rule .

#mainWrapper {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FBEDD3 none repeat scroll 0 0;
border-color:#B49C78;
border-style:solid;
border-width:0 3px;
margin:0 auto;
text-align:left;
vertical-align:top;
width:90%;
}
change width from 90% to 1130px

now reason for this number is , your center banner is 800px , each side column is 150 px = 300 px , also you have some margins. i suggest to making your banner smaller so your entire site can be set to 980px .
and don't forget to fix your product images. your site takes for ever to load.
hope this helps.

this is the only coding i found with #mainWrapper { :

#mainWrapper {
margin: 0 auto;
background: /url(../images/wrapper_bg.jpg) repeat-y/ #FBEDD3;
text-align: left;
width: 90%;
border: 3px solid #B49C78;
border-width: 0 3px 0 3px;
vertical-align: top;
}

yes. that is the correct rule . extra info was added by my browser and just copied everything :( ..

sorry to keep bombarding you with questions! i went ahead and changed that coding to 1130px....it def lines everything up and looks fine in mac but on pc now you have to scroll left to right to see the whole store.

That is due to your monitor resolution . i did suggest 980px width , as many monitors are at 1024x760 resolution and your page at 980px will leave some room so no scroll bar will appear . but to get there you need to resize your banner first

ok i was also going to try and resize the "new items for october" box also. thank you so much for all your help :smile: