SpinOneSolutions » Issue http://www.spinonesolutions.com I waste my time so that you don't have to... Mon, 16 May 2011 17:01:16 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Long Legend Text Display Issue http://www.spinonesolutions.com/2009/04/long-legend-text-display-issue/ http://www.spinonesolutions.com/2009/04/long-legend-text-display-issue/#comments Wed, 08 Apr 2009 15:56:54 +0000 Will Wright http://www.spinonesolutions.com/?p=194 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>

FF3 Example

IE7 Example

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;
 }

FF3 Fixed

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>

”IE7 ]]> http://www.spinonesolutions.com/2009/04/long-legend-text-display-issue/feed/ 4