✔ Fehler in Browseransicht!

Status
Nicht offen für weitere Antworten.
cille

cille

Erfahrenes Mitglied
Hi ho und frohes Neues,
ich habe ein Fehler im Layout was aber nur der IE6 anzeigt.
Im IE 7 und im FF 2.xx zeigt er es mir richtig an.
Da ich aber die Homepage auch in IE 6 richtig anzeigen lassen muss und soll muss ich diesen kleinen fehler weg bekommen, ich kriege das nicht hin :( .

So schaut es im IE7 aus
So im FF 2.xx
Und so schaut es im IE 6 aus

Wie Ihr sehen Könnt ist da ein Fehler kann ihn aber nicht finden,
Hier mal der komplette Code:

HTML: 
<div class="wrapper">
	<div class="rand">
		<div class="header01"><div class="marquee"><marquee  behavior="scroll" direction="left" width="790" scrollamount="1" scrolldelay="20" truespeed="yes" /><?php require("show/laufbilder.php"); ?></marquee></div></div>
		<div class="navigation">
			<div class="navibild01">
				<a href="index.php?main=druckerei" 	onMouseover="bild1.src='images/1.gif'; bild01.src='images/roll_01.gif';" onmouseout="bild1.src='images/02.gif'; bild01.src='images/03.gif';" ><img border="0" name="bild1" src="images/02.gif" width="90" height="84" /></a>
				<img border="0" name="bild01"  src="images/03.gif" width="240" height="84" />
			</div>
			<div class="navibild02">
				<a href="index.php?main=siebdruck" 	onMouseover="bild2.src='images/2.gif'; bild01.src='images/roll_02.gif';" onmouseout="bild2.src='images/09.gif'; bild01.src='images/03.gif';" ><img border="0" name="bild2" src="images/09.gif" width="90" height="82" /></a>
				<a href="index.php?main=leistungen" onMouseover="bild3.src='images/3.gif'; bild01.src='images/roll_03.gif';" onmouseout="bild3.src='images/10.gif'; bild01.src='images/03.gif';" ><img border="0" name="bild3" src="images/10.gif" width="84" height="82" /></a>
				<img border="0" src="images/11.gif" width="156" height="82" />
			</div>
			<div class="navibild03">
				<a href="index.php?main=plakate" 		onMouseover="bild4.src='images/4.gif'; bild01.src='images/roll_04.gif';" onmouseout="bild4.src='images/12.gif'; bild01.src='images/03.gif';" ><img border="0" name="bild4" src="images/12.gif" width="90" height="80" /></a>
				<a href="index.php?main=bucher" 		onMouseover="bild5.src='images/5.gif'; bild01.src='images/roll_05.gif';" onmouseout="bild5.src='images/13.gif'; bild01.src='images/03.gif';" ><img border="0" name="bild5" src="images/13.gif" width="84" height="80" /></a>
				<a href="index.php?main=kunstdruck" onMouseover="bild6.src='images/6.gif'; bild01.src='images/roll_06.gif';" onmouseout="bild6.src='images/14.gif'; bild01.src='images/03.gif';" ><img border="0" name="bild6" src="images/14.gif" width="76" height="80" /></a>
				<img src="images/15.gif" width="80" height="80" />
			</div>
			<div class="navibild04">
				<a href="index.php?main=referenzen" onMouseover="bild7.src='images/7.gif'; bild01.src='images/roll_07.gif';" onmouseout="bild7.src='images/16.gif'; bild01.src='images/03.gif';" ><img border="0" name="bild7" src="images/16.gif" width="90" height="76" /></a>
				<a href="index.php?main=kontakt" 		onMouseover="bild8.src='images/8.gif'; bild01.src='images/roll_08.gif';" onmouseout="bild8.src='images/17.gif'; bild01.src='images/03.gif';" ><img border="0" name="bild8" src="images/17.gif" width="84" height="76" /></a>
				<a href="index.php?main=links" 			onMouseover="bild9.src='images/9.gif'; bild01.src='images/roll_09.gif';" onmouseout="bild9.src='images/18.gif'; bild01.src='images/03.gif';" ><img border="0" name="bild9" src="images/18.gif" width="76" height="76" /></a>
				<a href="index.php?main=login" 			onMouseover="bild0.src='images/0.gif'; bild01.src='images/roll_10.gif';" onmouseout="bild0.src='images/19.gif'; bild01.src='images/03.gif';" ><img border="0" name="bild0" src="images/19.gif" width="80" height="76" /></a>
			</div>
		</div>
		<div class="umrisscontent01"></div>
		<div class="umrisscontent02">
			<div class="content">
			<?php
			// Include alle Daten
			require("show/switch.php");
			?>
			</div>
			<div class="umrisscontent03"></div>
			
		</div>
		<div class="umrisscontent04"></div>
		<div class="umrisscontent05"></div>
		<div class="foot"></div>
	</div>
	<div class="browser">
	Optimale Ansicht im:<br />
	Microsoft Internet Explorer 7<br />
	Mozilla Firefox 2.xx	
	</div>
</div>

Hier die CSS-Datei:
HTML: 
/* Design */
.wrapper {
	margin: 0 auto;
	width: 889px;
}
.rand {
	border: 2px #ffffff solid;
	width: 889px;
	float: left;
}
.header01 {
	background-image: url(images/01.gif);
	width: 889px;
	height: 156px;
	background-position: center;
	background-repeat: no-repeat;
}
.navigation {
	width: 330px;
	vertical-align: top;
	float: left;
}
.navibild01 a, .navibild01 a:link, .navibild01 a:visited, .navibild01 a:hover, .navibild01 a:active, .navibild01 img {
	float: left;
	display: block;
}
.navibild02 a, .navibild02 a:link, .navibild02 a:visited, .navibild02 a:hover, .navibild02 a:active, .navibild02 img {
	float: left;
	display: block;
}
.navibild03 a, .navibild03 a:link, .navibild03 a:visited, .navibild03 a:hover, .navibild03 a:active, .navibild03 img {
	float: left;
	display: block;
}
.navibild04 a, .navibild04 a:link, .navibild04 a:visited, .navibild04 a:hover, .navibild04 a:active, .navibild04 img {
	float: left;
	display: block;
}
.umrisscontent01 {
	background-image: url(images/04.gif);
	background-repeat: no-repeat;
	width: 26px;
	height: 322px;
	float: left;
	display: block;
}
.umrisscontent02 {
	background-image: url(images/05.gif);
	background-repeat: no-repeat;
	width: 410px;
	height: 17px;
	float: left;
}
.umrisscontent03 {
	background-image: url(images/20.gif);
	background-repeat: no-repeat;
	width: 410px;
	height: 19px;
	float: left;
}
.umrisscontent04 {
	background-image: url(images/06.gif);
	background-repeat: no-repeat;
	width: 26px;
	height: 322px;
	float: left;
}
.umrisscontent05 {
	background-image: url(images/07.gif);
	background-repeat: no-repeat;
	width: 97px;
	height: 322px;
	float: left;
}
.foot {
	background-image: url(images/21.gif);
	background-repeat: no-repeat;
	background-position: center;
	width: 889px;
	height: 21px;
	float: left;
}
.browser {
	text-align: center;
	font-family: "Courier New", Courier, monospace;
	font-size: 10px;
}
.marquee {
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-top: 12px;
	width: 790px;
	height: 110px;
}
.content {
	background-color: white;
	width: 402px;
	height: 272px;
	overflow: auto;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: black;
	margin-top: 17px;
	padding-bottom: 10px;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 4px;
	float: left;
}
.content a, .content a:link, .content a:visited, .content a:active {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #7BBFFF;
	text-decoration: none;
}
.content a:hover {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #0066CC;
	text-decoration: underline;
}

Der wichtige Teil denk ich mal ist die "<div>" -> navibild04
das ist die "10"

Würde mich riesig auf antworten freuen, stehe euch gerne weiter zur verfügung.
 
Hast du es für das betroffene DIV anstelle von float:left mal mit float:right probiert?
 
Hi,

ergänze mal den letzten Link im Container navibild04 durch folgende CSS-Klasse:
Code: 
* html .fix-ie{ margin-right: -3px;}
Der zugehörige HTML-Bereich:
Code: 
			<div class="navibild04">
				<a href="index.php?main=referenzen" onMouseover="bild7.src='images/7.gif'; bild01.src='images/roll_07.gif';" onmouseout="bild7.src='images/16.gif'; bild01.src='images/03.gif';" ><img border="0" name="bild7" src="images/16.gif" width="90" height="76" /></a>
				<a href="index.php?main=kontakt" 		onMouseover="bild8.src='images/8.gif'; bild01.src='images/roll_08.gif';" onmouseout="bild8.src='images/17.gif'; bild01.src='images/03.gif';" ><img border="0" name="bild8" src="images/17.gif" width="84" height="76" /></a>
				<a href="index.php?main=links" 			onMouseover="bild9.src='images/9.gif'; bild01.src='images/roll_09.gif';" onmouseout="bild9.src='images/18.gif'; bild01.src='images/03.gif';" ><img border="0" name="bild9" src="images/18.gif" width="76" height="76" /></a>
				<a class="fix-ie" href="index.php?main=login" 			onMouseover="bild0.src='images/0.gif'; bild01.src='images/roll_10.gif';" onmouseout="bild0.src='images/19.gif'; bild01.src='images/03.gif';" ><img border="0" name="bild0" src="images/19.gif" width="80" height="76" /></a>
			</div>
Funktioniert bei mir im IE6 (Doctype HTML4.01 loose). Niedrigere IE-Versionen haben allerdings Anzeigeprobleme
und der IE7 steht mir im Augenblick nicht zum Testen zur Verfügung.

Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
Ich weis nicht wie ich dir danken soll, war schon völlig am verzweifeln :).
Das klappt perfekt, funktioniert perfekt im IE6 , IE7, FF1.xx und FF2.xx .
Ist ein sehr nietlicher fehler, wie kommt man auf sowas?
Erzähle mal :D
 
Hierbei handelt es sich um den sog. "3px-Gap-Bug" im IE, der bei floatenden Elementen auftritt und sich mit dem vorgeschlagenen "Workaround" beheben lässt.

Dass mir das gestern nicht eingefallen ist ...:-(
 
Warum macht immer IE solche schwierigkeiten?
Das regt mich langsam aber sicher irgendwie mehr auf ^^.
 
Es ist ja ein altbekanntes Thema, dass der IE sich nicht immer an die Standards hält und dem Webdesigner so manches Kopfzerbrechen bereitet, sowie von ihm gewisse "Improvisationskünste" abverlangt ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück