Html legend not showing - cannot spot why?

Hi,

This is the first time I am posting and hope this is OK.

The only issue I have is that the first html legend is not displaying

     <legend>Personal Details:</legend>

I am using Windows XP and IE 8

The other legends are showing OK.



```html4strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Voluntary Redundancy Scheme - Islington Council</title>

<style type="text/css">

* { margin: 0; padding: 0; }

html { height: 100%; font-size: 62.5% }

body { height: 100%; background-color: #FFFFFF; font: 1.2em Arial, Verdana, Helvetica, sans-serif; }

h1 {
  font-size: large;
  color: #15317E;
  padding-top: 2em;
  padding-bottom: .2em;
  padding-left: .8em;
  margin: 0;
}

p {
  font-size: small;
  color: #000000;
  padding-top: 2em;
  padding-bottom: .2em;
  padding-left: .8em;
  margin: 0;
}


/* ==================== Form style sheet ==================== */

form { margin: 25px 0 0 29px; width: 450px; padding-bottom: 30px; }

fieldset { margin: 0 0 22px 0; border: 1px solid #095D92; padding: 12px 17px; background-color: #DFF3FF; }
legend { font-size: 1.1em; background-color: #095D92; color: #FFFFFF; font-weight: bold; padding: 4px 8px; }

label.float { float: left; display: block; width: 280px; margin: 4px 0 0 0; clear: left; }
label { display: block; width: auto; margin: 0 0 10px 0; }
label.spam-protection { display: inline; width: auto; margin: 0; }

input.inp-text, textarea, input.choose, input.answer { border: 1px solid #909090; padding: 3px; }
input.inp-text { width: 300px; margin: 0 0 8px 0; }
textarea { width: 400px; height: 150px; margin: 0 0 12px 0; display: block; }

input.choose { margin: 0 2px 0 0; }
input.answer { width: 40px; margin: 0 0 0 10px; }
input.submit-button { font: 1.4em Arial, Georgia, "Times New Roman", Times, serif; letter-spacing: 1px; display: block; margin: 23px 0 0 0; }

form br { display: none; }

/* ==================== Form style sheet END ==================== */

</style>

<!--[if IE]>
<style type="text/css">

/* ==================== Form style sheet for IE ==================== */

fieldset { padding: 22px 17px 12px 17px; position: relative; margin: 12px 0 34px 0; }
legend { position: absolute; top: -12px; left: 10px; }
label.float { margin: 5px 0 0 0; }
label { margin: 0 0 5px 0; }
label.spam-protection { display: inline; width: auto; position: relative; top: -3px; }
input.choose { border: 0; margin: 0; }
input.submit-button { margin: -10px 0 0 0; }

/* ==================== Form style sheet for IE end ==================== */

</style>
<![endif]-->

<script language="JavaScript">
<!--

function formCheck(formobj){
   // Enter name of mandatory fields
   var fieldRequired = Array("firstname", "surname", "servicearea", "division", "linemanager", "jobtitle", "grade", "scp", "dateofservice");
   // Enter field description to appear in the dialog box
   var fieldDescription = Array("Your Firstname", "Your Surname", "Your Service Area", "Your Division", "Your Line Manager", "Your Job Title", "Your Grade", "Your SCP Point", "Your Date of Continuous Local Government Service");
   // dialog message
   var alertMsg = "Please complete the following mandatory fields:\
";

   var l_Msg = alertMsg.length;

   for (var i = 0; i < fieldRequired.length; i++){
      var obj = formobj.elements[fieldRequired[i]];
      if (obj){
         switch(obj.type){
         case "select-one":
            if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
               alertMsg += " - " + fieldDescription[i] + "\
";
            }
            break;
         case "select-multiple":
            if (obj.selectedIndex == -1){
               alertMsg += " - " + fieldDescription[i] + "\
";
            }
            break;
         case "text":
         case "textarea":
            if (obj.value == "" || obj.value == null){
               alertMsg += " - " + fieldDescription[i] + "\
";
            }
            break;
         default:
         }
         if (obj.type == undefined){
            var blnchecked = false;
            for (var j = 0; j < obj.length; j++){
               if (obj[j].checked){
                  blnchecked = true;
               }
            }
            if (!blnchecked){
               alertMsg += " - " + fieldDescription[i] + "\
";
            }
         }
      }
   }

   if (alertMsg.length == l_Msg){
      return true;
   }else{
      alert(alertMsg);
      return false;
   }
}
// -->
</script>

</head>


<body>

<h1>Voluntary Redundancy Scheme<br />Application Form to be considered for Voluntary Redundancy</h1>



   <form onsubmit="return formCheck(this);" name="form" method="post" action="insert_news.asp">
      <!-- ============================== Fieldset 1 ============================== -->
      <fieldset>
         <legend>Personal Details:</legend>
            <label for="input-one" class="float"><strong>First Name:</strong></label><br />
            <input class="inp-text" name="firstname" id="input-one" type="text" size="100" /><br />

            <label for="input-two" class="float"><strong>Surname:</strong></label><br />
            <input class="inp-text" name="surname"  id="input-two" type="text" size="100" />

            <label for="input-three" class="float"><strong>Service Area:</strong></label><br />
            <input class="inp-text" name="servicearea"  id="input-three" type="text" size="100" />

            <label for="input-four" class="float"><strong>Division:</strong></label><br />
            <input class="inp-text" name="division"  id="input-four" type="text" size="100" />

            <label for="input-five" class="float"><strong>Line Manager:</strong></label><br />
            <input class="inp-text" name="linemanager"  id="input-five" type="text" size="100" />

            <label for="input-six" class="float"><strong>Your Job Title:</strong></label><br />
            <input class="inp-text" name="jobtitle"  id="input-six" type="text" size="100" />

            <label for="input-seven" class="float"><strong>Your Grade:</strong></label><br />
            <input class="inp-text" name="grade"  id="input-seven" type="text" size="100" />

            <label for="input-eight" class="float"><strong>Your SCP/Salary Point:</strong></label><br />
            <input class="inp-text" name="scp"  id="input-eight" type="text" size="100" />

            <label for="input-nine" class="float"><strong>Date of Continuous Local Government Service:</strong></label><br />
            <input class="inp-text" name="dateofservice"  id="input-nine" type="text" size="100" />

            <label for="input-ten" class="float"><strong>Approx. No of Years Service:</strong></label><br />
            <input class="inp-text" name="noofyears"  id="input-ten" type="text" size="100" />

      </fieldset>
      <!-- ============================== Fieldset 1 end ============================== -->


      <!-- ============================== Fieldset 2 ============================== -->
      <fieldset>
         <legend>Please tick if appropriate:</legend>
            <label for="option1"><input class="choose" name="option1" id="option1" type="checkbox" value="off" />   I am / will be over 55 on 31 March 2012 and wish to leave voluntarily, [and apply for the early release of my pension].</label><br />
      </fieldset>
      <!-- ============================== Fieldset 2 end ============================== -->


      <!-- ============================== Fieldset 3 ============================== -->
      <fieldset>
         <legend>Reason for applying:</legend>
         <label class="spam-protection" for="protection">I would like to apply for voluntary redundancy and/or early retirement for the following reasons: </label><br /><br />
         <textarea name="reason" id="message" cols="30" rows="5" title="Reason"></textarea><br />
      </fieldset>
      <!-- ============================== Fieldset 3 end ============================== -->


      <!-- ============================== Fieldset 4 ============================== -->
      <fieldset>
         <legend>Declaration:</legend>
         <label class="spam-protection" for="protection">I understand that by making an initial application, I will not be committing myself to accepting any offer which might be made by the council and that the council is not bound to accept this request. Each case will be considered on its merits, taking into account the local circumstances, cost, the opportunity it provides for redeployment for colleagues at risk, and the consequent reduction in the number of compulsory redundancies across the council.<p> </p>

If I apply for voluntary redundancy, I understand that my application would require the approval of <strong>my departmental management team</strong> and the relevant service area Corporate Director. <br /><br />I also understand that a redundancy payment will not be made in the event of my receiving an offer of employment from either the council, or other <strong>body covered by the Redundancy Modification Order</strong> before the end of my current contract and if it is to start within four weeks of the end of that contract. </label><br /><br />
      </fieldset>
      <!-- ============================== Fieldset 4 end ============================== -->


      <input class="submit-button" type="submit" alt="SUBMIT" name="Submit" value="SUBMIT" />
   </form>

</body>
</html>

Hi Welcome to Sitepoint :slight_smile:

IE is buggy with legends at the best of times. It seems it doesn’t like the float on the label that follows the legend. As there is no need for the label to be floated then the simplest solution is to remove the class=“float” from here.


<fieldset>
    <legend>Personal Details:</legend>
    <label for="input-one" [B]class="float">[/B]<strong>First Name:</strong></label>

(BTW a classname called float is not a good idea because the above class could now be set to non floated to fix your issue and you are left with class that says float but the element is not floated - confusing :))

Thanks Paul for this, works fine now!

Also “classname called float is not a good idea” - yes your right here - thanks again,

CliffIT

I would also question the use of STRONG in there, that’s what CSS is for and you already gave them semantics using LABEL. Since they’re ALL strong you aren’t making any of them “more important” than the others, so that too is just a waste of code.

Also, you need more BR – have you seen what that does CSS disabled? The labels for the second inputs end up on the line of the input before it.