unterschied bei FF und IE

Luziefer · 13.03.2010

hallo leute,

ich habe ein kleines Problem bei der Anzeige meiner menue leiste zwischen dem FF und dem IE. Beim FF wird es so angezeigt wie es eigendlich ausschaun sollte, aber beim IE passiert da nix weiter und weiß da einfach nicht weiter, Vieleicht kann mir ja jemand den Entscheidenen Hinweiß dazu geben warum das so ist.

body{
font: bold 11px Verdana,Arial;
}
/* Menue 1*/
#menue1{
display:block;
margin-bottom:6px;
text-align:center;
padding:2px;
text-decoration:none;
color: #000000;
width: 130px;
vertical-align: super;
font-family: "Courier New", Courier, monospace;
font-size: 16px;
font-style: italic;
font-weight: bolder;
}

.menu1item{
display:block;
margin-bottom:6px;
text-align:center;
border-style:double;
border-width:2px;
padding:2px;
text-decoration:none;
color: #000000;
width: 130px;
vertical-align: sub;
font-family: "Courier New", Courier, monospace;
font-size: 16px;
font-style: italic;
font-weight: bolder;
}

.menu1item a {
display:block;
text-decoration: none;
color: #000000;
padding: 4px;
font-family: "Courier New", Courier, monospace;
font-size: 16px;
width: 110px;
font-style: italic;
}

#menu2{
text-decoration:none;
color: #CC0000;
width: 110px;
font-family: "Courier New", Courier, monospace;
font-size: 16px;
font-style: italic;
font-weight: bolder;
display: none;
position: relative;
vertical-align: super;
z-index: auto;
}

div.menu1item a:hover{
color: #cc0000;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
font-weight: lighter;
}

div.menu1item:hover #menu2{
display: block;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: #CC0000;
}

so schaut es in der css aus und so in der html

<td width="130" class="td1">
<div id="menue1">
<div class="menu1item">
<a href="Index-Dateien/willkommen.htm" target="show">Home</a> </div>
<div class="menu1item">
<a href="kater.htm" target="show">Kater</a> </div>
<div class="menu1item">
<a href="Index-Dateien/willkommen.htm" target="show">Katzen</a>
<div id="menu2">
<div class="menu1item a">
<a href="Jamaica.htm" target="show">Jamaica</a> </div>
<div class="menu1item a">
<a href="Larentia.htm" target="show">Larentia</a> </div>
<div class="menu1item a">
<a href="angel.htm" target="show">Angel</a> </div>
</div>
</div>
<div class="menu1item">
<a href="trauer.htm" target="show">Nachruf</a> </div>
<div class="menu1item">
<a href="geschichte.htm" target="show">Geschichte</a> </div>
<div class="menu1item">
<a href="kontakt.htm" target="show">Kontakt</a> </div>
<div class="menu1item">
<a href="link.htm" target="show">Link</a> </div>
<div class="menu1item">
<a href="impressum.htm" target="show">Impressum</a> </div>
</div>
</td>

Ist nun vieeicht ein bischen viel txt aber ihr werdet mir nun nicht den kopf deswegen abreißen, oder doch?

danke für die hilfe schonmal

Gerdi_53 · 13.03.2010

AW: unterschied bei FF und IE

<a href="angel.htm" target="show">Angel</a> </div>

</div> dieses streichen

sokie · 13.03.2010

AW: unterschied bei FF und IE

Alle IEs nicht, oder nur bestimmte?
der IE6 kann zB :hover nur auf <a> Elementen. Da das :hover sich in deinem Code auf <li> Elemente bezieht, must du da für den IE6 eine andere Lösung schaffen.

Luziefer · 13.03.2010

AW: unterschied bei FF und IE

danke für die antworten.

das mit dem /div wegmachen zeigt mir aber dann immer die unterpunkte an, dies sollte aber nicht so sein. es sollte echt erst angezeigt werden wenn man mit der maus drauf geht.

2. Beim IE habe ich kein Plan. die aktuelle IE version ist die 8 die ich zur verfügung habe, daher kann ich nicht sagen ob es bei den anderen versionen auch so ist.

am besen ihr schut euch das selber an unter FF und dann unter dem IE
eine lösung habe ich eben nicht dafür da ich nicht so fit in diesen sachen bin und froh war das ich es überhaupt soweit geschafft habe.

Bin da echt auf hilfe angewiesen.

Ich hatte auch versucht es so zugestallten das das untermenue bei "katzen" daneben aufgeht, aber leider rutscht es immer runter oder hoch bei den unterschiedlichen auflösungen. Auch hatte ich es mit einer festen Pos. versucht aber da ist es dann schwer dieses untermenue zu öffnen.

vieleicht habt ihr ja eine bessere Variante dafür?

saila · 13.03.2010

AW: unterschied bei FF und IE

Was meinst du den nun genau?

Das gewippe des Menü bei Mouseover oder meinst du den IE6, welcher das Untermenü übehaupt nicht anzeigt bei Mouseover?

Das gewippe im IE ist von der Schriftgröße oder padding abhängig. Ist diese bei hover größer entsteht solch ein (offentliches gewippe). Ein height ohne padding dafür line-height wäre ebenfalls sinnvoller, da du kein zweizeiligen Menüpunkt hast.

Abgesehen davon hilft dir bei (CSS) menu2 position: relative der zugewiesene z-index nichts. Dieser ist nur dann relevant, wenn absolute positioniert wurde.

Darüber hinaus würde ich an deiner Stelle für Menüs grundsätzlich den listen-tag empfehlen.

Luziefer · 13.03.2010

AW: unterschied bei FF und IE

nein das gewippe ist ja ok.

mich stört das es im IE überhaupt nicht geht.
da kannst du mit der maus drauf gehn und nix passiert.

sorry aber ich bin bei machen sachen echt überfragt ich weiß nicht was du mir hiermit sagen willst?

"Darüber hinaus würde ich an deiner Stelle für Menüs grundsätzlich den listen-tag empfehlen."

saila · 13.03.2010

AW: unterschied bei FF und IE

Hi,

also da dein Menü nach meiner Meinung (ohne deine Arbeit schmälern zu wollen) einfach nichts ist, hier ein Vorschlag:

HTML:

Code:

<ul id="menu">
    <li><a href="Index-Dateien/willkommen.htm" target="show">Home</a></li>
    <li><a href="kater.htm" target="show">Kater</a>
        <ul class="subMenu">
            <li><a href="Jamaica.htm" target="show">Jamaica</a></li>
            <li><a href="Larentia.htm" target="show">Larentia</a></li>
            <li><a href="angel.htm" target="show">Angel</a></li>
        </ul>
    <li><a href="trauer.htm" target="show">Nachruf</a></li>
    <li><a href="geschichte.htm" target="show">Geschichte</a></li>
    <li><a href="kontakt.htm" target="show">Kontakt</a></li>
    <li><a href="link.htm" target="show">Link</a></li>
    <li><a href="impressum.htm" target="show">Impressum</a></li>
</ul>

CSS:

Code:

ul#menu {
    padding: 0;
    margin: 0;
    font-weight: bold;
    font-size: 14px;
}

#menu li {
    list-style: none;
    width: 110px;
    line-height: 33px;
    text-align: center;
    border: 2px solid #000000;
    margin-bottom: 2px;
    
}

#menu li a {
    text-decoration: none;
    color: #000000;
    
}

#menu li a:hover {
    font-style: italic;
    color: red;
}

#menu li:hover ul.subMenu {
    display: block;    
}

ul.subMenu {
    display: none;
    padding: 0;
    margin: 0 0 0 10px;
}

Hinweis: Für das subMenu werden die definitionen für li und a aus dem #menu übernommen. Somit muss das nicht neu definiert werden. Die Position des SubMenü steuerst du über das Attribut: margin innerhalb von ul.subMenu. margin mit vier Parametern ist recht leicht zu merken. Immer dem Uhrzeiger nach wobei der Start 12:00 Uhr entspricht, dann recht, unten und links.

FF, IE7, IE8 validiert