Merge pull request #769 from tonio/noimportant

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

examples/bootstrap.html

@@ -53,10 +53,12 @@
                     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
@@ -64,14 +66,16 @@
                     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;
 }