Inconsistent div behaviour

[Bardius]

Hey,

The problem I'm currently having with one of my divs is its inconsistency in terms of behaviour/output.

 	#leftcontent {
 		position: absolute;
 		left:10px;
 		top:71px;
 		width:200px;
 		background:#09304B;
 		border-top:0px solid #fff;
 		}
 
 .fieldName { 
 	float: left;
 	background-color: #DEDEDE;
 	width: 15%;
 	
 	margin-left: 230px;
 	margin-right: 10px;
 	margin-top: 5px;
 	margin-bottom: 5px;
 
 	border-style: dotted;
 	border-left-width: 1px;
 	border-right-width: 1px;
 	border-top-width: 1px;
 	border-bottom-width: 1px;
 	padding-bottom: 5px;
 	border-color: #4C4C6D;	
 	
 	font-family: Verdana;
 	font-color: #000000; 
 	font-size: 10px; 
 	font-weight: bold;
 	
 }

The fieldName div placed in the middle column - floating to the right of a leftcontent left sided div taking up 200 pixels in width.

The problem is that in certain pages this div appears (correctly) 230 pixels to the right of the screen and on other pages.. It appears 230 pixels AFTER the left div meaning 430 pixels to the right of the screen.

Both pages are running in the same template so I have no idea why this could be?

[Paul O'B]

Hi,

IE has a bug on float margins. If the float is the first float in a line and then the margin next to the viewport edge (ie the left margin in this case) is almost double what it should be. Subsequent floats on the same row do not exhibit this behaviour.

Therefore you can supply one value to IE and one value for other browsers.

.fieldName { 
	float: left;
width:15%;
margin-left: 230px;
}
*html .fieldName {margin-left:115px;}/* for IE only */

You will need a bit of trial and error to place it where it should be.

As your #leftcontent is absolutely placed it will have no effect on surrounding content. However, sometimes in IE and Mozilla, if the absolute code is first in the html it may throw the browsers off. This behaviour is not consistent and may happen rarely, but I always make sure that my absolutely placed element always come at the end of the html. (Unless of course they are nested and must stay inside their parent.)

Hope that helps.

Paul