✔ IE 6 macht nicht das was er soll...

P

Philipp-

Hallo Community,

ich verzweifle langsam echt an dem Internet Explorer 6.
Habe mal wieder ein Problem, Internet Explorer 7 und Firefox gehen immer bestens, Internet Explorer 6 manchmal auch, aber nicht immer geht alles dann.

Auf dieser Seite, seht ihr Rechts die Boxen für Suche und Bewertung. Im Firefox und Internet Explorer 7 sind diese an der richtigen Stelle. beim Internet Explorer 6 werden diese nach unten geschoben. Wenn ich versuche das ganze mit z.B. margin-top:-150px; nach oben zu bekommen, gehen die zwei Boxen nach oben, jedoch werden sie dann komischer Weiße nicht mehr angezeigt. Ich hab schon alles ausprobiert, jedoch komm ich einfach nicht mehr weiter.
Wäre echt lieb wenn ihr mir helfen könntet.

So nun hier der Link zu der Seite:
http://clients.hingucker.info/heinkel/

Der HTML - Code für den Header Bereich mit den Boxen:
HTML: 
<div id="header">
    	<div id="headerLeft">
        	<div id="logo">
            	<a href="#"><img src="images/logo.png" alt="" /></a>
            </div>
            <div id="leiste">
                <div id="leisteLeft">
                    <div id="leisteRight">
                    	<div id="shortMenu">
                        	<ul>
                            	<li><a href="#">Ihr Konto</a></li>
                                <li><a href="#">Warenkorb</a></li>
                                <li id="shortMenuLast"><a href="#">Kasse</a></li>
                            </ul>
                        </div>
                        <div id="login">
                        	<form action="" method="post">
                            	<a id="lostPassword" href="#">Password vergessen?</a>
                            	<input name="submit" type="submit" id="loginButton" value="Anmelden" />
							  <input name="" type="text" /> <input name="" type="password" />
                            </form>
                        </div>
                    </div>
                </div>
            </div>            
         </div>
        <div id="headerRight">
        	<div id="search">
            	<form action="" method="post">
                 <input type="text" id="searchInput" value="Ihre Suchanfrage ..." />
                 <input id="searchButton" name="submit" type="submit" value="Suchen" />
                </form>
                <p><a href="#">&raquo; Erweiterte Suche</a></p>
            </div>
        	<div id="bewertung"></div>        
        </div>
    </div>

Der CSS - Code für den Bereich:
Code: 
#header {
	clear:both;
	width:100%;
	height:234px;
	}

#header #headerLeft {
	float:left;
	width:653px;
	}
	
#logo {
	height:177px;
	}
	
#leiste {
	background:url(images/leisteBg.png) repeat-x;
	height:57px;
	}
	
#leisteLeft {
	background:url(images/leisteLeft.png) no-repeat left;
	height:57px;
	}
	
#leisteRight {
	background:url(images/leisteRight.png) no-repeat right;
	height:57px;
	}

#shortMenu {
	display:table-cell;
	padding:0 20px 0 0;
	}
	
#shortMenu ul {
	margin:0;
	padding:0;
	}

#shortMenu ul li {
	list-style:none;
	float:left;
	padding:0 10px 0 10px;
	margin:0;
	border-right:1px solid #fff;
	}	
	
#shortMenu ul li#shortMenuLast {
	border-right:none;
	}
	
#shortMenu ul li a {
	color:#fff;
	font-size:12px;
	}
	
#login {
	display:table-cell;
	}
	
#lostPassword {
	background:url(images/lostPassword.png) no-repeat;
	height:20px;
	width:137px;
	position:absolute;
	margin:-32px 0 0 10px;
	color:#fff;
	font-size:12px;
	text-align:center;
	padding:3px 0 0 0;
	}
	
#login form {
	margin:19px 0 0 0 !important;
	}
	
#loginButton {
	background:url(images/loginButton.png) no-repeat;
	height:23px;
	width:95px;
	color:#fff;
	font-size:12px;
	border:none;
	padding:0;
	position:absolute;
	margin:-32px 0 0 152px;
	}
		
#header #headerRight {
	float:right;
	width:354px;
	}
	
#search {
	background:url(images/sucheBg.png) no-repeat;
	height:117px;
	width:354px;
	}
	
#search p {
	padding:0 0 0 15px;
	margin:7px 0 0 0;
	}
		
#search p a {
	font-weight:bold;
	color:#dceab5;
	font-size:12px;
	}	

#search form {
	padding:16px 0 0 0;
	}
	

#searchInput {
	background:transparent !important;
	width:262px;
	border:none;
	font-weight:bold;
	color:#fff;
	padding:6px 0 0 18px;
	}

#searchButton {
	position:absolute;
	width:74px;
	}
	
#bewertung {
	background:url(images/bewertungBg.png) no-repeat;
	height:117px;
	width:354px;
	}

und zu guter letzt mein bisheriger Internet Explorer 6 Fix:
Code: 
/* IE 6 Fix */

#shortMenu {
	margin:17px 30px 0 0;
	}
	
#logo {
	overflow:hidden;
	}
	
#search {
	margin-top:-150px;
	overflow:hidden;
	}

#searchButton {
	margin:0 0 0 -5px;
	}
	
#search p {
	margin:-10px 0 0 0;
	}
	
#mainMenuRight ul li a {
	display:inline;
	}

Freu mich über Vorschläge, bzw. Lösungen.
Mit freundlichen Grüßen
Philipp
 
Hi,

wandel mal im Stylesheet style.css die fixe Breitenangabe für #search in eine relative um:

Code: 
#search {
        background:url(images/sucheBg.png) no-repeat;
        height:117px;
        width:100%;
        }
oder entferne sie gänzlich aus der Regel, da ein Blockelement diese Eigenschaft von Hause aus mitbringt, solange es nicht durch eine absolute Positionierung oder eine float-Deklaration aus dem normalen Textfluß genommem wird.

Somit ist dann auch die margin-top:-150px-Deklaration für #search im IE6-Stylesheet hinfällig.

mfg Maik
 
Danke hat funktioniert. Kannst du mir noch vielleicht sagen, warum im Internet Explorer 6 der Hover Effekt im Hauptmenü nicht funktioniert?

Schonmal danke.
Mit freundlichen Grüßen
Philipp
 
Die angewandte allg. li:hover-Pseudoklasse wird bekanntermaßen erst vom IE7 interpretiert, seine Vorgängerversionen unterstützen dagegen diese Pseudoklasse nur für Links, also a:hover - siehe die Hinweise zur Browserunterstützung der Pseudoklasse :hover.

Beim zweiten Hintergrundbildaufruf im a:hover-Selektor erwarten die älteren IEs eine Deklaration, die das Inline-Element mit "Block-Level-Charakteristika" ausstattet - also float:left wegen ihrer horizontalen Ausrichtung.

mfg Maik
 
PhilippBosshart hat gesagt.:
Dankeschön. Werd mal schauen wie ich das mache.
Zum Vergrößern anklicken....
Hi,

warum vereinst du nicht einfach die beiden Hover-Bilder (mainMenuHover.png & aHover.png) für das li- und a-Element in einem einzigen Hintergrundbild und rufst es entsprechend im Selektor #mainMenuRight ul li a:hover auf?

Selbstverständlich kannst du diese Technik auch parallel zur Bestehenden einsetzen, und sie über eine CSS-Browserweiche mit Hilfe eines entsprechenden "Conditional Comments" lediglich auf die älteren IEs anwenden.

mfg Maik
 
Weil ich nicht weiß, wie ich es machen muss, dass sich dann der Grüne Teil hinten trotzdem wiederholt, und dass der Schwarze "Pfeil" genau in der Mitte ist.
 
Ich hab da mal was vorbereitet :)

style.css:

Code: 
#mainMenuRight ul li a {
        font-size:12px;
        font-weight:bold;
        color:#fff;
        height:36px;
        float:left;
        padding:12px 10px 0 10px;

        }

#mainMenuRight ul li a:hover {
        background:url(images/aHover.png) no-repeat center top;
        float:left;
        }

ie6.css:

Code: 
#mainMenuRight ul li a:hover {
        background:url(images/Hover.png) no-repeat center top;
        }

Und die neue Grafik "Hover.png", die ich hier "großzügigerweise" mal mit der Dimension 150*48px erstellt habe:

Hover.png

Die "Überlänge" der Grafik, die bei den unterschiedlichen Breiten der Links entsteht, ist aber nicht zu sehen ;)

Da beim Upload die Grafikdatei vom Forensystem auf 140*40px runterskaliert wird :eek:, häng ich sie hier nochmal gesondert als ZIP-File an :-)

mfg Maik
 

Anhänge

Hey dankeschön.
Werde das mal ausprobieren und schauen ob das ganze klappt. Schonmal vielen vielen Danke.

Mit freundlichen Grüßen
Philipp
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück