The Problem:
I recently built a form for a customer which had a really long legend! My content area was floated to allow for a right hand sidebar and I noticed that with the addition of the new legend the layout had broken.
The issue, it turns out, is that both IE and FF handled the legend in an unexpected way. Let’s throw down some markup for some examples.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css" media="screen"> label, input { width:100%; } .container { width:250px; } fieldset { } legend { } </style> </head> <body> <div class="container"> <fieldset> <legend>This is a really long legend as an example, so lets make it really long</legend> <label for="input1">Input 1</label> <input type="text" id="input1" name="input1" value="input1"> <label for="input2">Input 2</label> <input type="text" id="input2" name="input2" value="input1"> <label for="input3">Input 3</label> <input type="text" id="input3" name="input3" value="input1"> </fieldset> </div> </body> </html>
The Solution:
The solution for FF3 is exactly what I would expect it to be; add white-space:normal; to the legend style definition.
label,
input {
width:100%;
}
.container {
width:250px;
}
fieldset {
}
legend {
white-space:normal;
}
The solution for IE7 is a little bit more involved. We need to nest a span tag within the legend, and then add the white-space attribute; plus a couple of other ornaments.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css" media="screen"> label, input { width:100%; } .container { width:250px; } fieldset { } legend { } span { display:block; white-space:normal; width:100%; } </style> </head> <body> <div class="container"> <fieldset> <legend><span>This is a really long legend as an example, so lets make it really long</span></legend> <label for="input1">Input 1</label> <input type="text" id="input1" name="input1" value="input1"> <label for="input2">Input 2</label> <input type="text" id="input2" name="input2" value="input1"> <label for="input3">Input 3</label> <input type="text" id="input3" name="input3" value="input1"> </fieldset> </div> </body> </html>
4 Comments for Long Legend Text Display Issue
E3 08 Guitar Hero World Tour - Hot For Teacher - Van Halen | Guitar Hero 3 | April 9, 2009 at 2:25 pm
JaneRadriges | June 13, 2009 at 11:57 am
Great post! I’ll subscribe right now wth my feedreader software!
KonstantinMiller | July 6, 2009 at 1:06 pm
Hi. I like the way you write. Will you post some more articles?
[...] SpinOneSolutions » Long Legend Text Display Issue [...]