Hi HTMLler,
wiedermal stehe ich vor einem Problem das mir keine Ruhe lässt...

Konkret geht es um den Kompaktiblitäts Modus vom IE.
Aus irgendeinen Grund funktionieren manche CSS Eigenschaften erst nachdem man das padding wegnimmt und wieder setzt.

Oben sieht man wie die Seite aussieht im IE8 Modi, unten wie sie aussieht wenn ich in den Developer Tools das padding aktivieren & deaktiviere.

Ich habe versucht die entsprechenden CSS stellen rauszusuchen und es Beispielhaft zu rekonstruieren aber es scheint vom ganzen Abhängig zu sein... Leider kann ich das Projekt als ganzes nicht vorzeigen.

Nichts desto trotz treffe ich diesen "Fehler" öfter mal an, und für gewöhnlich baue ich ein Workaround bis es funktioniert, diesmal wird es aber einfach nicht besser...

Im IE7 Mod, das selbe verhalten nur andere Design Auswirkungen (die Schrift klebt oben, aber das weiss ist da, kurz padding an und aus, richtig ist es)

Ich würde mich extrem freuen wenn mir jemand dieses Verhalten erklären könnte, damit ich in Zukunft auch damit umzugehen weiss...

CSS ohne dem keine Darstellungsprobleme mehr da sind:

.elementForm { position:relative; padding:0px!important; }  
div.pflichtfeld { color:#B8061C; position:absolute; bottom:16px; left:16px; }  
.elementForm input, .elementForm textarea, .elementForm select { background-color:white; border:0px solid white; border-radius:3px; --moz-border-radius:3px; --webkit-border-radius:3px; color: #B8061C; padding:6px 10px; font-family:'FrutigerLTW01-55Roman'; margin:0; }  
.elementForm .formFirstBlock { margin-left:10px; margin-top:10px; padding:0; }  
.elementForm .formFirstBlock input { margin-bottom:8px; }  
.elementForm .formLastBlock { margin-right:10px; margin-top:10px; padding:0; }  
.elementForm .formLastBlock input { margin-bottom:8px; }  
.elementForm dt label { display:none; }  
.elementForm dd { margin:0; padding:0; width:auto; }  
.elementForm .spacer { margin-bottom:10px; }  
.elementForm dd.full { margin-left:0px; margin-top:-30px; margin-bottom:20px; }  
.elementForm input[type=submit], .elementForm button[type=submit] { background:url(/images/gui.png) no-repeat 0 -300px; width:287px; border:0px solid white; text-align:left; color: #B8061C; padding:10px; font-family:'FrutigerLTW01-55Roman'; position:absolute; bottom:8px; right:6px; margin-top:20px; }  
.elementForm .needSpace { padding-left:4px; }  
.elementForm button[type=reset] { display:none; }  
.elementForm dd.needSpace { margin-bottom:6px; }

Danke im vorraus!

PS: Das funktioniert nicht, wohl nur über die DEV tools...

	$('input').each(function(index,elem){  
		var pad = $(this).css('padding');  
		$(this).css('padding','0px').delay(500).css('padding',pad);  
	});