Div Tag / IE Horror (Again)

Miscellaneous Forums/General Discussion/Div Tag / IE Horror (Again)

Picklesworth
 #1
This page is valid HTML 4.01 Transitional.
In Firefox, the 2 divisions are positioned correctly: Horizontally beside one-another. In IE, the 2nd division is positioned at the correct position on the X axis, but too far down on the Y axis.
Both of these divisions are clearly labelled via CSS to be at absolute positions and 125px down from the top of the page.

What really confuses me is why one is correct and the other is not. (I considered the Div tag not closing properly, but then Firefox would be doing the same thing... and the Div tag wouldn't be closed).

Has anybody bumped into similar problems and know why it happens?... or can you spot where I typoed?
(I do realize that FF is rather forgiving, so I'm willing to accept that IE isn't totally wrong here).

The following is the PHP code:
	//Side panel (Left) - Panel to change current action
	echo('<div style="position: absolute; width: 300px; height: 200px; z-index: 3; left: 10px; top: 125px;" id="actionlist">');
	echo('<b>What do you want to do?</b>');
	echo('<br><input type="submit" onClick="FormSubmit(this)" value="Add Content" name="oppageadd" style="width: 200px; height: 30px">');
	echo('<br><input type="submit" onClick="FormSubmit(this)" value="Manage Content" name="oppageedit" style="width: 200px; height: 30px">');	
	echo('<br><input type="submit" onClick="FormSubmit(this)" value="Upload a File" name="opfileupload" style="width: 200px; height: 30px">');
	echo('<br><input type="submit" onClick="FormSubmit(this)" value="Manage Files" name="opfilemanage" style="width: 200px; height: 30px">');	
	echo('</div>');
	
	//Side Panel (Right) - Panel for current action
	echo('<div style="position: absolute; width: 450px; height: 200px; z-index: 3; left: 310px; top: 125px;" id="content">');
	if($content1=='pageadd')
	{
		pageadd();
	}elseif($content1=='pageedit'){
		pageedit();
	}elseif($content1=='filemanage'){
		filemanage();	
	}elseif($content1=='fileupload'){
		fileupload();
	}
	echo('</div>');
And yes, I know it's stupid to be using Echo 6 times in a row.
I like my PHP slow and tidy and my HTML heroically unreadable. (Which is why I'm giving you the PHP instead of the HTML).
Actually, that PHP will be fixed to not be stupid when I am finished.

And, a screenshot:

(OT: How do you like my custom Try Firefox button, which fixes the odd pushiness implied by "Get Firefox!"?
Isn't it hilarious how Firefox's Windows XP buttons look better than IE's Windows XP buttons... and that I can make buttons that look better than those messes that IE has created, by myself, without any budget? It appears to have, instead of creating a proper scaled button gadget, created a smaller button gadget and then scaled it up via some disgusting workaround).

I am running this on a local test server right now, but if it turns out to be one of those more troublesome web design blunders, I'd like to know how Opera treats this :)

Thanks in advance!

Genexi2
 #2
Have you tried not using the <br>'s for your buttons there? Looks like IE is having possible conflicts with them for some reason.....how about putting the HTML code into a {codebox} so we can see incase there might be a little typo, or coding error on your part in there?
(regarding the left-column buttons, they should automatically line-up vertically if you specify a max-width with a display:block; no?)

Picklesworth
 #3
Actually, the buttons are having that problem due to a strange ratio thing... if I reduce their width just a tiny bit, they look right :)
(I plan to do that some day).

Thanks for the thought, though!
I tried it, but no change.

Genexi2
 #4
[EDIT] Nvm, thought I saw a typo that wasn't there, semicolon/colon hard to differentiate sometimes when yer tired. ;/

Just cant think of anything else that may be the problem aside from things like margins or padding......and using the dirty html>body trick doesn't look like the answer you're looking for.

Perturbatio
 #5
<!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" lang="en" xml:lang="en">
<head>
<title></title>
	<meta http-equiv="Content-Language" content="en-uk" />
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta name="robots" content="all" />
	<meta http-equiv="imagetoolbar" content="false" />
	<meta name="MSSmartTagsPreventParsing" content="true" />
<style type="text/css">
<!--
#left-col{
	border: 1px solid black;
	float:left;
	width: 20%;
	padding: 0;
	margin: 0;
}

#right-col {
	border: 1px solid red;
	float:right;
	width: 78%;
	padding:0;
	margin:0;
}
-->
</style>
</head>
<body>
<div id="left-col">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis bibendum est a libero. Pellentesque est. Etiam leo diam, molestie posuere, tincidunt eget, ornare eu, quam. Integer sit amet nibh. Sed suscipit, diam commodo sollicitudin fermentum, eros mauris luctus diam, non semper sapien elit vel felis. Suspendisse id lacus. In mattis, nulla et egestas semper, leo nibh venenatis mi, non commodo sem metus sed ante. Praesent semper arcu ac est convallis placerat. In nisl eros, eleifend a, euismod sit amet, vehicula et, leo. Pellentesque accumsan euismod est. Sed sollicitudin ante id eros. Pellentesque feugiat eros vel massa fringilla iaculis. Donec et lectus. Aenean nonummy imperdiet felis. Nam faucibus convallis dui. In rutrum. Quisque aliquet congue turpis. Suspendisse mi libero, tempus vel, viverra et, vestibulum vel, elit. Morbi in augue. Morbi est erat, rutrum id, venenatis nec, feugiat vel, nisi.
</div>

<div id="right-col">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis bibendum est a libero. Pellentesque est. Etiam leo diam, molestie posuere, tincidunt eget, ornare eu, quam. Integer sit amet nibh. Sed suscipit, diam commodo sollicitudin fermentum, eros mauris luctus diam, non semper sapien elit vel felis. Suspendisse id lacus. In mattis, nulla et egestas semper, leo nibh venenatis mi, non commodo sem metus sed ante. Praesent semper arcu ac est convallis placerat. In nisl eros, eleifend a, euismod sit amet, vehicula et, leo. Pellentesque accumsan euismod est. Sed sollicitudin ante id eros. Pellentesque feugiat eros vel massa fringilla iaculis. Donec et lectus. Aenean nonummy imperdiet felis. Nam faucibus convallis dui. In rutrum. Quisque aliquet congue turpis. Suspendisse mi libero, tempus vel, viverra et, vestibulum vel, elit. Morbi in augue. Morbi est erat, rutrum id, venenatis nec, feugiat vel, nisi.
</div>
</body>
</html>


Perturbatio
 #6
<!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" lang="en" xml:lang="en">
<head>
<title></title>
	<meta http-equiv="Content-Language" content="en-uk" />
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta name="robots" content="all" />
	<meta http-equiv="imagetoolbar" content="false" />
	<meta name="MSSmartTagsPreventParsing" content="true" />
<style type="text/css">
<!--
#left-col{
	float:left;
	width: 20%;
	padding: 0;
	margin: 0;
}

#right-col {
	border: 1px solid red;
	float:right;
	width: 78%;
	padding:0;
	margin:0;
}

ul#button-list-left {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul#button-list-left li {
	margin: 0;
	padding: 0;
}
ul#button-list-left li input {
	background-color: #efeffe;
	border-color: #aeaefe;
	width: 100%;
	margin-bottom: 4px;
	padding: 2px;
}

#folder-list {
	float:left;
	width: 25%;
}
#folder-list select {
	float:left;
	width: 100%;
}
#folder-list input{
	float:left;
	width: 100%;
}

#file-list {
	float:left;
	width: 74%;
}


#file-list select {
	width: 100%;
	float:left;
}
#file-list input {
	width: 49%;
	float:left;
	margin: 0;
}
.break {
	clear:both;
	border: none;
	background-color: transparent;
	height: 0;
	padding: 0;
}
-->
</style>
</head>
<body>
<div id="left-col">

	<ul id="button-list-left">
		<li><input type="submit" name="submit" id="" value="vdsvdsvd" /></li>
		<li><input type="submit" name="submit" id="" value="fdsgfdsgsd" /></li>
		<li><input type="submit" name="submit" id="" value="grewgrw" /></li>
		<li><input type="submit" name="submit" id="" value="grewgre" /></li>
		<li><input type="submit" name="submit" id="" value="gregrgre" /></li>
	</ul>

</div>

<div id="right-col">
	<div id="folder-list">
		<select name="test" size="6">
			<option value="1" selected="selected">Item Number 1</option>
			<option value="2">Item Number 2</option>
			<option value="3">Item Number 3</option>
			<option value="4">Item Number 4</option>
			<option value="5">Item Number 5</option>
			<option value="6">Item Number 6</option>
			<option value="7">Item Number 7</option>
			<option value="8">Item Number 8</option>
			<option value="9">Item Number 9</option>
			<option value="10">Item Number 10</option>
		</select>
		<br class="break" />
		<input type="button" name="" id="" value="Open" />
	</div>
	<div id="file-list">
		<select name="test" size="6">
			<option value="1" selected="selected">Item Number 1</option>
			<option value="2">Item Number 2</option>
			<option value="3">Item Number 3</option>
			<option value="4">Item Number 4</option>
			<option value="5">Item Number 5</option>
			<option value="6">Item Number 6</option>
			<option value="7">Item Number 7</option>
			<option value="8">Item Number 8</option>
			<option value="9">Item Number 9</option>
			<option value="10">Item Number 10</option>
		</select>
		<br class="break" />
		<input type="button" name="" id="" value="Edit Page" />
		<input type="button" name="" id="" value="Delete Page" />
		
	</div>
</div>
</body>
</html>


Updated version

(It will not conform to XHTML specs until you give your inputs unique ID's but after that it will be valid).

Picklesworth
 #7
Much more tidy! Thank you :)

I have to learn that stuff.


Now that I'm awake again, I guess I could have also turned those Div tags into tables. (Originally, absolutely positioned div tags were the best solution, but the interface was made very simple recently).
I guess I just don't like being defeated by IE.

Perturbatio
 #8
np :)