Jump to content

Why won't these elements line up? Internet Explorer 7 only.


DeX
 Share

Recommended Posts

I've got a pretty large form with inputs but cut it down here to post. I have an input form that has coveralls and the user selects a size, selects a quantity, then enters the name to be sewn onto them. Then if they want more, they hit the + button and the javascript adds another line for them to do all the options again.

 

In Chrome, Firefox and Internet Explorer 8 it loads all the elements onto the same row, side by side. In Internet Explorer 7 for some reason it loads them all above one another and I cannot figure out why. There's no style sheet in this snippet, here's what I have for you to check out:

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enerplus</title>



<script type="text/javascript">
var count = 41;
function addRow(id, names)
{
if (!document.getElementsByTagName) return;
formBody = document.getElementsByTagName("form").item(0);
formElement = document.getElementById("formitem" + id);

quantityText = document.createElement("input");

divDiv = document.createElement("div");
divRow = document.createElement("div");
divFirstNameColumn = document.createElement("div");
divLastNameColumn = document.createElement("div");
divQuantityColumn = document.createElement("div");
firstNameInput = document.createElement("input");
lastNameInput = document.createElement("input");

divDiv.setAttribute("id", "formitem1");
divRow.setAttribute("class", "row");
divRow.setAttribute("style", "clear:both;");
divQuantityColumn.setAttribute("class", "column");
divQuantityColumn.setAttribute("style", "float:left;");
divFirstNameColumn.setAttribute("class", "column");
divFirstNameColumn.setAttribute("style", "float:left;");
divLastNameColumn.setAttribute("class", "column");
divLastNameColumn.setAttribute("style", "float:left;");
firstNameInput.setAttribute("type", "text");
lastNameInput.setAttribute("type", "text");
quantityText.setAttribute("type", "text");
quantityText.setAttribute("name", "form1[" + count + 1 + "][quantity]");





div1 = formElement.getElementsByTagName("div").item(0);
div2 = div1.getElementsByTagName("div");

for (var i = 0; i < div2.length; i++)
{
	dc = document.createElement("div");
	dc.setAttribute("class", "column");
	dc.setAttribute("style", "float:left;");

	selectArray = div2[i].getElementsByTagName("select"); // check first if there is a select tag there
	if (selectArray.length > 0)
	{
		select = div2[i].getElementsByTagName("select").item(0);
		selectElement = document.createElement("select");
		selectElement.setAttribute("name", "form1[" + count + "][" + select.id + "]");
		selectElement.setAttribute("id", select.id);
		selectElement.setAttribute("style", "float:left;");
		for (var j = 0; j < select.options.length; j++)
		{
			text = document.createTextNode(select.options[j].text);
			optionElement = document.createElement("option");
			optionElement.setAttribute("value", select.options[j].value);
			optionElement.appendChild(text);
			selectElement.appendChild(optionElement);
		}
		dc.appendChild(selectElement);
		divRow.appendChild(dc);
		count = count + 1;
	}
}

divDiv.appendChild(divRow);
formBody.insertBefore(divDiv, formElement.nextSibling);

}

</script>




</head>
<body>

  <form id="login" method="POST" action="ty.php">


<div id = "formitem1">
	<div class="row" style="clear:both;">


		<div class="column"><span>length</span><br />
		  <select name="form1[50][Coverall Length]" id="Coverall Length" value=" ">
			<option value = ""></option>
			<option value="S">S</option>
			<option value="R">R</option>
			<option value="T">T</option>
		  </select>
		</div>

		<div class="column"><span>length2</span><br />
		  <select name="form1[51][Coverall Length2]" id="Coverall Length2" value=" ">
			<option value = ""></option>
			<option value="S">S</option>
			<option value="R">R</option>
			<option value="T">T</option>
		  </select>
		</div>
		<div class="column"><span>quantity</span><br />
		  <input type="text" name="form1[29][Coverall Quantity]" id="Coverall Quantity" style="width:40px;" />	
		</div>
		<div class="column"><span>employee first name</span><br />
		  <input name="form1[30][Employee First Name]" type="text" id="Employee First Name" value="" />
		</div>
		<div class="column"><span>employee last name</span><br />
		  <input name="form1[31][Employee Last Name]" type="text" id="Employee Last Name" value="" />
		</div>
		<div class="column"><br /> <button onClick="addRow(1, true);return false;">+</button></div>
	</div>
</div>

</form>


</body>
</html>

Link to comment
Share on other sites

surely one under the other is correct as they are all wrapped in divs

 

divs are displayed as blocks by default

to display them inline you could add

display:inline;

to your .column class

 

your code example displays them one under the other in

firefox, safari, chrome, opera and ie6 under crossoverusing osx

firefox on ubuntu

and firefox, chrome and opera using windows vista

for me

 

Link to comment
Share on other sites

surely one under the other is correct as they are all wrapped in divs

 

divs are displayed as blocks by default

to display them inline you could add

display:inline;

to your .column class

 

your code example displays them one under the other in

firefox, safari, chrome, opera and ie6 under crossoverusing osx

firefox on ubuntu

and firefox, chrome and opera using windows vista

for me

 

Are you sure? I'm using this very basic Javascript function now and it's still loading them below one another in Internet Explorer 7.

<script type="text/javascript">

function addRow(id)
{
if (!document.getElementsByTagName) return;
formBody = document.getElementsByTagName("form").item(0);
formElement = document.getElementById("formitem" + id);

divRow = document.createElement("div");

select1 = document.createElement("select");
select2 = document.createElement("select");

ddd1 = document.createElement("div");
ddd2 = document.createElement("div");
ddd3 = document.createElement("div");
ddd1.setAttribute("style", "display:inline;");
ddd2.setAttribute("style", "display:inline;");
ddd3.setAttribute("style", "display:inline;");

ddd1.appendChild(select1);
ddd2.appendChild(select2);
ddd3.appendChild(ddd1);
ddd3.appendChild(ddd2);


formBody.insertBefore(ddd3, formElement.nextSibling);

}

</script>

 

Link to comment
Share on other sites

  • 2 weeks later...

I honestly don't understand this at all. I put this on the page:

<div style="position:relative;width:500px;">
                       <div style="float:left;display:inline;">
                                     <select style="display:inline;"></select>
                       </div>
                       <div style="float:left;display:inline;">
                                      <select style="display:inline;"></select>
                        </div>
</div>

which is a select inside a div, next to another select inside its own div, all inside a div.

Then I constructed a Javascript function to spit out the same thing and when I use the Inspect Element function in Chrome it shows me the exact same code:

<div style="position:relative;width:500px;">
			<div style="float:left;display:inline;">
				<select style="display:inline;"></select>
			</div>
			<div style="float:left;display:inline;">
				<select style="display:inline;"></select>
			</div>
		</div>

The crazy problem is when I view the first one that is coded into the page, they appear side by side as they're supposed to. When I click the + button and run the Javascript to add the second code, the new select boxes appear above/below one another. Why is that? Why do they show the same code in Chrome and display differently in Internet Explorer?

Link to comment
Share on other sites

  • 3 weeks later...
This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.