1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Disappearing Label/Input Bug

Problem

If a group of floated <label>foo</label><input /> pairs is separated by br tags and placed inside any container (including the body) on which the letter-spacing property is set, some of the labels or inputs will disappear.

Solution

Set the letter-spacing on the br to 0.

Detailed description

If your label or input tags disappear when you preview your page in Internet Explorer 5.0, 5.5, or 6.0 for Windows, chances are you're seeing this bug. It has three different variations, depending on whether line breaks or other whitespace appear between the tags. For the live demos and screenshots below, all three variations use the same CSS styles; only the whitespace in the HTML is different. The CSS is as follows:

div.demo { letter-spacing: 1px; /* bug trigger */}

label { 
 float:left; /* bug trigger */ 
 clear: left;
}

input { float: left; /* bug trigger */} 

br { clear: left; }

Every other label/input pair disappears

This variation occurs when there are no linebreaks or whitespace between the label, input, and br tags. The result is that Field2 and Field4 disappear. (Note that this is the only variation that still reproduces in Internet Explorer 7.)

<div class="demo">
<form id="variation1">
<label>Field1</label><input name="field1" type="text"><br>
<label>Field2</label><input name="field2" type="text"><br>
<label>Field3</label><input name="field3" type="text"><br>
<label>Field4</label><input name="field4" type="text"><br>
<label>Field5</label><input name="field5" type="text"><br>
</form>
</div>

Screenshot in IE6/Win

Live demo

View a live demo.

All except the first label/input pair disappear

This variation occurs when there is no whitespace betwen the label and input tags, and the br appears on its own line. The result is that while space is left for all five label/input pairs, only the first shows up.

Screenshot in IE6/Win

<div class="demo">
<form id="variation2">
<label>brOnSeparateLine1</label><input name="field1" type="text" />
<br />
<label>brOnSeparateLine2</label><input name="field2" type="text" />
<br />
<label>brOnSeparateLine3</label><input name="field3" type="text" />
<br />

Text ID: DISAPPEARING_LABEL_INPUT

---