CODEWITHSUNDEEP
wordpress
Mike Thompson
Mike Thompson

Reputation: 19

What CSS element would show a hidden div as a blank space?

On my Wordpress site, the Leaflet Maps Marker plugin displays a map of locations. In the source code, each map location flag is defined inside a DIV tag, e.g.

<div id="lmm_geo_tags_4c74453a_14" class="lmm-geo-tags geo">Brewery Lane: <span class="latitude">53.346031</span>, <span class="longitude">-6.263213</span></div>

The DIV tags are visible in the page source but appear as blank lines on the page, creating a massive white space underneath the map: http://www.glutenfreeireland.com/test-map/

The plugin author hasn't been able to find the solution (http://wordpress.org/support/topic/space-or-gap-between-map-and-marker-list) and the theme developers responded to support emails saying it's not caused by the theme.

Are there CSS elements which would show DIV tags as blank spaces or other elements they would conflict with? The map page is the only page this issue occurs on.

Upvotes: 0

Views: 100

Answers (2)

Sean Quinn
Sean Quinn

Reputation: 2161

If you're having trouble with the hidden <div> elements still generating space underneath the map, you could always try adjusting the height of the map container.

<div id="lmm_ec964ab4" style="height: 625px" class="mapsmarker layermap layer-1">
  ...
  <div id="lmm_geo_tags_ec964ab4_1" class="lmm-geo-tags geo">
  ...
</div>

By adding the height-style to the <div> with the .mapsmarker class, you can control the height of the content and its box, such that the overflow of the .lmm-geo-tags elements are hidden.

Upvotes: 0

espnicholas
espnicholas

Reputation: 538

Look more into it, you wrapped it in a 

<pre>

tag which is causing this.

If I change your tag to a div, everything is fine.

Upvotes: 1

Related Questions