GeoSearch CSS Tutorial

Resolving CSS Collisions

In the unlikely and unfortunate event that you might already have some elements on your page which are assigned to the same classname as one which is used in GeoSearch, you might experience a CSS Collision.

Collision

For example, let's say your page already has an element in it which has been assigned a classname "mcPopup".

The problem is that the external element who's classname is mcPopup will inherit all the attributes we definded in our ".mcPopup" declaration.

Furthermore, if your page has already made a CSS declaration for "mcPopup", then those attributes will override into the GeoSearch popup.

This is a collision. To see an example of this collision, click here.

Resolution

In order to resolve the conflict presented by the above collsion, we must find a way to separate the two definitions. We will assume that we are unable (if not simply unwilling) to change the original page's css declarations.

To keep the GeoSearch mcPopup declaration from interfering with the mcPopup elements in the external page, we specify that our declaration should only be applied to sub-elements of "map" which have the classname "mcPopup":

    #map .mcPopup { 
        ...
    }

Unfortunately, any declarations for mcPopup made in the external page could still be bleeding into our GeoSearch popups. There is universal way to prevent this from happening, other than by directly overriding whichever properties are doing the bleeding.

For example, if the external page has declared a nasty border:

    .mcPopup { 
        ...
        border: solid 5px orange;
        ...
    }

...and we wish not to have any borders in our popups, we simply override and nullify the border:

    #map .mcPopup { 
        ...
        border: none;
        ...
    }

Click here for the example with the collision resolved.