Merge pull request openlayers#769 from tonio/noimportant

Avoid !important when not needed. img.olTileImage is precise enough to override boostrap’s rule.

Author: tonio

examples/bootstrap.html

@@ -53,25 +53,29 @@ <h4>OpenLayers and Bootstrap</h4>
                     Note that the OpenLayers stylesheet is loaded before 
                     Bootstrap.  The Bootstrap CSS sets the maximum width for
                     images to be 100% (of their containing element).
+                </p>
 <pre><code>img {
     max-width: 100%;
 }
 </code></pre>
+                <p>
                     This causes problems for images that you might want to be
                     bigger than their containing element (e.g. big tile in small
                     map viewport).  To overcome this, the OpenLayers CSS
                     overrides this <code>max-width</code> setting.  If you are 
                     not loading the OpenLayers default CSS or are having trouble 
                     with tile sizing and Bootstrap, add the following to your
                     markup:
-<pre><code>&lt;style>
-    max-width: none !important;
-&lt;/style><code></pre>
                 </p>
+<pre><code>&lt;style>
+    img.olTileImage {
+        max-width: none;
+    }
+&lt;/style></code></pre>
             </div>
         </div>
     </div>
     <script src="../lib/OpenLayers.js"></script>
     <script src="bootstrap.js"></script>
 </body>
-</html>
+</html>

theme/default/style.css

@@ -485,5 +485,5 @@ a.olControlZoomOut {
 
 /* override any max-width image settings (e.g. bootstrap.css) */
 img.olTileImage {
-    max-width: none !important;
+    max-width: none;
 }