Aligning the Forgot Boxes

 When a user forgets his or her username or password, Healthx triggers a wizard to help retrieve the missing information. Unfortunately, based on common font settings, the wizard has some boxes which appear to be misaligned.



Fortunately, by adding some padding to the controls governing these boxes, you can line them up.

In the controls.css file, edit the simplepageform fieldset div.notes and .simplepageform div fieldset attributes to have more margin (the first) and padding (the second). You'll have to make some corrections for browser variations.

 

In IE7

.simplepageform fieldset div.notes
{
  float: right;
  height: auto;
  margin: 22px 0 10px 10px;
  padding: 5px;
  border: 1px solid black;
  background-color: white;
  color: black;
}
 
.simplepageform div fieldset
{
  clear: none;
  /*display: inline; */
  border: solid 1px black;
  margin: 0 0 0 0;
  padding: 7px 5px 29px 5px;
}

 

 

In Firefox 3

simplepageform fieldset div.notes
{
float: right;
/* width: 165px; */
height: auto;
margin: 15px 0 10px 10px;
padding: 5px;
border: 1px solid black;
background-color: white;
color: black;
/** font-size: 88%; **/
}


.simplepageform div fieldset
{
clear: none;
border: solid 1px black;
margin: 0 0 0 0;
padding: 6px 5px 18px 5px; //added 6px and 18px of padding to the top and bottom
}


Voila! The boxes align. Some boxes may shift slightly elsewhere in the site, depending upon browser versions, but not dramatically.
Comments