I am using geoExt and OpenLayers to plot some map. Everything worked well until I had to add some styling. To display it on the webpage, I need to use the CSS of my university and once I do that, I have some horizontal white lines between each tile (but not vertically though). The lines have always the same height. The problem seems to come only from the CSS, since if I remove it in the html (it is the first thing invoked in <head>), everything looks correct.

Searching here and on the web, I found than some people proposed to create a CSS after everything else which sets:

.openlayers-map img {max-width: none;}

But it didn't solve anything. Is there a way to tell to a div that it needs to load no styles but the one used by OpenLayers?

Here is a sample of the code I have:

 var osm = new OpenLayers.Layer.OSM(
            "Open Street Map"
 bwms = new OpenLayers.Layer.WMS(
                    "usa:states - Tiled", "",
                    layers: "usa:states",
                    tiled: true,
                    transparent: true
                    singleTile: true,
                    projection: new OpenLayers.Projection("EPSG:4326") // specified because it is different than OSM's

   mapPanel = new GeoExt.MapPanel({
            renderTo: "mapPanel",
            map: new OpenLayers.Map({
                    projection: epsg900913,
                    displayProjection: epsg4326,
                    units: "m",
                    center: new OpenLayers.LonLat(6.59,46.39).transform(epsg4326,epsg900913)
            layers: [osm,bwms],
            // height/width in pixels
            height: 450,

            zoom: 10,
            border: false
  • 1
    Have you tried inspecting the css state in firebug or Chrome's devTools? It is an easy way for checking all the styles applied to a specific element and for trying to fix something on the fly, before applying the fix in a css file. – Decio Jun 21 '13 at 19:44
  • I tried to inspect the problematic CSS with firebug, but I could not find the source of those spaces. The most simple way I can think of would be to tell the div that it needs be "styless", but I can't find a way to do it. – Bulkilol Jun 24 '13 at 12:33
  • If the problem is a css problem (and it seems to be) then you should be able to reach the affected tag elements in firebug. It can be tricky sometimes but if that div is on the page then you must be able to reach it! Maybe is not directly inspectable because hidden behind other elements? If this does not work out, well, you could try to progressively remove other css until you get to the bit of style that is interfering. Overall it does not seem an easy task, but with some patience and being methodical you should succeed. There is no magic! Good luck! – Decio Jun 25 '13 at 19:26
  • This css problem could be related to : stackoverflow.com/questions/13918011/… – Laurent Jégou Nov 6 '13 at 7:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.