✔ Div-Layer nicht korrekt platziert

mediaroad · 22. September 2008

Hallo zusammen,

ich habe ein Problem mit meiner Website. Im Firefox und auch im IE 7 wird meine Seite korrekt angezeigt, doch im IE 6 springt der Div-Layer komplett um.

Ich bin mit meinem "Latein" echt am Ende. Hab schon gegooglet und in verschiedenen Foren nachgeschaut, doch nix hat mir weitergeholfen.

"content_gesamt" =blau eingefärbt / "links_gesamt" =magenta eingefärbt

Hier mal der HTML-Code und meine CSS:

HTML:

<div id="content_gesamt"> 
       <div id="content_rechts"></div>
       <div id="content_bg"></div>
	<div id="pfeile"></div>
	<div id="footer_bg"></div>	
</div>
<div id="links_gesamt"></div>

Code:

#content_gesamt{
		width:480px;
		height:415px;
		float:right;
		background-color:#0000FF;
}

#links_gesamt{
		width:500px;
		height:315px;
		float:left;
		clear:left;
		background-color:#FF00FF;
}

Anbei noch ein Screenshot vom Firefox und IE 6!

Schon mal Danke im voraus.

Maik · 22. September 2008

Hi,

mit dem gezeigten HTML- und CSS-Codesnippet wird das DIV#links_gesamt bei mir im IE6 nicht umgebrochen.

mfg Maik

Maik · 22. September 2008

Selbst in dieser erweiterten Fassung wird von ihm alles korrekt ausgerichtet.

Code:

<div id="wrapper">
     <div id="content_gesamt">
          <div id="content_rechts"></div>
          <div id="content_bg"></div>
          <div id="pfeile"></div>
          <div id="footer_bg"></div>
     </div>
     <div id="links_gesamt"></div>
</div>

Code:

#wrapper {
                width:980px;
}

#content_gesamt{
                width:480px;
                height:415px;
                float:right;
                background-color:#0000FF;
}

#links_gesamt{
                width:500px;
                height:315px;
                float:left;
                clear:left;
                background-color:#FF00FF;
}

mfg Maik

mediaroad · 22. September 2008

Ich habe jetzt nochmal ein wenig weiter programmiert und den #links_gesamt mit anderen Divs "gefüllt"...jetzt passt es fast. Zumindest ist mein bisheriges Problem behoben

Ich glaube bei mir spinnt der IE 6 einfach nur. Ich glaube das liegt an dem multiple IE.
Wenn ich einmal F5 drück ist alles verschoben. Dann drück ich ungefähr fünfmal F5 und es ist alles ok und sieht aus wie bei allen anderen Browsern.

Aber Danke für die Hilfe

mediaroad · 22. September 2008

Jetzt weiß ich auch warum es bei dir ohne weiteres funktioniert...ich habe in meinem Design bzw in meinen Slices einen Umbruch drin. D.h. der blaue Layer soll sich ca 30px höher anlegen und kommt von rechts und der magentafarbende hat float:left; und kommt "regulär" von links.

Ich vermute vielleicht einen Bug beim IE, wenn ich den Cache komplett lösche und die Seite öffne wird sie zerschossen. Drück ich wieder ein paarmal hintereinander F5 ist wieder alles ok.

Jetz ist die Frage ist das ein Fehler beim Programmieren oder einfach nur der IE

Maik · 22. September 2008

Klingt zumindest nach dem IE6 Peekaboo Bug.

Ansonsten nenn mal den Link zur Seite, damit ich es mir im IE6 näher anschauen kann.

mfg Maik

mediaroad · 22. September 2008

IE Bug oder mein Fehler

Hallo an alle,

ich hab ein Problem an dem ich jetz schon echt lang sitze und langsam, nach vielem googlen und Foren durchstöbern, am Ende mit meinen Ideen bin.

Ich habe eine Website gebaut und die wird in allen Browsern korrekt angezeigt. Nur im IE6 nicht.

Vielleicht weiß jemand wie ich das Problem beheben kann und ob das überhaupt geht.
Mir wurde schon gesagt es könnte vielelicht der IE6 Peekaboo Bug sein könnte. Nur habe ich dazu auch nichts hilfreiches im Web gefunden.

Es geht um den div #content_gesamt und #links_gesamt....#content_gesamt wird komplett runter gedrückt. Wenn ich des Öfteren hintereinander F5 drücke sieht es immer mal wieder gut und nach einem weiteren F5 wieder bescheiden aus.

Hab mal den gesamten Quellecode reingeschrieben, damit man es besser nachvollziehen kann. (der Teil, um den es geht ist im unteren Teil

)

Ich danke schon mal für die Hilfe!

Hier mein Quellcode und die CSS

HTML:

<body>
                <div id="corpus">
			<div id="wrapper">
				<div id="oben">
					<div id="abstand_oben"></div>
					<div id="logo_links"></div>
					<div id="logo"></div>
					<div class="flash"><img src="bilder/flash_eins.png" /></div>
					<div id="oben_links"></div>
				</div><!--oben -->
				<div id="navi_links"></div>
				<div id="navi">
					<div id="navi_oben"></div>
					<div class="navi_btn"></div>
					<div class="navi_btn"></div>
					<div class="navi_btn"></div>
					<div class="navi_btn"></div>
					<div class="navi_btn"></div>
				</div><!-- navi -->
				<div id="subnavi_breit">
					<div id="subnavi_oben"></div>
					<div class="subnavi_btn_breit"></div>
					<div class="subnavi_btn_breit"></div>
					<div class="subnavi_btn_breit"></div>
					<div class="subnavi_btn_breit"></div>
				</div><!--subnavi breit -->
				<div class="flash"><img src="bilder/flash_zwei.png" /></div>
				<div id="headline_gesamt">
					<div id="headline_links"></div>
					<div id="headline"><img src="bilder/headline_leistungen.png"/></div>
					<div id="headline_rechts"></div>
				</div><!--headline -->
				<div id="subnavi_schmal">
					<div class="subnavi_btn_schmal"></div>
					<div class="subnavi_btn_schmal"></div>
					<div class="subnavi_btn_schmal"></div>
					<div class="subnavi_btn_schmal"></div>
					<div class="subnavi_btn_schmal"></div>
				</div><!--subnavi schmal -->
				<div class="flash"><img src="bilder/flash_drei.png" /></div>
				<div id="content_gesamt">
					<div id="content_rechts"></div>
					<div id="content_bg"></div>
					<div id="pfeile"></div>
					<div id="footer_bg"></div>	
				</div><!--content -->
				<div id="links_gesamt">
					<div id="vier_links"></div>
					<div class="flash"><img src="bilder/flash_vier.png" /></div>
					<div class="rechts"></div>
					<div id="funf_links"></div>
					<div class="flash"><img src="bilder/flash_fuenf.png" /></div>
					<div class="rechts"></div><div class="rechts"></div>
					<div id="sechs_links"></div>
					<div class="flash"><img src="bilder/flash_sechs.png" /></div>
					<div id="sechs_rechts"></div>
					<div id="unten"></div>
				</div>
			</div>
		</div>
</body>

Code:

body{
		margin:0px 0px 0px 0px;
		padding:0px 0px 0px 0px;
		background-image:url(../bilder/bg.png);
}
#corpus{
		width:982px;
		height:627px;
		margin:0px auto;
}
#wrapper{
		width:980px;
		height:625px;
		border:#2b2b2a solid 1px;	
}
img{
		border:0px;
		padding:0px;
		margin:0px;
		font-size:1px;
}
img a{
		border:0px;
		padding:0px;
		margin:0px;
		font-size:1px;
}
a:link, a:visited{
		font-family:Arial, Helvetica, sans-serif;
		font-size:11px;
		color:#692C1E;
		text-align:justify;
		line-height:18px;
		text-decoration:none;
}
a:hover, a:active, a:focus{
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#444444;
		text-align:justify;
		line-height:18px;
		text-decoration:none;
}
h1{
		font-size:14px;
		font-family:Arial, Helvetica, sans-serif;
		color:#692C1E;
		line-height:16px;
}
#oben{
		width:980px;
		height:110px;
		float:left;
}
#abstand_oben{
		width:980px;
		height:10px;
		float:left;
		font-size:1px;
		background-image:url(../bilder/abstand_oben.png);
		background-repeat:no-repeat;		
}
#logo_links{
		width:40px;
		height:100px;
		float:left;
		background-image:url(../bilder/logo_links.png);
		background-repeat:no-repeat;
}
#logo{
		width:370px;
		height:100px;
		float:left;
}
#oben_links{
		width:360px;
		height:100px;
		float:left;
		background-image:url(../bilder/oben_links.png);
		background-repeat:no-repeat;
}
.flash{
		width:210px;
		height:100px;
		float:left;
}
#navi_links{
		width:40px;
		height:200px;
		float:left;
		background-image:url(../bilder/navi_links.png);
		background-repeat:no-repeat;
}
#navi_oben{
		width:155px;
		height:15px;
		float:left;
		font-size:1px;
		background-color:#4f9e41;
}
#navi{
		width:155px;
		height:200px;
		float:left;
		background-color:#4f9e41;
}
.navi_btn{
		width:155px;
		height:37px;
		float:left;
		font-size:1px;
}
#subnavi_breit{
		width:157px;
		height:100px;
		float:left;
		background-color:#4f9e41;
}
#subnavi_oben{
		width:157px;
		height:16px;
		float:left;
		font-size:1px;
		background-color:#4f9e41;
}
.subnavi_btn_breit{
		width:157px;
		height:21px;
		float:left;
		font-size:1px;
}
#subnavi_schmal{
		width:95px;
		height:100px;
		float:left;
		background-color:#4f9e41;
}
.subnavi_btn_schmal{
		width:95px;
		height:20px;
		float:left;
		font-size:1px;
}
#headline_gesamt{
		width:418px;
		height:100px;
		float:left;
}
#headline_links{
		width:60px;
		height:100px;
		background-color:#2b2b2a;
		float:left;
}
#headline{
		width:318px;
		height:100px;	
		float:left;
}
#headline_rechts{
		width:40px;
		height:100px;
		float:left;
		background-image:url(../bilder/headline_rechts.png);
		background-repeat:no-repeat;
}
#content_gesamt{
		width:480px;
		height:415px;
		float:right;
}
#content_bg{
		width:440px;
		height:300px;
		float:left;
		background-color:#2b2b2a;
}
#content_rechts{
		width:40px;
		height:415px;
		background-image:url(../bilder/content_rechts.png);
		background-repeat:no-repeat;
		float:right;
}
#pfeile{
		width:440px;
		height:90px;
		float:left;
		background-image:url(../bilder/pfeile.png);
		background-repeat:no-repeat;
}
#footer_bg{
		width:440px;
		height:25px;
		float:left;
		background-image:url(../bilder/footer_bg.png);
		background-repeat:no-repeat;
}
#links_gesamt{
		width:500px;
		height:315px;
		float:left;
		background-color:#FF00FF;
}
#vier_links{
		width:230px;
		height:100px;
		float:left;
		background-image:url(../bilder/flash_vier_links.png);
		background-repeat:no-repeat;
}
.rechts{
		width:60px;
		height:100px;
		float:left;
		background-color:#2b2b2a;
}
#funf_links{
		width:170px;
		height:100px;
		float:left;
		background-image:url(../bilder/flash_fuenf_links.png);
		background-repeat:no-repeat;
}
#sechs_links{
		width:107px;
		height:100px;
		float:left;
		background-image:url(../bilder/flash_sechs_links.png);
		background-repeat:no-repeat;
}
#sechs_rechts{
		width:183px;
		height:100px;
		float:left;
		background-image:url(../bilder/flash_sechs_rechts.png);
		background-repeat:no-repeat;
}
#unten{
		width:500px;
		height:15px;
		float:left;
		background-image:url(../bilder/abstand_unten.png);
		background-repeat:no-repeat;
		font-size:1px;
}

Maik · 22. September 2008

Einen Link bzgl. des "Peekaboo Bugs" mit weiterführenden Infos hatte ich dir sehr wohl genannt.

Möglicherweise hilft hier auch mein Webmaster-FAQ-Artikel CSS Unerwünschter Abstand zwischen floatenden Boxen im IE6 - was tun? weiter, denn ich hab allmählich die Vermutung, dass an irgendeiner Stelle der IE6 Three Pixel Gap auftritt.

mfg Maik

P.S. Ich war mal so frei, dein neues Thema mit diesem hier zusammenzutackern, da dies ja seine Fortsetzung ist.

mediaroad · 22. September 2008

Ich war auch auf dem Link bezgl des Peekaboo-Bugs, doch das hat mich nicht weitergebracht. Hab jetzt echt alles ausprobiert auch den Three Pixel Grap...nix funktioniert.
Normalerweise hab ich den Trick irgendwann, aber diesmal ist der Wurm drin.

Aber ich Danke dir für deine Hilfe, zumindest weiß ich jetz ungefähr wieviele verschiedene IE Bugs es gibt

auch wenn sie im Moment nicht weiterhelfen.

PS: Fürs Double-Posten nochmal tschuldigung...bin in diesem Forum nicht so bewandert

✔ Div-Layer nicht korrekt platziert

mediaroad

Mitglied

Anhänge

Maik

Maik

mediaroad

Mitglied

mediaroad

Mitglied

Maik

mediaroad

Mitglied

Maik

mediaroad

Mitglied

Neue Beiträge