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

DeX · December 14, 2010

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>

denno020 · December 15, 2010

Do you use CSS to line the elements up?

I reckon it would be a problem with something you've used in your CSS, and IE7 not supporting it..

Maybe you need to see what new CSS features IE8 supports compared to IE7, and see if you have used any of them.

Denno

DeX · December 15, 2010

I'm just using "float:left;" in my CSS so it should be fine. But in the piece of code I posted, I'm not using any CSS and it's still not working.

bspace · December 17, 2010

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

DeX · December 18, 2010

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>

DeX · December 26, 2010

Anyone?

DeX · December 29, 2010

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?

DeX · January 17, 2011

Figured this out. Instead of

element.setAttribute("class", "row");

I should have used

element.setAttribute("className", "row");

for Internet Explorer 7 support.

Maq · January 17, 2011

If this is resolved could you please mark so? (Button on bottom left)

Sign In

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

Recommended Posts

DeX

Link to comment

Share on other sites

denno020

Link to comment

Share on other sites

DeX

Link to comment

Share on other sites

bspace

Link to comment

Share on other sites

DeX

Link to comment

Share on other sites

DeX

Link to comment

Share on other sites

DeX

Link to comment

Share on other sites

DeX

Link to comment

Share on other sites

Maq

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information