Antworten zum Thema „Problem im IE9: fixiertes Div verschiebt sich an Rand“

[spoadr]

Hallo Comunity

Ich habe ein Problem mit dem IE - vielleicht hat er aber auch eines mit mir - jedenfalls wird ein DIV nicht so dargestellt, wie ich es gerne hätte. Im Chrome funktioniert es wie gewünscht.

Zuerst die beiden Screenshoots:

Chrome


IE9


Sobald gescrollt wird, füge ich dem DIV aa_Button via jQuery position:fixed hinzu. Im Chrome klappt das wie gewünscht, das Div schwebt einfach weiter. Im IE verschiebt sich das DIV rechts an das DIV Content oder Wrapper (kann ich nicht feststellen)

Hat einer eine Idee was da falsch läuft?

HTML Code

<div id="wrapper" >

	<div id="Head" >
	</div>
	
	<div id="content">[/PHP]
	
		<div id="aa_Buttons">
		</div>
		
		<div class="aa_Schritte">
		</div>
		
	</div>
</div>

CSS Code:

#wrapper
{
	width: 1000px;
	margin:0px auto;
	text-align:left;
}

#content {
	width: 1000px;
	margin-top: 15px;
	margin-bottom: 15px;
	text-align:left;
	min-height: 622px;
	float: left;
	background-color: #8ab2db; /*#5fa8e2;*/
	pisition: relative;
	
}

#aa_Buttons
{
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid black;
	text-align: center;
	width: 1000px;
	background-color: #8ab2db;

}

.fixed
{
	position: fixed;
	top: 0px;
	z-index: 99;
	/*left: 50%;
	margin-left: -500px;*/
	
}

.aa_Schritte
{
	position: relative;
	margin-bottom: 10px;
	border-bottom: 1px solid black;
	float: left;
	width: 1000px;
	padding-bottom: 10px;
}

die Klasse fixed füge ich über jQuery hinzu

jQuery(document).ready(function () {  
  var top = jQuery('#aa_Buttons').offset().top - parseFloat(jQuery('#aa_Buttons').css('marginTop').replace(/auto/, 0));
  jQuery(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = jQuery(this).scrollTop();
    // whether that's below the form
    if (y >= top) {
      // if so, ad the fixed class
      jQuery('#aa_Buttons').addClass('fixed');
    } else {
      // otherwise remove it
      jQuery('#aa_Buttons').removeClass('fixed');
    }
  });
});

Wo habe ich ein Denkfehler? Irgendwo wird da was mit dem CSS nicht genau stimmen...
Das Projekt ist im Intranet zu finden, daher kann ich keinen direkten Link anbieten

Besten Dank für Eure geschätzten Hinweise!
Gruss
Adrian

 

[spoadr]

AW: Problem im IE9: fixiertes Div verschiebt sich an Rand

Ich habe den Fehler gefunden: in unseren IEs ist der Haken "Intranetsites in Kompatabilitätsansicht anzeigen" gesetzt. Nehme ich diesen raus, zeigt der IE die Seite so an wie gedacht... der IE zeigt dann auch CSS 3 Befehle sauber an... z.B. runde Ecken...

Jedenfalls wird es ein "Krampf", diesen Haken bei allen Usern herausnehmen zu lassen... gibt es eine Möglichkeit, wie man das umgehen kann? Wohl eher nicht...

 

[spoadr]

AW: Problem im IE9: fixiertes Div verschiebt sich an Rand

So und nun können wir dieses Thema schliessen, denn mit folgendem Meta-Tag:

<meta http-equiv="X-UA-Compatible" content="IE=9"/>

wird die Webseite trotz gesetztem Haken tip top dargestellt... und da es sich hier ums Intranet handelt, in dem jeder mit dem IE9 unterwegs ist, passt das...