Hilfe - Suche - Mitglieder - Kalender
Vollansicht: CSS-Navigation (vertikal) springt bei IE6
Forum Sefrengo.org > Allgemeine Foren > Offtopic
tsunami
Hallo zusammen !

Bin seit langem auf der Suche nach einer Lösung betreffend meiner Navigation welche ich gerne umsetzen möchte.
Im Firefox und IE7 funktioniert es wie gewünscht. Im IE6 jedoch springt die Navigation wenn ich mit der Maus
über die Link's gehe. Ebenso entsteht ein grösserer Abstand zwischen z.b. Rubrik3.1 und Rubrik3.2.
Habe mal zwei Screenshots erstellt.

Klicken um den Anhang anzusehen
Klicken um den Anhang anzusehen

QUELLTEXT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
/*SUBNAVIGATION*/
* {
    margin:0;
    padding:0;
}

#subnavibereich {
    float: left;
    width:300px;
        }
#subnavibereich ul{    
    margin:0;
}
#subnavibereich li {
    list-style-type: none; /*ohne Aufzählungspunkte*/
    margin:0;

}
#subnavibereich a {
    display:block;
    padding:2px;
    background-color:#99FF33;
    padding-left:10px;

}
#subnavibereich a:hover, #subnavibereich a:focus {
    background-color:#FF6600;
    
}
/*IE 5.x und 6: hasLayout für Hyperlinks*/
* html #subnavibereich ul,
* html #subnavibereich a{
    height:1%;
}

/*SUBNAVIGATION (EBENE 2)*/
    #subnavibereich ul li ul li {
    font-size:0.95em;
    /*margin-left:9px;*/
    }
    #subnavibereich ul li ul li a {
    background-color:#FFFF66;
    display:block;
    padding:2px;
    padding-left:10px;
    margin-bottom:2px;
    }
/*SUBNAVIGATION (EBENE 3)*/
#subnavibereich ul li ul li ul li{
    font-size:90%;
    margin-left:9px;

    
    }
#subnavibereich ul li ul li ul li a {
background-color:#99FF99;
display:block;
padding:2px;
padding-left:10px;
    }
-->
</style>
</head>

<body>
<div id="subnavibereich">

<ul>
<li><a href="#">Hauptrubrik</a>
    <ul>
    <li><a href="#">Rubrik1</a></li>
    <li><a href="#">Rubrik2</a></li>
    <li><a href="#">Rubrik3</a>
        <ul>
        <li><a href="#">Rubrik3.1</a></li>
        <li><a href="#">Rubrik3.2</a></li>
        <li><a href="#">Rubrik3.3</a></li>
        <li><a href="#">Rubrik3.4</a></li>
        </ul>
    </li>
    <li><a href="#">Rubrik4</a></li>
    <li><a href="#">Rubrik5</a></li>
    <li><a href="#">Rubrik6</a></li>
    <li><a href="#">Rubrik7</a></li>
    </ul>
</li>
</ul>
</div> <!-- subnavibereich -->
</body>
</html>


Kann mir vielleicht jemand weiterhelfen ? Habe nun schon diverses versucht - leider ohne Erfolg !

Gruss Tsunami
andi
hallo tsunami

das ist der whitespace-bug. dazu gibt es unzählige möglichkeiten, diese zu beheben (google hilft).

z.b. könntest du vor jedem </a> ein leerzeichen einfügen, oder du könntest alle <li>-elemente nacheinander notieren usw.


gruss andi
saschapi
Alternativ kannst du auch das margin-bottom dem li und nicht dem a geben. Ich habe mal die CSS Anweisungen etwas verändert. Wenn du übrigens dem a nicht nur display: block gibst sondern auch width: 100% kannst du dir das ganze layout Gewurste für den IE 5.X und 6 sparen.

Schau mal ob dir das so reicht. smile.gif


CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
/*SUBNAVIGATION*/
* {
margin:0;
padding:0;
}

#subnavibereich {

width:300px;
}
#subnavibereich ul{
margin:0;
padding:0;
list-style-type: none; /*ohne Aufzählungspunkte*/
}
#subnavibereich li {
margin:0;
padding:0;

}

#subnavibereich li li {
margin-top: 2px;
}


#subnavibereich li a {
display:block;
padding:2px;
background-color:#99FF33;
padding-left:10px;
margin:0;
width: 100%;

}
#subnavibereich li a:hover{
background-color:#FF6600;
}


/*SUBNAVIGATION (EBENE 2)*/
#subnavibereich ul li ul li {
font-size:0.95em;
}

#subnavibereich ul li ul li a {
background-color:#FFFF66;

}
/*SUBNAVIGATION (EBENE 3)*/
#subnavibereich ul li ul li ul li{
font-size:90%;
margin-left:9px;


}
#subnavibereich ul li ul li ul li a {
background-color:#99FF99;
}
-->
</style>
</head>

<body>
<div id="subnavibereich">

<ul>
<li><a href="#">Hauptrubrik</a>
<ul>
<li><a href="#">Rubrik1</a></li>
<li><a href="#">Rubrik2</a></li>
<li><a href="#">Rubrik3</a>
<ul>
<li><a href="#">Rubrik3.1</a></li>
<li><a href="#">Rubrik3.2</a></li>
<li><a href="#">Rubrik3.3</a></li>
<li><a href="#">Rubrik3.4</a></li>
</ul>
</li>
<li><a href="#">Rubrik4</a></li>
<li><a href="#">Rubrik5</a></li>
<li><a href="#">Rubrik6</a></li>
<li><a href="#">Rubrik7</a></li>
</ul>
</li>
</ul>
</div> <!-- subnavibereich -->
</body>
</html>
tsunami
Hallo saschapi, Hallo andi !

Vielen Dank für eure Mithilfe ! Ich habe nun mal deine Version (Saschapi) ausprobiert. Gefällt mir eigentlich sehr gut ! Vorallem wenn man unnötigen Code sparen kann.
Wenn ich mir das ganze im IE 6 anschaue, fallen mir zwei Dinge auf. Zwischen der "Hauptrubrik" und "Rubrik1" hat es keinen Abstand. Ebenso zwischen "Rubrik3" und "Rubrik3.1" , dort stossen die Boxen direkt aneinander.
Ansonsten wäre es Perfekt...Kann man dies noch steuern ?

Gruss Tsunami
saschapi
sollte jetzt behoben sein. Schau dir den Cod nochmal an. Habs jetzt allerdings nicht in getestet.
tsunami
Hmm...hätte ich eigentlich auch draufkommen sollen. Nun funktioniert es wink.gif Echt Hilfbereit ! Habe vor lauter durcheinander völlig den Überblick verloren. Schönen Abend ! Danke !
saschapi
Gern geschehen! wink.gif
tsunami
Hallo saschapi !

Bräuchte nochmals deine Hilfe...Habe den obigen Quellcode durch folgendes ergänzt:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
/*SUBNAVIGATION*/
* {
margin:0;
padding:0;
}

#subnavibereich {

width:200px;
background-color:#FF9900;
}
#subnavibereich ul{
margin:0;
padding:0;
list-style-type: none; /*ohne Aufzählungspunkte*/
}
#subnavibereich li {
margin:0;
padding:0;
}

#subnavibereich li li {
margin-top: 2px;
}


#subnavibereich li a {
display:block;
padding:2px;
padding-left:10px;
margin:0;
width: 100%;

}
#subnavibereich li a.aktiv {
border-bottom:2px solid #000;
}
#subnavibereich li a:hover{
background-color:#FF6600;
}


/*SUBNAVIGATION (EBENE 2)*/
#subnavibereich ul li ul li {
font-size:0.95em;
}

#subnavibereich ul li ul li a {
background-color:#FFFF66;

}
/*SUBNAVIGATION (EBENE 3)*/
#subnavibereich ul li ul li ul li{
font-size:90%;
margin-left:9px;


}
#subnavibereich ul li ul li ul li a {
background-color:#99FF99;
}
-->
</style>
</head>

<body>
<div id="subnavibereich">

<ul>
<li><a class="aktiv" href="#">Hauptrubrik</a>
<ul>
<li><a href="#">Rubrik1</a></li>
<li><a href="#">Rubrik2</a></li>
<li><a href="#">Rubrik3</a>
<ul>
<li><a href="#">Rubrik3.1</a></li>
<li><a href="#">Rubrik3.2</a></li>
<li><a href="#">Rubrik3.3</a></li>
<li><a href="#">Rubrik3.4</a></li>
</ul>
</li>
<li><a href="#">Rubrik4</a></li>
<li><a href="#">Rubrik5</a></li>
<li><a href="#">Rubrik6</a></li>
<li><a href="#">Rubrik7</a></li>
</ul>
</li>
</ul>
</div> <!-- subnavibereich -->
</body>
</html>


Habe dem #subnavibereich noch eine Hintergrundfarbe (#FF9900) mitgegeben. Die Breite auf 200px eingestellt.
Leider schiessen mir die unteren Ebenen (BG=Gelb/Grün) über die Kante der Hintergrundfarbe des #subnavibereich. Siehe ScreenshotKlicken um den Anhang anzusehen
Möchte schlussendlich der ersten Ebene (Hauptrubrik) noch ein "border-bottom:2px solid #000;" mitgeben und alles rechts bündig haben. Also ein Unterstrich welcher bis zur Kante der Hintergrundfarbe vom #subnavibereich läuft.
Gibt es da eine Lösung ? Komme leider nicht weiter...

Gruss Tsunami
andi
hallo tsunami

width: 100% + padding und margin kann nicht funktionieren. generell kannst du dir das width 100% sparen. damit die flächen in ie 5.5 + korrekt dargestellt werden, muss der link has-layout haben. das erreichst du z.b. mit height 1%. dieses height sollte allerdings nur der ie zu gesicht bekommen. also entweder per cc oder star-hack.

hier das beispiel:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
/*SUBNAVIGATION*/
* {
margin:0;
padding:0;
}

#subnavibereich {

width:200px;
background-color:#FF9900;
}
#subnavibereich ul{
margin:0;
padding:0;
list-style-type: none; /*ohne Aufzählungspunkte*/
}
#subnavibereich li {
margin:0;
padding:0;
}

#subnavibereich li li {
margin-top: 2px;
}

#subnavibereich li a {
display:block;
padding:2px;
padding-left:10px;
margin:0;
}

* html #subnavibereich li a {
height: 1%;
}

#subnavibereich li a.aktiv {
border-bottom:2px solid #000;
}

#subnavibereich li a:hover{
background-color:#FF6600;
}


/*SUBNAVIGATION (EBENE 2)*/
#subnavibereich ul li ul li {
font-size:0.95em;
}

#subnavibereich ul li ul li a {
background-color:#FFFF66;

}
/*SUBNAVIGATION (EBENE 3)*/
#subnavibereich ul li ul li ul li{
font-size:100%;
margin-left:9px;


}
#subnavibereich ul li ul li ul li a {
background-color:#99FF99;
}
-->
</style>
</head>

<body>
<div id="subnavibereich">

<ul>
<li><a class="aktiv" href="#">Hauptrubrik</a>
<ul>
<li><a href="#">Rubrik1</a></li>
<li><a href="#">Rubrik2</a></li>
<li><a href="#">Rubrik3</a>
<ul>
<li><a href="#">Rubrik3.1</a></li>
<li><a href="#">Rubrik3.2</a></li>
<li><a href="#">Rubrik3.3</a></li>
<li><a href="#">Rubrik3.4</a></li>
</ul>
</li>
<li><a href="#">Rubrik4</a></li>
<li><a href="#">Rubrik5</a></li>
<li><a href="#">Rubrik6</a></li>
<li><a href="#">Rubrik7</a></li>
</ul>
</li>
</ul>
</div> <!-- subnavibereich -->
</body>
</html>


hilft dir das weiter?


gruss andi
tsunami
hallo andi

Dies Hilft mir weiter...Herzlichen Dank !
Ich habe noch folgendes herausgefunden:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
/*SUBNAVIGATION*/
* {
margin:0;
padding:0;
}

#subnavibereich {

width:188px;
padding-right:12px;
background-color:#FF9900;
}
#subnavibereich ul{
margin:0;
padding:0;
list-style-type: none; /*ohne Aufzählungspunkte*/
}
#subnavibereich li {
margin:0;
padding:0;
}

#subnavibereich li li {
margin-top: 2px;
}


#subnavibereich li a {
display:block;
padding:2px;
padding-left:10px;
margin:0;
width: 100%;

}
#subnavibereich li a.aktiv {
border-bottom:2px solid #000;
}
#subnavibereich li a:hover{
background-color:#FF6600;
}


/*SUBNAVIGATION (EBENE 2)*/
#subnavibereich ul li ul li {
font-size:0.95em;
}

#subnavibereich ul li ul li a {
background-color:#FFFF66;

}
/*SUBNAVIGATION (EBENE 3)*/
#subnavibereich ul li ul li ul li{
font-size:90%;
margin-left:9px;


}
#subnavibereich ul li ul li ul li a {
background-color:#99FF99;
}
-->
</style>
</head>

<body>
<div id="subnavibereich">

<ul>
<li><a class="aktiv" href="#">Hauptrubrik</a>
<ul>
<li><a href="#">Rubrik1</a></li>
<li><a href="#">Rubrik2</a></li>
<li><a href="#">Rubrik3</a>
<ul>
<li><a href="#">Rubrik3.1</a></li>
<li><a href="#">Rubrik3.2</a></li>
<li><a href="#">Rubrik3.3</a></li>
<li><a href="#">Rubrik3.4</a></li>
</ul>
</li>
<li><a href="#">Rubrik4</a></li>
<li><a href="#">Rubrik5</a></li>
<li><a href="#">Rubrik6</a></li>
<li><a href="#">Rubrik7</a></li>
</ul>
</li>
</ul>
</div> <!-- subnavibereich -->
</body>
</html>

Dies funktioniert soviel ich glaube auch. Ohne Hack usw. - ist aber wohl mehr ein Gebastel.Oder was meinst du?
Habe dem #subnavibereich eine Breite von 188px und ein padding-right von 12px gegeben...

Gruss Tsuami
andi
nö, dein aktueller code funktioniert nicht mehr. durch die 90% schriftgrösse in der dritten ebene sind dessen abstände nicht mehr korrekt. die ul wird mit 100% width und einem zusätzlichen padding zu breit.

edit: öhm, ist das nicht der selbe code wie oben?
tsunami
Hallo andi
Ist der letzte Code von saschapi. Von mir leicht noch ergänzt. Wenn ich auf jeden Fall meine letzte angehänget Version nehme, wird alles korrekt dargestellt. Ich habe ja nur dem äussersten Container ein:
QUELLTEXT
#subnavibereich {
width:188px;
padding-right:12px;
background-color:#FF9900;
}

mitgegeben.

Gruss Tsunami
andi
wie du meinst :-)

Klicken um den Anhang anzusehen
tsunami
Hmm...schon eigenartig. Wenn ich den Quellcode im bei mir lokal mit diversen Browsern teste ist alles I.O.
Wenn ich aber mal folgendes Tool zur Hilfe nehme IE NetRenderer.
Sieht die Navigation wie auf deinen Screenshots aus ;-)

Gruass Tsunami
Dieses ist eine vereinfachte Darstellung unseres Foreninhaltes. Um die detaillierte Vollansicht mit Formatierung und Bildern zu betrachten, bitte hier klicken.
Invision Power Board © 2001-2024 Invision Power Services, Inc.