Get rid of OpenLayers gap between tiles

Question

I have a problem with my OpenLayers map,. I can't get the tiles to be one next to the other. I already checked for intrusive CSS but I didn't find anything. Can someone give me a hand on this?

My current code is this:

<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script>
    $(function() {
        var map = new OpenLayers.Map('map');
        var wms = new OpenLayers.Layer.WMS(
            "OpenLayers WMS",
            "http://maps.opengeo.org/geowebcache/service/wms",
                {'layers':'bluemarble'}
            );
            map.addLayer(wms);
            map.zoomToMaxExtent();
        });
</script>

I'll leave a screenshot:

Answer 1

Found the solution after searching in Google for "openlayers bootstrap". There seems to be a problem with intrusive CSS from Bootstrap that is being solved at the OpenLayers trunk, but it's not in stable yet.

To solve the problem you just have to add this CSS rule:

#map img {
    max-width: none;
}

(where #map is your map identifier, could be a class or a div, whatever)

Please check the order in which this CSS loads, because I was trying to load this rule before the OpenLayers JS file and it didn't work. It was overwritten by OL. In the end I had to put it directly on the HTML file.