✔ Darstellungsproblem der Navigation: IE7

Status
Nicht offen für weitere Antworten.
Rexo

Rexo

Mitglied
Guten Tag zusammen,

ich hab ein Darstellungsproblem im IE7.

Hier:
http://browsershots.org/website/http://shop.terrarienwelt.com/

kann man sehen, dass dieser Fehler nur beim IE7 auftritt. Ich bin eher zufällig darauf gestoßen :suspekt:
Webseite:
http://shop.terrarienwelt.com

Ich hab mal den CSS-Code aus der Navigationsleiste rauskopiert.

Kennt jemand das Problem - es ist hoffentlich bereits häufiger aufgetreten, so dass eine Lösung schnell und unkompliziert ist, oder? :rolleyes:

Code: 
		/* =navigation
			=========================================== */
		.navigation {
			position: absolute;
			top: 141px;
			left: 0;
			width: 201px;
			padding-top: 30px; /* EDIT */
			background: url(../bilder/aufbau/schatten_navigation.gif) 0 0 no-repeat;
			font-size: 12px;

		}
				.navmainLI {
				height: 25px;
				line-height: 25px;
				background: url(../bilder/navigation/main_bg.gif) 0 0 repeat-x;
				list-style: none;				
				text-align: center;
				margin-right: 1px; /* Rand */

				}
				.navmainLI label {
					font-weight: bold;
					font-size: 13px;
					}
					
				/* 1 Ebene */				
				.navsub1LI a, .navsub1LIactive a  {
					font-weight: normal;
					height: 21px;
					line-height: 21px;
					background-image: url(../bilder/navigation/sub1_bg.gif);
					text-align: left;
					color: black;
					text-decoration: none;
					margin-right: 1px; /* Rand */
					display: block; /* um hover-Effekt ?ber gesamte Breite gehen zu lassen */
				}
				.navsub1LIactive a { /* Um das gew?hlte Produkt hervorzuheben */
					background-position: -200px 0;
					font-weight: bold;
				}
				.navsub1LI  a:hover {
					background-position: -200px 0;
					text-decoration: none;
					color: black;
					}
					
			.navsub1LI  a:focus, .navsub1LI  a:visited {
					color: black;
				}
					.navsub1LI em, .navsub1LIactive em {
							position: relative;
							left: 40px;	/* EDIT */
							top:0;
							font-style: normal;
							margin-right: 1px; /* Rand */
					}
					

				
				/* 2 Ebene */
				.navsub2LI a, .navsub2LIactive a {
					font-weight: normal;
					height: 21px;
					line-height: 21px;
					background: transparent url(../bilder/navigation/sub2_bg.gif) 0 0 repeat-x;
					text-align: left;
					color: black;
					text-decoration: none;
					display: block;
				}
				.navsub2LIactive a {
					background-position: -200px;
				}
				.navsub2LI  a:hover {
					background-position: -200px 0;
					text-decoration: none;
					color: black;
					}
				.navsub1LI  a:focus, .navsub1LI  a:visited {
					color: black;
				}
				.navsub2LI em, .navsub2LIactive em {
							position: relative;
							left: 53px;
							top:0;
							font-style: normal;
					}
					
			/* Informationen */
				.navinfoLI {
						margin-top: 30px;
						height: 25px;
						line-height: 25px;
						background: url(../bilder/navigation/main_bg.gif) 0 0 repeat-x;
						list-style: none;				
						text-align: center;
						margin-right: 1px; /* Rand */
				}
				.navinfoLI label {
					font-weight: bold;
					font-size: 13px;
					}
					
.ul_terrarien, .ul_futter, .ul_beleuchtung, .ul_rueckwand, .ul_heizung, .ul_messen, .ul_pflanzen, .ul_bodengrund, .ul_brutkasten, .ul_deko {
	 display: none; 
}

/* Warenkorb -> Navigation */

.cart_nav {
list-style-type: none;
margin: 7px 0 2px 20px;
text-align: left;
}
.cart_nav li {
margin-bottom: 4px;
}
.dick {
	font-weight: bold;
}
 
Hi,

ich habe auf meinem System den IE7 nicht zur Verfügung, um das Markup und Stylesheet darin direkt überprüfen zu können, aber mir ist aufgefallen, dass du die verschachtelte Listennavigation grundsätzlich falsch strukturiert hast.

Vom Grundprinzip her wird diese nämlich folgendermaßen "aufgebaut":

Code: 
<ul>
    <li>Listenpunkt
        <ul>
            <li>Unterpunkt</li>
        </ul>
    </li>
</ul>
Vielleicht hilft es auch weiter, wenn du für die Klasse .navinfoLI zusätzlich eine relative Positionierung bestimmst?
 
... aber mir ist aufgefallen, dass du die verschachtelte Listennavigation grundsätzlich falsch strukturiert hast.
Zum Vergrößern anklicken....

So wie du es beschrieben hast, ist die Navigation aufgebaut, nur dass ich noch eine weitere Ebene habe (Quelltext gekürzt - leider verschiebt sich hier die Einrückung)

Code: 
		<ul>
		
			<li class="navmainLI"><label>Produkte</label></li>
					<ul>
					  <li class="navsub1LI"><a href="terrarien.php"><em>Terrarien</em></a></li>
								<ul class="ul_terrarien">
									<li class="navsub2LI"><a href="terrarien/vollglas.php"><em>Vollglas</em></a></li>
									<li class="navsub2LI"><a href="terrarien/terrarienbau.php"><em>Terrarienbau</em></a></li>
									<li class="navsub2LI"><a href="terrarien/sonder.php"><em>Sonderma&szlig;e</em></a></li>
								</ul>
						<li> HIER EBEN NOCH DIE ANDEREN PRODUKTGRUPPEN MIT EVTL. UNTERPUNKTEN</li>		
						.
						.
						.
						
						
			<li class="navmainLI"><label>Informationen</label></li>
					<ul>
						<li class="navsub1LI"><a href="impressum.php"><em>Impressum</em></a></li>
						<li class="navsub1LI"><a href=kundeninformation.php><em>Kundeninformation</em></a></li>
						<li class="navsub1LI"><a href=versandkosten.php><em>Versandkosten</em></a></li>
						<li class="navsub1LI"><a href=oeffnungszeiten.php><em>Öffnungszeiten</em></a></li>
   					<li class="navsub1LI"><a href="agb.php"><em>Unsere AGB</em></a></li>
						<li class="navsub1LI"><a href="kontakt.php"><em>Kontakt</em></a></li>
						<li class="navsub1LI"><a href=datenschutz.php><em>Datenschutz</em></a></li>
						<li class="navsub1LI"><a href=widerrufserklaerung.php><em>Widerrufsbelehrung</em></a></li>								
				</ul>
				
			<li class="navinfoLI"><label>Warenkorb</label></li>
					<ul class="cart_nav">
						<li>Produkte: <span class="dick">0</span></li>
						<li>Artikelanzahl: <span class="dick">0</span></li>
						<li>Warenwert: <span class="dick">0 &euro;</span></li>
					</ul>
    		<span class="warenkorb_link"><a href="warenkorb.php" target="_parent">Warenkorb ansehen<img src="bilder/shop/cart.gif" height="15" width="22" /></a></span>
		
		
		</ul>

Vielleicht hilft es auch weiter, wenn du für die Klasse .navinfoLI zusätzlich eine relative Positionierung bestimmst?
Zum Vergrößern anklicken....
.navinfoLI ist die Klasse des Warenkorbs, aber eine relative Positionierung macht keinen Sinn, da es in jedem Browser richtig dargestellt nur nicht im IE7, damit verschiebt es sich in allen Browsern.. das sieht entsprechend aus :rolleyes:

Könnte höchstens ne IF-SCHLEIFE [ code=css ] für den IE7 machen und dann halt ne absoluten Positionierung vergeben.. aber das ist doch Pfusch... bin eher für ne "saubere" Lösung.

Hat jemand nen Lösungsansatz?
 
Rexo hat gesagt.:
So wie du es beschrieben hast, ist die Navigation aufgebaut
Zum Vergrößern anklicken....

Dann vergleiche einfach nochmal mein gezeigtes Beispiel mit deinem Markup:

Code: 
<ul>
  <li class="navmainLI"><label>Produkte</label></li>
    <ul>
      <li class="navsub1LI"><a href="terrarien.php"><em>Terrarien</em></a></li>
        <ul class="ul_terrarien">
	   <li class="navsub2LI"><a href="terrarien/vollglas.php"><em>Vollglas</em></a></li>
	   <li class="navsub2LI"><a href="terrarien/terrarienbau.php"><em>Terrarienbau</em></a></li>
	   <li class="navsub2LI"><a href="terrarien/sonder.php"><em>Sonderma&szlig;e</em></a></li>
        </ul>
...

Mit einer weiteren Ebene würde es dann so lauten:

Code: 
<ul>
    <li>Listenpunkt
        <ul>
            <li>Unterpunkt 1.Ebene
               <ul>
                   <li>Unterpunkt 2.Ebene</li>
               </ul>
            </li>
        </ul>
    </li>
</ul>

Rexo hat gesagt.:
.navinfoLI ist die Klasse des Warenkorbs
Zum Vergrößern anklicken....
So? Im HTML-Code des Online-Dokuments steht da aber entgegen deines gezeigten Code-Schnippsels was ganz anderes:

Code: 
<li class="navinfoLI"><label>Informationen</label></li>
 
Dann vergleiche einfach nochmal mein gezeigtes Beispiel mit deinem Markup:
Zum Vergrößern anklicken....

:rolleyes: Vollkommen richtig.. hab das völlig übersehen, da man doch davon ausgeht, dass das Markup stimmt. <--- "Betriebs-Blind"

Nach der Korrektur der Listen-Navigation trat das Problem weiterhin auf.

Ich hab es aber nun über relative Angaben in % gelöst.
 
Hi,

bei mir gibt es im IE7 noch immer Darstellungsprobleme. Es werden Lücken zwischen den einzelnen Navigations-
punkten angezeigt. Diese sind offensichtlich Folge der unterschiedlichen line-height-Werte (25px und 21px).

Versuch mal folgendes:
Code: 
.navmainLI {
  height: 100%;
  line-height: 25px;
  background: url(http://shop.terrarienwelt.com/bilder/navigation/main_bg.gif) 0 0 repeat-x;
  list-style: none;
  text-align: center;
  margin-right: 1px; /* Rand */
}
.navmainLI *{ line-height: 21px;}

/* Bisherige Definitionen */

/* Informationen */
.navinfoLI {
    margin-top: 15px;
    height: 100%;  /* EDIT: IE7-BUG */
    line-height: 25px;
    background: url(http://shop.terrarienwelt.com/bilder/navigation/main_bg.gif) 0 0 repeat-x;
    list-style: none;
    text-align: center;
    margin-right: 1px; /* Rand */
}
.navinfoLI *{ line-height: 21px;}
Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück