In Firefox, the inputs line up in the columns of 4, but IE just shows everything in 1 column. How can I get it to look right in both?
Here's the html:
and here's the CSS:
Thanks
Here's the html:
Code:
<html>
<head>
<script type="text/javascript" >
var counter=0;
function createDiv()
{
var divTag = document.createElement("div");
var mydiv = document.getElementById("empBigDiv");
// divTag.setAttribute("align","center");
divTag.style.margin = "0px auto";
divTag.className ="dynamicDiv";
divTag.innerHTML = "<div class=\"group\"><label for=\"Ename\">Company Name: </label><br><input type=\"text\" name=\"Ename[" + counter + "]\" size=\"25\"></div> <div class=\"group\"><label for=\"Eaddress\">Address: </label><br><input type=\"text\" name=\"Eaddress[" + counter + "]\" size=\"25\"></div> <div class=\"group\"><label for=\"Ephone\">Phone #: </label><br><input type=\"text\" name=\"Ephone[" + counter + "]\" size=\"25\"></div><br> <div class=\"group\"><label for=\"Eposition\">Position: </label><br><input type=\"text\" name=\"Eposition[" + counter + "]\" size=\"25\"></div>";
divTag.innerHTML += " <div class=\"group\"><label for=\"Esupervisor\">Supervisor: </label><br><input type=\"text\" name=\"Esupervisor[" + counter + "]\" size=\"25\"></div> <div class=\"group\"> <label for=\"Ereason\">Reason for Leaving: </label><br><input type=\"text\" name=\"Ereason[" + counter + "]\" size=\"25\"></div> <br> <div class=\"group\"><label for=\"Efrom\">Employed From: </label><br><input type=\"text\" name=\"Efrom[" + counter + "]\" size=\"25\"></div> <div class=\"group\"> <label for=\"Eto\">Employed To: </label><br><input type=\"text\" name=\"Eto[" + counter + "]\" size=\"25\"></div> ";
divTag.innerHTML += "<div class=\"group\"><label for=\"Eequipdriven\">Type of Equipment driven: </label><br><input type=\"text\" name=\"Eequipdriven[" + counter + "]\" size=\"25\"></div><br><div class=\"group\"><label for=\"GapFrom\">Gap in Employment From: </label><br><input type=\"text\" name=\"GapFrom[" + counter + "]\" size=\"25\"></div> <div class=\"group\"><label for=\"GapTo\">To: </label><br><input type=\"text\" name=\"GapTo[" + counter + "]\" size=\"25\"></div> <div class=\"group\"><label for=\"GapReason\">Explain Gap in Employment:</label><br><input type=\"text\" name=\"[" + counter + "]\" size=\"25\"></div><br><br>";
divTag.innerHTML += "A. FMCSR 391.21 (b)(10) (iv) (A) Were you subject to the Federal Motor Carrier Safety Regulations (FMCSR's) while employed by this previous employer? Yes <input type=\"radio\" name=\"FMCSRsub[" + counter + "]\" value=\"yes\">No<input type=\"radio\" name=\"FMCSRsub[" + counter + "]\" value=\"no\"><br><br>";
divTag.innerHTML += "B. FMCSR 391.21 (b)(10) (iv) Was this job designated as a safety sensitive function in any DOT regulated mode subject to alcohol and controlled substances testing required by 49 CFR part 40? Yes <input type=\"radio\" name=\"FMCSRtest[" + counter + "]\" value=\"yes\">No<input type=\"radio\" name=\"FMCSRtest[" + counter + "]\" value=\"no\">";
counter++;
mydiv.appendChild(divTag);
}
</script>
<title>HDS Online Application</title>
<link rel="stylesheet" type="text/css" href="app2.css" />
</head>
<body>
<h4>Thank you for choosing to Apply with HDS!</h4>
<form name="app1" method="POST" action="empdivcheck.php">
<fieldset style="width: 850px;">
<legend><b>Employment History</b></legend>
<div class="form-auto" id="empBigDiv">
<p>
<input type="button" value="Add Employer" onclick="createDiv();" />
<input type="Submit" value="Next">
</p>
</div>
</fieldset>
</form>
</body>
</html>and here's the CSS:
Code:
.form-auto {
padding-left:20px;
float: left;
}
.dynamicDiv {
width:700px;
height:240px;
border:solid 1px #c0c0c0;
background-color:#e1e1e1;
font-size:11px;
font-family:verdana;
color:#000;
padding:5px;
margin-top: 10px;
}
.group{
display: inline-block;
}Thanks
