Problem1: Infobox funktioniert nur zur hälfte

[Engin]

Hi,

ich hoffe ich nerv nicht, aber ich hab da wieder ein paar Probleme, die mir irgendwie schleierhaft sind.
Problem 1: Infobox,
die funktioniert irgendwie nur halb, die funktionierende hälfte sieht wie folgt aus:

<div id="Navigation"><ul id="box">  
<li><a href="#">Suche<span><img src="/bild/lupe.gif" alt=""></span></a></li>  
<li><a href="#">Auktion<span><img src="/bild/hammer.gif" alt=""></span></a></li>  
</ul></div>

der CSS Code

#box a span {  
display:none;}  
#box a:hover span {  
position:absolute; top:388px; left:62px; z-index:3;  
display:block;  
text-align: center;  
padding:2px;  
border: 1px solid black;}

Das obige ist für die Vertikale Navigation links und funktioniert einwandfrei im IE 6, FF 2 und Opera 9.10 .

Das gleiche konstrukt habe ich für die Horizontale Navigation in der Kopfzeile gemacht.

<div id="kopfzeile"><ul id="infobox">  
<li><a href="#">HOME<span><img src="/bild/lupe.gif" alt=""></span></a></li>  
<li><a href="#">LIVE TV<span><img src="/bild/lupe.gif" alt=""></span></a></li>  
</ul></div>

der CSS Code

#infobox a span {display:none;}  
  
#infobox a:hover span {  
position:absolute; top:388px; left:57px; z-index:3;  
display:block;  
text-align: center;  
padding:2px;  
border: 1px solid black;}

Dieses bsp. jedoch funktioniert nur im FF und Opera aber nicht im IE, obwohl es eins zu eins aus dem oberen bsp. abgeklatscht ist.
Der einzige unterschied ist die darstellung der Listen form die ja aber an sich keine Rolle spielen dürfte:

#kopfzeile { margin: 0 0 0em; padding: 0.1em; text-align: center;}  
#kopfzeile li { display: inline; }

Auch im Content bereich, der bei mir "inhalt" heisst, krieg ich die Box nur im FF aufgerufen.
Würde die Infobox überhaupt nicht funktionieren, wäre es sicherlich leicht den fehler zu finden,
aber in 2 Navigationsflächen, Rechts und Links funktioniert es im IE und auch im FF.
Alle anderen versuche im Kopf und Content bereich, die Box aufzurufen gehen nur im FF, woran kann das liegen?

Hoffe ihr könnt mir helfen.

Grüße,
Engin
 GYRO

[wahsaga]

hi,

Das obige ist für die Vertikale Navigation links und funktioniert einwandfrei im IE 6, FF 2 und Opera 9.10 .

Das gleiche konstrukt habe ich für die Horizontale Navigation in der Kopfzeile gemacht.
[...]
Dieses bsp. jedoch funktioniert nur im FF und Opera aber nicht im IE, obwohl es eins zu eins aus dem oberen bsp. abgeklatscht ist.
Der einzige unterschied ist die darstellung der Listen form

Vermutlich hast du beim funktionierenden Teil auch noch eine (explizite oder implizite) Veränderung der Darstellung von a:hover, die beim zweiten nicht gegeben ist - der IE <= 6 rendert Veränderung an Kindelementen eines gehoverten Links nämlich nur, wenn sich an der Formatierung des Links selber auch irgendetwas ändert.

Probiere also man, noch ein
#infobox a:hover { background-color:#fff; }
o.ä. einzusetzen - und schau, ob es dann funktioniert.
(Also Wert irgendetwas von der derzeitigen Formatierung abweichendes - selbst eine Änderung der Hintergrundfarbe von der Notation #ffffff auf die Kurzschreibweise #fff hilft idR. schon.)

gruß,
wahsaga

[Engin]

Hi,

Probiere also man, noch ein
#infobox a:hover { background-color:#fff; }
o.ä. einzusetzen - und schau, ob es dann funktioniert.
(Also Wert irgendetwas von der derzeitigen Formatierung abweichendes - selbst eine Änderung der Hintergrundfarbe von der Notation #ffffff auf die Kurzschreibweise #fff hilft idR. schon.)

Nein, selbst grobe veränderungen bringen nichts,

#infobox a span {display:none;}  
  
#infobox a:hover span {  
position:absolute; top:350px; left:190px; z-index:3;  
display:block;  
background: #fff;  
padding:3px;  
border: 3px solid blue;}

hab alles schon auf den Kopf gestellt, aber der IE will nicht.

Grüße,
Engin
 GYRO

[wahsaga]

hi,

Nein, selbst grobe veränderungen bringen nichts,

Wenn du dich auf den nachfolgenden Code beziehst - da hast du nicht das umgesetzt, was ich vorgeschlagen hatte: eine Änderung der Formatierung des Links selber im hover-Zustand.

gruß,
wahsaga

[Engin]

Hi wahsaga,

eine Änderung der Formatierung des Links selber im hover-Zustand.

Tatsächlich, aus

#kopfzeile a:hover{  
color:#FF6600;}

#kopfzeile a:hover{  
color:#FF6600;  
background: transparent;}

und schon geht´s. Was so kleinigkeiten alles bewirken können.
____________________________________________________________

Auf zur nächsten Baustelle,
ich hab mittels CSS und dem Body Tag <body id="startseite"> (jede Seite hat eine eigene <body id"...">)
weitere funktionen integriert, z.b. die Seite, auf der sich der User befindet erkenntlich zu machen,

body#suche a#suche_menu{  
 color: #474739;  
 background:  url(/bild/menu8.gif) 0 -32px;  
 padding: 8px 0 0 20px;  
 }

klappt auch Prima, auch eine erweiterung auf

body#suche a#suche_menu{  
 color: #474739;  
 background:  url(/bild/menu8.gif) 0 -32px;  
 padding: 8px 0 0 20px;  
 }  
  
body#suche a#suche_menu span{  
position:absolute; top:388px; left:62px; z-index:3;  
display:block;  
text-align: center;  
padding:2px;  
border: 1px solid black;}

funktioniert soweit so gut.
Das Problem taucht aber auf, wenn man z.b.

[seite1]
[seite2]
[seite3]
[seite4]
[seite5]
[seite6]

auf seite 4 ist und der Body Tag greift

  
body#suche a#suche_menu span{  
position:absolute; top:388px; left:62px; z-index:3;  
display:block;  
text-align: center;  
padding:2px;  
border: 1px solid black;}

(ich nenne es mal BODYBILD)

das Bild, daß mit dem span für Seite 4 verknüpft ist wird angezeigt,
aber dann taucht ein Problem mit dem Hover Effekt für die Seiten 1-3 auf.
Die Bilder, die beim hovern mittels span gezeigt werden sollten legen sich unter das BODYBILD, das wegen dem Body Tag angezeigt wird, die Bilder der Seiten 5-6 werden dann wieder über das BODYBILD gelegt.
Wie kann ich dem entgegenwirken?

Grüße,
Engin
 GYRO

[Engin]

Hi,

die Problembeschreibung ist mir grad glaub ich nicht so gelungen, ist auch schwierig zu erklären.
Ich hab mal ein Online bsp. hochgeladen

http://klickandsurf.de/test.shtml

unter der Linken Navigation ist ein Bild mit einem Auto, wenn man jetzt über Suchen hovert sollte
sich das Bild für Suchen über das Auto legen, tut es aber nicht.

Alle Links, die sich _über_ dem Link "Auto´s" befinden werden unter das
Bild mit dem Auto gelegt, die Links _unter_ dem Link "Auto´s" hovern wieder normal.
Wie kann ich es anstellen, das das Bild mit dem Auto zwar sichtbar
bleibt, aber der Hover Effekt von Oben bis Unten fuknktioniert.

Grüße,
Engin
 GYRO

[Engin]

Hi,

ich bezieh mich mal auf den Thread vom  07.03.2007-10.03.2007,
wo es ja darum ging, mittels CSS den Link der Seite, auf dem der User sich grade befindet, zu deaktivieren.
Nach langen überlegungen bin ich auf die Idee gekommen, das mit einer Hintergrundgrafik zu reallisieren.

HTML

<div id="Navigation"><ul id="box">  
<li class="suchen_class"><a href="#" class="main" id="suche_menu">Suche<span><img src="/bild/lupe.gif" alt=""></span></a></li>  
</ul></div>

CSS

  
ul {  
 list-style: none;  
 margin: 0;  
 padding: 0;  
}  
body#suche a#suche_menu{  
 display: none;  
 }  
body#suche .suchen_class{  
height: 32px;  
background:  url(/bild/suchenback.gif);  
margin: 0 0;  
padding: 0 0;}

(ist Wahrscheinlich keine schöne, aber dennoch IMHO akzeptable lösung,
wenn man wie ich, keine Serverseitige Sprache beherscht)

Im FF sieht das auch ganz ordentlich aus, nur der IE bildet eine kleine Lücke zwischen dem Hintergrundbild und dem bottom border,
obwohl alle margin und padding werte auf 0 stehen.
Ist das der berüchtigte IE 3 Pixel bug?
Wie krieg ich den weg? (wenns denn der 3 Pixel bug ist)
Die Hintergrundgrafik ist 32 Pixel hoch, also daran liegt es nicht.
Wenn ich die height: 32px; angabe auf height: 28px; setze, bleibt die lücke dennoch bestehen.

Hoffe hier liest noch jemand mit und kann mir helfen. ;)

Grüße,
Engin
 GYRO

[Engin]

Hi,

also, stand der Dinge nach rund 9 Stunden CSS und viel kopfzerbrechen

CSS

body#suche a#suche_menu{  
 display: none;}  
body#suche .suchen_class{  
height: 32px;  
background:  url(/bild/suchenback.gif);  
padding: 0 0;  
} 

HTML

<body id="suche">  
<div id="Navigation"><ul>  
<li class="suchen_class"><a href="/shtml/suche.shtml"  
class="main" id="suche_menu">Suche</a></li></div>  

Der 3 Pixel bug vom IE macht mir zu schaffen
Meine versuche:

* html #Navigation li a{  
    margin-bottom: -3px;  
  }

* html .suche_menu{  
    margin-bottom: -3px;  
  }

* html .suche_menu{  
    margin-top: -3px;  
  }

Und viele viele andere Formationen (ich denke mal die gesamte auflistung aller versuche hier macht kein Sinn),
aber diese angaben verziehen die ganze Navigation, entweder nach oben oder nach unten.
Im FF sieht das Ergebnis wie gewünscht aus, nur der IE, kann mir denn keiner helfen?

Grüße,
Engin
 GYRO

[Struppi]

Im FF sieht das Ergebnis wie gewünscht aus, nur der IE, kann mir denn keiner helfen?

Mir ist das jetzt auch zu komplex um mal eben drüber zu schauen, könntest du eine Seite, die nur das Problem enthält erstellen? (Sowas hilft oft schon den Fehler selber zu finden).
Mir ist nämlich auch nicht so ganz klar was das Problem ist.

Struppi.

[Engin]

Hi Struppi,

könntest du eine Seite, die nur das Problem enthält erstellen? (Sowas hilft oft schon den Fehler selber zu finden).

Also, ich hab die Seite aufs wesentlichste beschränkt, kurz zur Problemeschreibung,
Links ist eine Navigation, der oberste Link, "Suchen" ist als background eingebunden, das <a tag auf display:none,
jetzt ist nur im IE beim hovern direkt unter "Suchen" auf "Auktion" eine 3 Pixel grosse lücke.
Alle versuche mit *html angaben in der CSS Datei verziehen die ganze Navigation.
http://klickandsurf.de/bug.shtml

Grüße,
Engin
 GYRO