Forums

Advanced Search

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:


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!
designclash1
View Replies: View Best Answer
tallacman replied on at Permalink Reply
tallacman
just remove the object and embed from the second statement.
designclash1 replied on at Permalink Reply 1 Attachment
designclash1
Thanks for advice!

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.
weyboat replied on at Permalink Best Answer Reply
weyboat
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%
}
designclash1 replied on at Permalink Reply
designclash1
Well, thats solved that!!!

Thats been driving me nuts for ages!
weyboat replied on at Permalink Reply
weyboat
Glad it helped..
OKDnet replied on at Permalink Reply
OKDnet
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.
designclash1 replied on at Permalink Reply
designclash1
I'm a novice at web design so I'm afraid I may not be of much help.

This solution helped: 

img[src$=".jpg"], object, embed {
  max-width: 100%
}
OKDnet replied on at Permalink Reply
OKDnet
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.
tsilbermann replied on at Permalink Reply
tsilbermann
There is a typo in your solution. For me worked:
.googleMapCanvas img {max-width: none}

Regards
Torsten