Foundation Framework CSS clashes with Google Maps Block
Permalink
I’m using Zurb’s Foundation framework and have come across a CSS conflict with the Google Map block.
The 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:
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!
The 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!
just remove the object and embed from the second statement.
Thanks for advice!
I did try but it isn't the object. Its the img tag in the following CSS:
If I remove the img tag google map regains its zoom but all my the thumbnail images enlarge to their original size.
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.
If your thumbnails are jpg files and the google image is a gif or png or similar you could try using,
img[src$=".jpg"], object, embed { max-width: 100% }
Well, thats solved that!!!
Thats been driving me nuts for ages!
Thats been driving me nuts for ages!
Glad it helped..
I'm experiencing this with a bootstrap v2.3.1 based theme. I have no idea where the conflicting CSS is.
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.
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.
I'm a novice at web design so I'm afraid I may not be of much help.
This solution helped:
This solution helped:
img[src$=".jpg"], object, embed { max-width: 100% }
I fixed it. The following did it.
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.
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.
There is a typo in your solution. For me worked:
Regards
Torsten
.googleMapCanvas img {max-width: none}
Regards
Torsten
