hoverbox-Problem

[Andreas]

Hi Forum, ich habe in einer Webseite, die ich betreue, Bilder eingebaut, die sich bei Mouseover per css vergrößer. Orientiert habe ich mich dabei an dem "hoverbox-Modell" von Nathan Smith. Das funktioniert bei Ihm sowohl im Firefox als auch im IE. Bei mir liegen im IE7 die nicht-aktiven Thumbs über den hochkommeden großen Bildern. Mit dem Firefox ist das nicht so.
Zu betrachten HIER.
CSS:

.hoverbox-r
{
        cursor:default;
        list-style: none;
        float:right;
}

.hoverbox-r a
{
        cursor: default;
        background: #eee;
        border-color: #ddd #bbb #aaa #ccc;
        border-style: solid;
        border-width: 1px;
        color: inherit;
        display: inline;
        float: left;
        margin: 3px;
        padding: 5px;
        position: relative;
}

.hoverbox-r a .preview
{
        display: none;
}

.hoverbox-r a:hover .preview
{
        display: block;
        position: absolute;
        top: 5px;
        right: 5px;
        z-index: 1;
}

.hoverbox-r img
{
        background: #fff;
        border-color: #aaa #ccc #ddd #bbb;
        border-style: solid;
        border-width: 1px;
        color: inherit;
        padding: 2px;
        vertical-align: top;
}

.hoverbox-r .preview
{
        border-color: #000;
}

Woran kan das liegen?

Danke für Hilfe... Andreas

 

[Loon3y]

Das erste, was mir einfällt ist, dass du deinen kleinen thumbnails auch einen z-index geben müsstest. Das zweite was mir auffällt ist, dass im IE5 und IE6 die hover-bilder (die großen) nichtmehr verschwinden.

Was auch zu sagen ist, im CSS gibt es kein mouseover. Das gibt es nur im JavaScript.

Naja...gib mal deinen Thumbnails auch einen z-index.


Gruß
Loon3y

 

[Andreas]

Hi Loon3y,
guter Tipp, dass mit dem z-index für die Thumbs. Hat aber nicht funktioniert. Nach ein wenig stöbern habe ich auf der Seite des Entwicklers einen IE-fix entdeckt:

.hoverbox a:hover
{
    display: block;
    font-size: 100%;
    z-index: 1;
}

Damit geht es.

Laut Entwickler sollte es mit IE 6 alles funktionieren: "It has been tested in the current builds of all the latest major browsers and works in Camino, Firefox, IE6, Opera and Safari. So, I’m assuming it works in most Gecko based engines. The effect itself even works in IE5.5, but I haven’t bothered to support it because serveral years is ample time for users to have upgraded to version 6. "

Ich habe nur den IE7 und FF3x installiert. Hast Du das ausprobiert?
Naja, mein Counter hat in den letzten 4 Jahren nur 0,3% IEs mit Versionsnummern unter 6 festgestellt. In den letzten zwei Jahren nur <0,1%

Das es bei CSS kein hover gibt, ist klar. Der Entwickler benutzt die Namensanalogie nur wegen der Funktionsanalogie.

Der Fehler tritt bei mir jetzt mit IE7 und FF3 nicht mehr auf. Wäre nett, wenn jemand das für mich auf nem IE6 testen könnte... auch das Problem mit den verschwindenden großen Bildern.

Danke so weit... Andreas

 

[Loon3y]

Hi Loon3y,
guter Tipp, dass mit dem z-index für die Thumbs. Hat aber nicht funktioniert.

wieso? im ie-fix ist doch was mit z-index. ;)

Der Bug bzgl IE5 / IE6 ist bei mir dennoch...also zumindest verschwinden die hover-bilder nichtmehr. Keine Ahnung woran das liegt. Muss ich mich wohl mal näher mit beschäftigen...vllt liegt es auch an anderen angaben die im html / css falsch sein könnten.

Ich habe nur den IE7 und FF3x installiert. Hast Du das ausprobiert?
Naja, mein Counter hat in den letzten 4 Jahren nur 0,3% IEs mit Versionsnummern unter 6 festgestellt. In den letzten zwei Jahren nur <0,1%

darum geht es ja dennoch nicht. egal wie hoch die %-zahl ist, auch wenn es weniger als 0,1% sind, wenn man 0,1% von der gesamten Internet-User-Zahl errechnet, ist man sicherlich auch noch im 6-stelligen Bereich.


Das es bei CSS kein hover gibt, ist klar. Der Entwickler benutzt die Namensanalogie nur wegen der Funktionsanalogie.

Der Fehler tritt bei mir jetzt mit IE7 und FF3 nicht mehr auf. Wäre nett, wenn jemand das für mich auf nem IE6 testen könnte... auch das Problem mit den verschwindenden großen Bildern.

Im Anhang findest du einen Screenshot, wie es im IE6 bei mir aussieht. Die hover-Bilder schließen sich nichtmehr.


Grüßle
Loon3y

 

[Andreas]

Richtig... im fix ist der z-index. Hab versucht den z-index in den bestehenden css-code einzubauen. das ging nicht. Muss ehrlich zugeben, dass ich nicht verstehe, wie der fix funktioniert :-/

Ist das Problem mit den stehenbleibenden Bildern im Original denn auch vorhanden? wenn nicht liegt es wohl an meinen Abänderungen bzw. rest-css.

darum geht es ja dennoch nicht. egal wie hoch die %-zahl ist, auch wenn es weniger als 0,1% sind, wenn man 0,1% von der gesamten Internet-User-Zahl errechnet, ist man sicherlich auch noch im 6-stelligen Bereich.

Wäre schön, wen diese 0,1% bei dieser Seite ankommen würden ;-).

Danke für die Hilfe... Andreas

 

[Bernhard]

Hallo Andreas,

Du hast zwar nicht danach gefragt, aber mir fällt auf, dass die Texte auf der
Website sehr viele Fehler enthalten - bitte unbedingt korrekturlesen (lassen)!

nur ein Beispielsatz:

Wir schätzen die meisten unserer sesshaften und mobilen Kollegen sehr
und arbeiten oft und gerne mit ihnen zusammen.

Grüße
Bernhard

 

[Andreas]

Dammich

Sicher hast Du recht mit den Fehlern .
Es haben schon viele drübergelesen und Korrekturen geschickt. Aber die Fehlermöglichkeiten scheinen unendlich :-(. Beim Syntax wird man ja direkt "bestraft".
Ich geb mir Mühe und bin für jeden Hinweis dankbar...

...Andreas

 

[Andreas]

Habs hinbekommen, glaube ich.

Habe auf meinem alten Rechner (der nur noch Musik macht) einen IE6 gefunden und ein wenig rumexperimentiert. Mit dem jetzigen CSS gehts mit FF3, IE6, IE7 und IE8... mit anderen Browser hab ich es nicht probiert.

.hoverbox
{
        cursor:default;
        list-style: none;
        float:right;
}

.hoverbox a .preview
{
        display: none;
}

.hoverbox a:hover .preview
{
        display: block;
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 1;
}

.hoverbox img
{
        background: #fff;
        border-color: #aaa #ccc #ddd #bbb;
        border-style: solid;
        border-width: 1px;
        color: inherit;
        padding: 2px;
        margin-left: 5px;
        vertical-align: top;
}

.hoverbox .preview
{
        border-color: #000;
}

/* IE-fixes */

.hoverbox a
{
        position: relative;
}

.hoverbox a:hover
{
        display: block;
        font-size: 100%;
        z-index: 1;
}

.hoverbox li
{
        position: static;
}

Danke für Eure Hilfe

... Andreas