I'm having a strange issue with putting a google map in a wordpress page - the zoom slider seems to be only half visible (please see image) I think it's something to do with wordpress' styling overwriting google maps css, does anyone know how to fix this?
Thanks in advance!
EDIT: For anyone having the same issue, I found the solution here: Google Maps zoom control
It's hard to figure out what's going on here just by looking at this image. Best thing to do would be to provide some CSS, a jsfiddle link or a link to your problematic page.
I would suggest to use a tool like Firebug, or Chrome's web developer tools. Then, target the element in question and check what kind of CSS attributes get added to it, which change the way its shown. Then, you can override them with your own, using !important so that they take precedence over the existing ones.
For example, assume you got an attribute like this:
img {
padding: 5px;
}
This would add a 5px padding to all of the images in the page. In order to change that for a particular element, you could try targetting it and change the relevant attribute with an !important rule. Say the element has an ID of "someelement". Then, you can change the offending attribute like this:
#someelement {
padding: 0;
}
We don't need !important in the above example, as attributes set on an ID have a larger specificity over attributes set on a widget type. If you wanted to override this rule for ALL images in the page, you could do:
img {
padding: 5px !important;
}
The !important flag is needed here, because your rule has the same specificity as the original one.
For CSS precedence rules (including specificity and !important), check here:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
The Chrome developer tools are already bundled with Chrome. For Firefox, you can obtain Firebug here:
