I am having a problem with the Google Maps API because of conflicting names in my site's CSS. From what I've been able to find, Google Maps uses the name "container" in their code as does my site, so when the map loads it has this nasty white shadow behind it. Is there a way to change the name of the <div> class for this one <div> or does anyone else have any other suggestions (outside of changing thousands of tags!)
Any help you all could provide would be much appreciated! :|
I think you should look for or create a container that's always around the maps thing, and give CSS stuff to #that_id .container. Or something like that. Do you have it live somewhere?
I think you should look for or create a container that's always around the maps thing, and give CSS stuff to #that_id .container. Or something like that. Do you have it live somewhere?
Here's a live version, maybe this will give you a little more insight?
Had a look at your site in chrome and saw .container in standard.css file. You could change that to say .container2 and just to a replace class="container" to class="container2". If you're using a template, shouldn't be any problem.
However, I don't know if this is the problem. It looks like the dialog stem has been given a white background as opposed to a transparent one. Perhaps tracking that particular property may be useful?
I did notice that you're using a shed load of css files though.
I've found, in messing around with this, that this line is the one that's causing the issue. When it's removed, the map displays fine. When it's there, it creates the white shadow. I'm going to mess around with this for a bit and see if I can't change it.
#content img {background:#fff; padding:5px; -moz-box-shadow: 0 0px 5px #ccc; -webkit-box-shadow: 0 0px 5px #ccc;}I've found, in messing around with this, that this line is the one that's causing the issue. When it's removed, the map displays fine. When it's there, it creates the white shadow. I'm going to mess around with this for a bit and see if I can't change it.
#content img {background:#fff; padding:5px; -moz-box-shadow: 0 0px 5px #ccc; -webkit-box-shadow: 0 0px 5px #ccc;}
Actually, it was just as easy as removing the background parameter. :|
Seems like everything is working now and isn't causing issues anywhere else!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.