Member Avatar for jetru

I have empty space div that goes like this:

<div id="space"><!-- IE fix--></div>

and the CSS for this is:

#space{font-size:0;
   background-color:transparent;
   height:15px;
   display:block;
}

This should just make an empty box. And its fine in firefox. But in IE I get no space at all! Whats wrong?

  • 5 Contributors
  • 5 Replies
  • 109 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by CertGuard

Dani AI

Generated

— the symptom here is a quirk of older Internet Explorer: an empty element that only contains a comment can be treated as “no content” and disappear, even if you set a height. and pointed out the obvious markup fixes (put actual content in the DIV); and correctly pushed the better structural option (use margins/padding instead of empty elements). Below are practical, durable approaches and a quick troubleshooting checklist.

If keeping a spacer DIV is unavoidable, force IE to honor its box by giving it layout. The usual, reliable CSS tricks are to trigger hasLayout for IE6/7 — for example with zoom:1 or overflow:hidden. These do not rely on adding visible content and are ignored by modern browsers:

.spacer {
  height: 15px;
  overflow: hidden;   /* forces layout in old IE */
  zoom: 1;            /* IE6/7 only; harmless elsewhere */
}

Preferably, remove empty markup and control vertical spacing with CSS on the adjacent elements. Example: apply margin-bottom to the element above or padding-top to the one below. This is cleaner, more accessible, and responsive-friendly than empty DIVs.

Troubleshooting checklist: inspect the element in IE’s developer tools to confirm it exists and check computed height; look for float/clearing issues that collapse parent height; check any CSS reset that might zero out line-height or display; remember HTML comments are invisible content — not a substitute for real content. For long-term maintenance, choose semantic spacing (margins/padding) and reserve layout-only hacks for legacy-IE fixes behind conditional styles.

Recommended Answers

All 5 Replies

Member Avatar for MidiMagic

IE does not render "wasted" tags (tags without actual content).

Stick a br tag inside it.

Member Avatar for CertGuard

Or &nbsp;

Member Avatar for cmills83

Theres no reason to have an empty space div, just add a margin to the surrounding div

Member Avatar for FC Jamison

I am leaning toward cmills on this one. Why do you need an empty div?

If it is a must, you could also try throwing a transparent "spacer" gif in there.

Member Avatar for CertGuard

I was going to agree with you, then I found this DIV tag in my own code which I forgot I used to adjust the position of the content below it. (It seemed to be the simplest solution at the time)

<div style="height: 37px;">&nbsp;</div>

Like I had mentioned before, &nbsp; works just fine.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.