form fix for IE.

[atmorell]

Hi.

I have a strange CSS form problem. Look at firefox.jpg my forms displays exactly the way I want! Now look at ie-bug.jpg what is cause this behavior and can it be fixed?

Best regards.
Asbjørn Morell.

FORM
<form action="/cake/kunstvaerker/users/add" method="post">

<label for="UserUsername">Username</label> <input name="data[User][username]" class="inputField" value="" type="text" id="UserUsername" />
<label for="UserPassword">Password</label> <input type="password" name="data[User][password]" class="inputField" value="" id="UserPassword" />
<label for="UserPasswordRepeat">Password</label> <input type="password" name="data[User][passwordRepeat]" class="inputField" value="" id="UserPasswordRepeat" />
<label for="UserFirstName">First Name</label> <input name="data[User][first_name]" class="inputField" value="" type="text" id="UserFirstName" />
<label for="UserLastName">Last Name</label> <input name="data[User][last_name]" class="inputField" value="" type="text" id="UserLastName" />
<label for="UserEmail">Email</label> <input name="data[User][email]" class="inputField" value="" type="text" id="UserEmail" />
<label for="UserPhoneNumber">Phone Number</label> <input name="data[User][phone_number]" class="inputField" value="" type="text" id="UserPhoneNumber" />
<label for="UserAdresse">Adresse</label> <input name="data[User][adresse]" class="inputField" value="" type="text" id="UserAdresse" />
<label for="UserCity">City</label> <input name="data[User][city]" class="inputField" value="" type="text" id="UserCity" />
<label for="UserRegion">Region</label> <input name="data[User][region]" class="inputField" value="" type="text" id="UserRegion" />
<label for="UserCountry">Country</label> <input name="data[User][country]" class="inputField" value="" type="text" id="UserCountry" />
<label for="ProfileAboutme">Valgfrit: Om dig</label> <textarea name="data[Profile][aboutme]" class="inputTextarea" id="ProfileAboutme"></textarea>

<label for="ProfileHideEmail">hide email?</label> <input type="hidden" name="data[Profile][hide_email]" value="0" id="ProfileHideEmail_" /><input type="checkbox" name="data[Profile][hide_email]" id="ProfileHideEmail" value="1" />
<label for="ProfileHidePhoneNumber">hide phone number?</label> <input type="hidden" name="data[Profile][hide_phone_number]" value="0" id="ProfileHidePhoneNumber_" /><input type="checkbox" name="data[Profile][hide_phone_number]" id="ProfileHidePhoneNumber" value="1" />
<label for=""></label> <input type="submit" class="inputSubmit" value="Add" />
</form>






CSS
/* General Layout */

*
{
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
font-family: verdana;
color: #5e5e5e;
}

body, html, #container
{
height: 100%;
border:none;
}

body
{
background-image: url('/cake/inmedia/img/bg.gif');
font-size: 8pt;
}

#container
{
display:table;
background-image: url('/cake/inmedia/img/baggrund.jpg');
width:900px;
margin:0px auto;
border-right: 1px solid #C7C8C4;
border-left: 1px solid #C7C8C4;
}

/* Header Stuff */
#header
{
height: 115px;
padding: 0;
}


#login
{
float: right;
right: 0;
margin: 5px;
color: red;
}

#logo
{
height: 65px;
background-image: url('/cake/inmedia/img/logo.gif');
background-repeat: no-repeat;
margin: 3px 0 0 9px;
}


#menu
{
height: 32px;
clear: both;
background: transparent url('/cake/kunstvaerker/img/button_fill.JPG') repeat-x;
}

#menu a
{
background:url('/cake/kunstvaerker/img/button.gif') repeat-x;
padding: 12px 18px 7px 30px;
height: 13px;
width: 80px;
color: black;
float: left;
}

body#home a#homenav,
body#about_us a#about_usnav,
body#skills a#skillsnav,
body#cases a#casesnav,
body#contact a#contactnav
{
background:url('/cake/inmedia/img/header_menu_active.jpg') repeat-x;
}

#sub_menu_container
{
background:url('/cake/kunstvaerker/img/sub_button.gif') repeat-x;
background-color: red;
height: 20px;
padding: 0 0 0 10px;
}

.sub_menu
{
display: block;
float: left;
padding: 0 0 0 20px;
}

/* Content Stuff */
#content
{
padding: 10px 5px 25px 10px;
position: relative;
}
/* mac hide \*/
* html #content{height:1%}
/* end hide */

.floatright
{
float: right;
}

/* Footer Stuff */
#footer
{
text-align: center;
width: 688px;
margin:0px auto;
padding: 5px;
clear:both;
width:700px;
margin:-25px auto 0;
}

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* mac hide \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */


/* Form Stuff */
label
{
display: block;
float: left;
margin-bottom: 10px;
text-align: right;
padding-right: 20px;
clear: left;
}

input, textarea
{
margin-bottom: 10px;
float: left;
}

/* add user */
#user_add label {width: 150px;}
#user_add inputField {width: 200px;}
#user_add .inputTextarea {width: 400px; height: 150px;}

[Paul O'B]

Hi,

You will have to either wrap the label and input pairs within another element such as a div and set the div to clear both. Or you could try not floating the input and set it to display:block so that more don't line up alongside. You will proabably have to paly around with it a bit.

Add this at the end and see what it looks like. You should of course make it specific to the elements in question.

 * html input{float:none;display:block}

[atmorell]

Paul: I would like to use your second solution, because that way I don't have to wrap every form element with a div. I added this to fix some issues in firefox: (wrong floats) It does not seem to affect ie.

input, textarea
{
margin-bottom: 10px;
clear: right;
float: left;
}

Almost there! Look at firefox2.jpg everything is good. Now look at ie-bug2. How can I force the label and input area to line up nicely?

Best regards.
Asbjørn Morell.




/* Form Stuff */


* html input{float:none;display:block}


label
{
float: left;
margin-bottom: 10px;
text-align: right;
padding-right: 20px;
clear: left;
border: 1px red solid;
}

input, textarea
{
margin-bottom: 10px;
clear: right;
float: left;
}

border: 1px blue solid;
}

.error_message
{
color: red;
float: left;
}



/* add user */
#user_add label {width: 150px;}
#user_add inputField {width: 200px;}
#user_add .inputTextarea {width: 400px; height: 150px;}

/* add art */
#art_add label {width: 30px;}
#art_add .inputField {width: 400px;}
#art_add .inputTextarea {width: 400px; height: 150px;}

[Paul O'B]

Hi,

The gap next to the label is the 3 pixel jog and you can offset it for ie by using a neagatve margin on the label.

* html label{margin-right:-3px}

The size and position of form elements vary between browsers so the only thing you can really do for ie is to give it some help to miove it into position.

/* Form Stuff */
* html input{
	float:none;
	position:relative;
	top:-1px;/* adjust to suit */
	height:11px;/* adjust to suit*/
}

Of course as I said before you should only target the elements in that form and not all inputs and labels. Just give the form a class or id and add the class to the styles above etc.


Hope that helps