Foundation Framework CSS clashes with Google Maps Block
PermalinkThe zoom slider appears faint and distorted. It still works but it’s very difficult to see, whilst the toggle button remains perfectly intact.
I have narrowed the offending CSS down to:
img { height: auto; } img, object, embed { max-width: 100%; }
If comment out the offending CSS it enlarges all the images on my site.
I upload all the images via C5 and do not use separate thumbnail images.
I have two workarounds:
1) A new page with an embedded Google maps iframe.
2) Comment out the clashing CSS and use separate and appropriately sized thumbnail images on my site.
Are there any better alternatives?
Thanks in advance!

I did try but it isn't the object. Its the img tag in the following CSS:
img, object, embed { max-width: 100% }
If I remove the img tag google map regains its zoom but all my the thumbnail images enlarge to their original size.
img[src$=".jpg"], object, embed { max-width: 100% }
Thats been driving me nuts for ages!
I did find this, but nothing I did to test or change it made any difference.
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
#map_canvas img,
.google-maps img {
max-width: none;
}
Any suggestions would be appreciated.
This solution helped:
img[src$=".jpg"], object, embed { max-width: 100% }
Original block code was only
.googleMapCanvas{ width:100%; border:0px none; height: 400px;}
I added
.googlMapCanvas IMG {max-width: none;}
#googleMapCanvas131 IMG {max-width: none; }
I did this in the "over-ride block" location. Problem solved.
As noted, my theme was bootstrap based, not foundation.
.googleMapCanvas img {max-width: none}
Regards
Torsten