PC Chrome and PC IE, same page, wrong alignment?

Ok, here is my issue: In Chrome I see this:



In IE I see this:



As far as I can tell this should not be happening, can someone help me figure out why this is happening?

My CSS shows this for this field:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, height, width, top, bottom,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

#all {
		position:			relative;
		padding-top:		10px;
		padding-bottom:		5px;
		padding-left:		10px;
		font-family: 		serif;
		width: 				755px;
		height:				700px;
		margin-left: 		10px; 
}

#box2 {
		position:			absolute;
		height:			220px;
		width:			400px;
		padding:			5px;
		border: 			3px #999999;
		border-style:		groove;
		left:				420px;
		top:				-3px;
}


#nioh{
		position: 			relative;
		left:				33px;
		text-align:			left;
}


#nic{
		position: 			relative;
		left:				72px;
		text-align:			left;
		top:				5px;
}


#sun{
		position: 			relative;
		left:				115px;
		text-align:			left;
		top:				10px;
}


#supn{
		position: 			relative;
		left:				96px;
		text-align:			left;
		top:				15px;
}


#mpn{
		position: 			relative;
		left:				14px;
		text-align:			left;
		top:				20px;
}


#msn{
		position: 			relative;
		left:				4px;
		text-align:			left;
		top:				25px;
}


#cnno{
		position: 			relative;
		left:				148px;
		text-align:			left;
		top:				30px;
}

Code (markup):

 

Showing the CSS alone is only half the picture. We need the complete markup or, preferably, a link. But in ALL cases, you should never trust IE to do anything right. Chrome is showing what you wrote.

 

I posted screen shots..., if you must see a link in what the screen shots will show the same thing the link is here: http://kaboomlabs.com/PDI/test.php

 

As I said, CSS is only half the picture. Without the HTML, it's meaningless.

 

Validate your html for that list of errors.
You are using a lot of absolute positioning but I'm not sure you understand that that will cause those elements to be removed from the normal flow. I'm also not sure why you feel you need to use it.

 

I'm using absolute for now, this was a rush job that was required to be done today.

As for validate my html? I am using PHP, it won't validate... what does that have to do with anything? I just have to ask because you seem to not really answering my question.


BTW, I changed everything to relative, and it still doesn't show up correctly. Nothing has changed.

http://kaboomlabs.com/PDI/test2.php

 

Nonsense.

Validation is error checking. You have errors that need fixing.

I am trying to help solve your problem. You cannot expect different browsers to react to errors the same way and you cannot expect browsers to react to errors in the manner you wish.

Changing to relative may not be the solution.

 

Well since you are asking me to fix a problem that I didn't know the answer to I decided to google the problem. After several hours of searching I found a solution. And no, I never would of figured it out on my own.

You can agree with it or not, but it is the one I am going to use.

<!--[if IE]><link rel="stylesheet" type="text/css" href="CSS/ie.css" /><![endif]-->
<!--[if !IE]> <--><link rel="stylesheet" type="text/css" href="CSS/nonie.css" /><!--> <![endif]-->

 

try setting the height to auto

 

That is not a solution. And you are trying to cover up a much larger problem. But, looking at your markup, it runs too deep for me to bother with.

 

If you have to relative position EVERY element, you've already screwed up. Much less with form elements, which CANNOT be styled consistently in terms of size cross browser -- EVER.

Your markup is just plain gibberish -- nonbreaking spaces for nothing, spans doing the LABEL tag's job, vague/meaningless classes. The entire mess needs to be pitched and started over using PROPER HTML with a logical and proper form structure.

Just to give you an idea what I'm talking about, ALL of those div, span and non-breaking spaces should be axed.... for a structure more like this:

<form action="#" method="post" id="partForm">
	<fieldset>
	
		<label for="addedBy">Added By:</label>
		<input type="text" name="Added_By" id="addedBy" />
		<br />
		
		<label for="addedByDate">On:</label>
		<input type="text" name="Added_By_Date" id="addedByDate" />
		<br />
		
		<label for="nexxPart">Nexx Part:</label>
		<input type="text" name="Nexx_Part" id="nexxPart" />
		<br />

Code (markup):

Set the labels to display:inline-block, fix their width, text-align:right; and let flow do it's job rather than all that pointless wasteful positioning code you're wasting your time on! Oh, and there's no reason to say value when it's empty

Depending on what the final appearance is I suspect you have multiple fieldsets there... and if it's not separate fieldsets then your H2 should be a LEGEND, not a heading.

Oh, and that IE condition comment nonsense is a bubble gum and bailing wire fix that, as our resident stooges fan pointed out, is little more than trying to cover up bad code instead of FIXING bad code.