Member Avatar for jrotunda85

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! :|

Screen_shot_2011-06-25_at_12.50_.39_AM_.png 71.46 KB
  • 3 Contributors
  • 5 Replies
  • 228 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by jrotunda85

Dani AI

Generated

A short summary and practical fixes based on the thread: the site’s broad image rule was applying framing and a white background to Google Maps’ internal images, which produced the visible white “shadow” around the map. The Chrome inspector approach noted by correctly pointed to the offending rule, and ’s test confirmed removing the background stops the problem.

Prefer non-invasive fixes first. Scope the framed-image rule so it only targets actual article/media images (not third-party widgets):

.article-body img,
.post-content img {
  padding: 5px;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

If scoping the rule is not possible, explicitly reset styles inside the map wrapper so the site’s generic rules don’t bleed into the widget:

#map_wrapper img,
#map_wrapper * {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

Notes on the other suggestions in the thread: ’s wrapper/ID idea is good because it scopes rules and avoids changing thousands of tags. ’s rename-of-.container approach also works if the site is template-driven and a single find/replace is feasible, but prefer namespacing (e.g., .site-container, BEM-style names) to reduce future collisions with third-party code.

Diagnostics and precautions: use DevTools to inspect the computed style and the rule source (file + line). If CSS is concatenated/minified, change the source file or build step rather than editing the minified output. Avoid liberally using !important except for small, deliberate overrides like the map reset. Namespacing global rules is the long-term fix to prevent similar collisions with other widgets.

Recommended Answers

All 5 Replies

Member Avatar for twiss

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?

Member Avatar for jrotunda85

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?

Member Avatar for Member #120589

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.

Member Avatar for jrotunda85

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;}
Member Avatar for jrotunda85

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!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.