Empty DIV takes up space in IE8 [SOLVED]
May 10th, 2010 | 
Author: It is a common practice when programming web applications to declare empty div’s and fill them (if necessary) with data using JS (innerhtml or another method).
There might not be a way to know if some of these div will be empty (you just declare a html structure but the data is generated in another way).
An empty div (with no content inside) in Mozilla (Opera, and other browsers) does not take up any space.
IE8 (Internet Explorer 8), on the other hand, takes up space for those divs no matter if they have or have not any contents.
For instance, refer to the following HTML:
<div class="syndetics_contenedor" id="syndetics_contenedor" >
<div id="syn_mc" class="syndetics_portada"></div>
<div id="syndetics_informacion" class="syndetics_informacion">
<div id="syn_summary" class="syndetics_informacion"></div>
<div id="syn_anotes" class="syndetics_informacion"></div>
<div id="syn_awards" class="syndetics_informacion"></div>
</div>
</div>And its CSS, which is like:
.syndetics_portada{
float: left;
width: 135px;
margin-left: 5px;
}
.syndetics_informacion{
margin: auto;
float: left;
width: 620px;
/*height: 1%; Holly hack for Peekaboo Bug */
}
.syndetics_contenedor{
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 800px;
float: left;
/*display:table;*/
font-size: 10px;
}There is a dirty fix for Internet Explorer 8. Just adding a simple empty comment makes IE collapse those empty divs.
<div class="syndetics_contenedor" id="syndetics_contenedor" >
<div id="syn_mc" class="syndetics_portada"></div>
<div id="syndetics_informacion" class="syndetics_informacion">
<div id="syn_summary" class="syndetics_informacion"><!-- --></div>
<div id="syn_anotes" class="syndetics_informacion"><!-- --></div>
<div id="syn_awards" class="syndetics_informacion"><!-- --></div>
</div>
</div>Related posts:
- Layout example: div izquierdo con anchura fija y div derecho con anchura variable (autoajustable al contenido)
- Centrar div y contenido con CSS [resuelto]
- CSS horizontal scroll div with fixed-height images [SOLVED]
- Spoiler div con HTML and Javascript
- Drupal: how to add a “share in facebook” link without IE8 crashing
Posted in 
Tags:
Gracias!!! Llevo horas peleando con esto