Chrome, Firefox, and IE9 Problem

[RiverCity]

Hello,

Not sure if I'm in the right place or not, if not just let me know.

I just finished uploading several thousand new images for some new items. I don't know if this problem was happening before or not as it's been a long time since I checked it.

The site looks good in Chrome and Firefox but in IE9 some of the images are enormous and distort the whole page.

Here is an example page to view in the different browsers if anyone would like to take a look and give me any suggestions. The page looks good in Chrome and Firefox, only messes up in IE9. Some of the images may be missing, I haven't gone back to pick up the missing ones yet, found this problem first.

http://www.missyscollectibles.com/in...dex&cPath=2020

Not all pages are messed up like this in IE9 but there are a lot of them that are.

Thanks for any suggestions, I'm not a programmer but if it's easy enough I can do some editing if needed.

Jim

[mc12345678]

Hello,

Not sure if I'm in the right place or not, if not just let me know.

I just finished uploading several thousand new images for some new items. I don't know if this problem was happening before or not as it's been a long time since I checked it.

The site looks good in Chrome and Firefox but in IE9 some of the images are enormous and distort the whole page.

Here is an example page to view in the different browsers if anyone would like to take a look and give me any suggestions. The page looks good in Chrome and Firefox, only messes up in IE9. Some of the images may be missing, I haven't gone back to pick up the missing ones yet, found this problem first.

http://www.missyscollectibles.com/in...dex&cPath=2020

Not all pages are messed up like this in IE9 but there are a lot of them that are.

Thanks for any suggestions, I'm not a programmer but if it's easy enough I can do some editing if needed.

Jim

I haven't gone to look at the affected pages, but for those pages on which it isn't a problem is the product a different type than on those that it is? Typically distortion may occur because of things like CSS rules (or lack of) applicable to the browser being used. I'm not a CSS whiz, so may not be able to give a satisfactory solution. I'm able to modify what is present and am still working on learning that language.

[RiverCity]

I have two suppliers that I use and the image problem is with products from both. I have the New Products showing below the products on the category pages which have the huge images and they look good, it's the images above the New Product section, when I click on one of the images and go to the product's page, everything is good. It appears that it's only on the category pages that the images are huge. Again, this is only when using IE9 that it happens, the other browsers are good.

[mc12345678]

I have two suppliers that I use and the image problem is with products from both. I have the New Products showing below the products on the category pages which have the huge images and they look good, it's the images above the New Product section, when I click on one of the images and go to the product's page, everything is good. It appears that it's only on the category pages that the images are huge. Again, this is only when using IE9 that it happens, the other browsers are good.

So my question related to product type was not about the item(s) being sold, but whether the items were product_general, document_general, etc...

That said, if it is only happening on the categories page(s), then it is definetely CSS related. I'll see if I can take a look. I happen to have IE9 available.

[mc12345678]

Okay, so it seems there are a couple of things going on. In IE9, the responsive.css file is loaded and the steps are taken in it to modify the view. I didn't test this in multiple browsers (Just Firefox and IE9), but it looks like if in the includes/templates/business_blue/css/responsive_theme.css on line 2 or where the following statement is declare: This function might help, change

.listingProductImage {
max-width: none !important;
}

to:

.listingProductImage {
max-width: 100% !important;
}

or just remove the !important part from it... In IE9, the !important is forcing all statements after that to be ignored...
Try it out on a few different browsers. It may modify how the other browsere resond.

[RiverCity]

Okay, so it seems there are a couple of things going on. In IE9, the responsive.css file is loaded and the steps are taken in it to modify the view. I didn't test this in multiple browsers (Just Firefox and IE9), but it looks like if in the includes/templates/business_blue/css/responsive_theme.css on line 2 or where the following statement is declare: This function might help, change

.listingProductImage {
max-width: none !important;
}

to:

.listingProductImage {
max-width: 100% !important;
}

or just remove the !important part from it... In IE9, the !important is forcing all statements after that to be ignored...
Try it out on a few different browsers. It may modify how the other browsere resond.

Ok, thanks, I'll give it a try and see what happens, I know nothing about css but your instructions are clear enough I should be able to give it a try. I'll let you know if it works.

Thanks

[RiverCity]

Ok, thanks, I'll give it a try and see what happens, I know nothing about css but your instructions are clear enough I should be able to give it a try. I'll let you know if it works.

Thanks

That seems to have helped quite a bit, at least good enough. On one page, one image is still larger than it should be but at least they aren't overlapping each other like they were. Don't have Firefox on this computer but Chrome still looked good after making the change.

Thanks for the help,

Jim

[mc12345678]

That seems to have helped quite a bit, at least good enough. On one page, one image is still larger than it should be but at least they aren't overlapping each other like they were. Don't have Firefox on this computer but Chrome still looked good after making the change.

Thanks for the help,

Jim

Ihad checked it also on firefox with the changes, and didn't see a problem.

As for this one image that has the problem, could you identify the eb address and I could maybe assist? (Or someone else that passes by. :) )

[RiverCity]

Ihad checked it also on firefox with the changes, and didn't see a problem.

As for this one image that has the problem, could you identify the eb address and I could maybe assist? (Or someone else that passes by. :) )

The url to the one I mentioned is: http://www.missyscollectibles.com/in...dex&cPath=2020

IE9 is what I used for this address, it'll be obvious which product it is when you see it, it's the middle item on the top row. All the images in IE9 are larger than they should be but I can live with how they are, at least all but this one. It's the only one I can find just spot checking that is still too big. If you scroll down to the New Products for March, below the products on that page, they are the correct size that all the images should be but again, except for this one, I could live with how they are if it's going to be too complicated for me to fix it.

Thanks again,

Jim

[mc12345678]

The url to the one I mentioned is: http://www.missyscollectibles.com/in...dex&cPath=2020

IE9 is what I used for this address, it'll be obvious which product it is when you see it, it's the middle item on the top row. All the images in IE9 are larger than they should be but I can live with how they are, at least all but this one. It's the only one I can find just spot checking that is still too big. If you scroll down to the New Products for March, below the products on that page, they are the correct size that all the images should be but again, except for this one, I could live with how they are if it's going to be too complicated for me to fix it.

Thanks again,

Jim

Not to get your hopes up that an answer is already determined, but wanted to say that it probably is the same type of situation where the !important flag is assigned before another rule and the other rule doesn't get a chance to play. :)

In your other tests, did you try to resize the window as well? Seems that this is a responsive (or responsive like) template.other devices also would be good to test it on like mobile's etc...