Ankündigung

Einklappen
Keine Ankündigung bisher.

Problem mit DBMenu im IE

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    Problem mit DBMenu im IE

    Hallo

    Ich habe mir bei http://www.boggusweb.com/web/javascript/dbMenu3/ das vertikale Menü runtergeladen und es in meine Seite zum Testen eingebaut. Fazit: Es funktioniert problemlos in Opera, Firefox und SeaMonkey, jedoch nicht im Internet Explorer (6/7). Im IE werden die Menüs der zweiten Ebene transparent dargestellt, und wenn man darüber fährt mit der Maus und an darunter liegenden Text (in der zweiten Spalte) gelangt, dann wird das Menü geschlossen.
    Zu finden ist die Beispielseite unter äts.ch/1/ (http://xn--ts-uia.ch/1/). Wäre schön, wenn mir jemand einen Tipp geben könnte. Ich weiss nicht einmal, ob das Problem bei CSS oder bei Javascript liegt.

    Danke im Voraus für eure Hilfe.
    RoDa
    Stichworte: -
  • #2
    Wow eine Umlautdomain! Ich mußte doch glatt den Text kopieren und Einfügen für den 6er IE

    Hallo Roda.
    Gegen die Transparenz hilft wohl nur per CSS eine Hintergrundfarbe zu setzen. Vielleicht löst das auch schon das andere Problem, was genau dann auftritt, wenn man die Maus über den unter dem Menü liegenden Textabsatz bewegt. Ansonsten kannst Du versuchen dem Menü einen höheren z-index zu verpassen. Möglicherweise mußt Du auch einfach nur Selektoren im Stylesheet anpassen, die die Sub-ul-Elemente nicht erfassen.
    [COLOR="#F5F5FF"]--[/COLOR]
    [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
    „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
    [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
    [COLOR="#F5F5FF"]
    --[/COLOR]

    Kommentar

    • #3
      Hallo nikosch77

      Danke für deine Antwort. Ich hab nun wieder stundenlang rumgeübt und gegooglet aber kriegs nicht hin:
      Der z-index des Inhalts ist 0. Drüber habe ich zum Üben zwei Boxen gelegt: Links eine gelbe mit z-index ebenfalls 0, so dass die Schriften sich überlappen. Rechts eine blaue mit höherem z-index, so dass die Hintergrundfarbe den Inhaltstext abdeckt.
      Das Menu hat z-index 2, also müsste es doch ebenfalls über den Inhalt?! Aber nun noch merkwürdiger: Beim Rausklappen verschwindet das Menu unter die linke Box, die einen kleineren z-index hat! Das Problem gibts nur im IE.

      Das Ganze hat wahrscheinlich irgendwie System, aber ich finde es nicht.
      Hier mal die beiden CSS (zwar etwas lang, aber dann ist wenigstens auch das Entscheidende da):
      Für die Seite allgemein:
      Code:
      * {
Margin: 0px;
padding: 0px;
}

body {
font-family: "Gill Sans MT", Helv, Arial;
font-size: 100.01%;
background-image:url(img/hg1.gif);
}

#container1{
width:760px;
margin-left: auto;
margin-right: auto;
border: 1px solid #666666;
background-color: #eeeeee;

}
#test_box1 {
background-color: #ffff00;
color:000000;
position: absolute;
left: 250px;
top: 0;
width: 150px;
z-index:0;
}
#test_box2 {
background-color: #0000ff;
color:000000;
position: absolute;
left: 600px;
top: 0;
width: 150px;
z-index:2;
} 


#kopf {
height: 135px;
}

#nav_oben {
position: relative;
top: 0;
padding-top: 6px;
padding-left: 210px;
padding-bottom: 6px;
height: 30px;
background-color: #dddddd;
}
ul#links li {
font-size: 80%;
text-decoration: none;
display: inline;
}
ul#links a:link {
text-decoration: none;
}
ul#links a:visited {
text-decoration: none;
}
ul#links a:hover {
background: #fff;
text-decoration: none;
color: #333333;
border:1px;
}


#logo {
position: absolute;
top: 0;
left: 250px;
}

#container2 { /*menu und inhalt*/
position: relative;
background-color: #eeeeee;
}
#nav_links { /*erste spalte*/
position: relative;
left: 5px;
width: 210px;
float:left;
}

#inhalt { /*zweite spalte*/
position: relative;
top:0;
font-size: 90%;
z-index: 0;
margin-left: 210px;
width: 530px;
}

h1 {
/*margin-top:-0.1em;*/
margin-bottom: 0.5em;
font-size: 1.6em;
}
h2 {
margin-top: 1em;
margin-bottom: 0.3em;
font-size: 1.3em;
}
.lead {
font-weight: bold;
line-height:2em;
margin-bottom: 1em;
}

.titel2 {
margin-top: 1em;
margin-bottom:10px;
font-weight: bold;
font-size: 1.2em;
}
.mailsearch {
font-size: 0.7em;
}
.select {
font-size: 0.7em;
}
#fuss {
font-size: 80%;
clear : both;
display: right;
background-color: #cccccc;
padding-left: 210px;
padding-top: 10px;
padding-bottom: 10px;
}

#edit {
text-align: right;
margin-top: -11px;
}
.bild-links {
float : left;
padding-right: 1.5em;
}

      Und für das Menü:
      Code:
      #side {
    width: 10em;
    z-index: 2;
}

#side li ul {
	position: absolute;
	left: 10em;
	top: 0;
	width: 10em;
}

#side li a.subMenu, #side ul li a.subMenu {
	background-repeat: no-repeat;
	background-image: url('right.gif');
	background-position: center right;
}
#side {
	position: absolute;
	z-index: 2;
	padding: 0;
	margin: 0;
	list-style: none;
	white-space: nowrap;
}

body>#side {
	position: fixed;
}

#side ul {
	position: relative;
	z-index: 2;
	display: none;
	padding: 0;
	margin: 0;
	list-style: none;
}

#side ul.click {
    display: block;
    background-color: #fa551a;
}
#side ul.click li {
    background-color: #fa551a;
}
#side li a.click {
    background-color: #fa551a;
	color: #FFFAB5;
}

#side ul li a.click {
    background-color: #fa7d50;
	color: #FFFAB5;
}

#side li {
	position: relative;
	background-color: #ffffff;
    z-index:2;
	border: 1px solid black;
	padding: 0;
	margin: 0;
	color: #000000;
	float: left;
	width: 10em;
	display: block;
}

#side ul li a:hover {
	background-color: #fa7d50;
	color: #FFFAB5;
}

#side li a:hover {
	background-color: #fa551a;
	color: #FFFAB5;
}

#side li a {
    position: relative;
    z-index: 2;
    display: block;
	background-color: #ffffff;
	padding: 2px;
	margin: 0;
	text-decoration: none;
	color: #000000;
}
      Ich bin für jeden Tipp dankbar.
      RoDa

      Kommentar

      • #4
        Oha, im 6er IE ist das Menü jetzt gar nicht mehr zu sehen. Mein Tipp: Fang nochmal ganz von vorn an und füg ein Element nach dem anderen hinzu. So sucht man sich ja tot.
        [COLOR="#F5F5FF"]--[/COLOR]
        [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
        [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
        [COLOR="#F5F5FF"]
        --[/COLOR]

        Kommentar

        • #5
          Uupps...
          Ich habe den IE7, und da wirds angezeigt. Deinen Rat habe ich schon befolgt, ich bin bereits die CSS-Datei Schritt für Schritt durchgegangen und habe alles parallel im IE7, Firefox und Opera geprüft.
          Dabei bin ich auf etwas gestossen, wozu ich nirgendwo Infos finde: Wenn ich für den Inhalt den z-index auf -1 setze, dann funktioniert das Menü im IE7! Und das, obschon ein negativer Wert dort offenbar nicht vorgesehen ist. Opera und Firefox zeigen dann zwar den Text gar nicht mehr an, aber das liesse sich mit einer Browser-Weiche lösen.
          Jetzt muss ich bloss noch eine Lösung für den IE6 finden.

          Danke jedenfalls fürs Anschauen. Und warum das mit einem negativen z-index im IE7 geht, würde mich schon mal interessieren. Vielleicht hat jemand Erfahrung damit?

          Kommentar

          Vorherige Weiter
          Lädt...
          X