Div form layout

[hamza]

in IE it works file according to widht height give to it

if you run it in FF , and safari it will give different display

can anyone tell me what is that mean

and how should i improve this /.

 

<style type="text/css">

.divcontainer {

width:500px;

height:350px;

    color:#000000;

background-color:#CCFFFF;

}

 

.formcontainer { 

  padding-bottom: 9px;

  font-family:"Times New Roman", Times, serif;

  font-size:12px; 

  border: 1px medium #000000;  /* not working*/

} 

 

.text {

display:inline;

text-align:left;

/* background-color:#00CC00; */

width:200px;

 

}

 

.input {

    display:inline;

text-align:left;

/* background-color:#CCFFFF; */

    width:300px;

}

 

#inputextra {

  display:inline; 

}

 

#header {

text-align:center;

padding-bottom: 30px;

font:larger;

font-family:"Courier New", Courier, monospace;

font-size:18px;

color:#003333;

text-decoration:underline;

font:bold;

}

 

#buttons {

padding-left: 200px;

 

}

</style><div class="divcontainer">

<form action="add.php" method="post" onSubmit="return field_filter();">

 

  <div id="header">Customer Account Opening</div>

 

<div class="formcontainer">

<p class="text">*Account No</p>

<p class="input">

<select name="account_no_series">

  <option value="" selected="selected">----</option>

  <option value="12345">12345</option>

  <option value="110101">110101</option>

</select>

 

<input type="text" name="account_no" onChange="setInterval('enable_disable()',100);" onFocus="setInterval('enable_disable()',100);" onBlur="setInterval('enable_disable()',100);" size="15" ></p>

</div>

<div class="formcontainer">

          <p class="text">*Title Of Account</p>

  <p class="input"><input type="text" name="account_title" onChange="setInterval('enable_disable()',100);" onFocus="setInterval('enable_disable()',100);" onBlur="setInterval('enable_disable()',100);" /></p>

</div> 

 

<div class="formcontainer">

          <p class="text">*Type Of Account</p>

  <p class="input">

  <select name="account_type" class="select" onChange="setInterval('enable_disable()',100 );" onFocus="setInterval('enable_disable()',100);" onBlur="setInterval('enable_disable()',100);">

  <option value="">Select Account type</option>

  <option value="Current">Current</option>

  <option value="Saving">Saving</option>

  <option value="Resident">Resident</option>  

  </select>

  </p>

  </div>  

 

  <div class="formcontainer">

<p class="text">*Status Of Account</p>

<p class="input">

Single<input type="radio" name="status_type" value="Single" checked="checked">

Joint<input type="radio" name="status_type" value="Joint">

Company<input type="radio" name="status_type" value="Company">

</p>

</div>

 

<div class="formcontainer">

<p class="text">*Opration Of Account</p>

<p class="input">

Single<input type="radio" name="account_operation" value="Single" checked="checked">

Joint<input type="radio" name="account_operation" value="Joint">

</p>

</div>

 

<div class="formcontainer">

<p class="text">*Currency</p>

<p class="input">

<select name="account_currency" class="select" onChange="setInterval('enable_disable()',100);" onFocus="setInterval('enable_disable()',100);" onBlur="setInterval('enable_disable()',100);">

  <option value="">Select currency</option>

  <option value="PUK">Pak Rupees (PUK)</option>

  <option value="USD">US Doller (USD)</option>

  <option value="CAD"> Canada (CAD) </option>

  <option value="EUR">Europe (EUR) </option> 

  </select>

</p>

</div>

 

<div class="formcontainer">

  <p id="buttons">

<input type="submit" value="Next" name="submit" disabled="disabled">

<input type="button" value="Cancel" onClick="window.location='manage_users.php'"/>

  </p>

</div> </form>    

</div>

 

 

 

 

 

 

 

 

[sKunKbad]

You haven't applied any width, float, or position properties to your divs. Each div needs a width, whether in percentage, em, or pixel value.  The declaration of float and positioning type is also necessary.

[hamza]

anything else suggestion  . . . .