Uncle-Jo: Mausover - Bild vergrößern - Position

Hallo,

ich habe wieder einmal das Problem das im IE etwas funktioniert was im FF dann nicht geht oder umgedreht.
Bin dabei ein neues Design zu machen und habe im Kopfbereich drei Bilder eingefügt, die bei Mausover vergrößert werden.
Nun habe ich versucht eine feste Position für die großen Bilder festzulegen und zwar so wie es jetzt im IE dargestellt wird, doch der FF verschiebt die Bilder immer um einiges nach unten. Egal was ich bis jetzt versucht habe es hat nichts geändert.

Aktuell wird die Position in der CSS festgelegt.

  
a.info:hover span  
{  
    display:block;  
    position:absolute;  
    top:80px; left:100px;  
}  

Ich habe aber auch schon versucht mit style tags in der index.htm die Position festzulegen, aber egal wo ich diese eingefügt habe, es hat nichts geändert.
Hier ein Beispiel.

  
<span style="vertical-align:top; padding-top:80px;">  

Fehler von meiner Seite möchte ich natürlich nicht ausschließen.
Vielleicht kann mir ja jemand helfen und hier posten was ich noch machen könnte damit es in beiden Browsern gleich aussieht.

Gruß
Uncle-Jo

PS: An dem Design muss ich noch etwas feilen, da es mir noch nicht so recht die Augen füllt, aber so ähnlich wird es werden.

  1. a.info
    {
        position:relative;
    }

    a.info:hover span
    {
        position:absolute;
    }

    http://de.selfhtml.org/navigation/css.htm#positionierung

    absolute = absolute Positionierung, gemessen am Rand des nächsthöheren
    Elternelements, das nicht die Normaleinstellung position:static hat.

    Damit bezieht sich die absolute-Angabe auf die jeweilige Position des Link-Tags.

    1. Hallo,

      erst mal Danke für die schnelle Antwort.

      http://de.selfhtml.org/navigation/css.htm#positionierung

      absolute = absolute Positionierung, gemessen am Rand des nächsthöheren
      Elternelements, das nicht die Normaleinstellung position:static hat.

      Damit bezieht sich die absolute-Angabe auf die jeweilige Position des Link-Tags.

      Das heißt die Position bezieht sich auf das kleine Bild das z.B. in folgendem Link-Tag eingebracht wird.

      <a class=info href="#"><img src="include/designs/cospi/images/bild1.jpg" width="110" height="92" border="0" alt="Greiz">

      Das Problem ist bloß ich kann auf Grund dieser Position auch den Abstand verändern und zwar in beiden Browsern, doch der Abstand im FF ist immer um ca. 80px nach unten verschoben.
      Ich hatte mal ein ähnliches Problem mit der Positionierung eines Eingabefeldes, da konnte ich die Position dann über nachfolgen style tag in <td> lösen.

        
      <td style="vertical-align:top; padding-top:12px;" background=......>  
      
      

      Das hat aber nur in der Tabellenspalte funktioniert. Weder mit einem Eintrag in der css noch mit span oder anderen Möglichkeiten konnte ich das in beiden Browsern erzwingen. Leider kann ich aber bei diesem Mausoverefekt keine Tabelle verwenden, also nützt mir diese Möglichkeit jetzt nichts.

      Gruß
      Uncle-Jo

  2. Grüße,

    Bin dabei ein neues Design zu machen und habe im Kopfbereich drei Bilder eingefügt, die bei Mausover vergrößert werden.

    hast du schon an eine rein-CSS lösung gedacht?

    MFG
    bleicher

    --
    __________________________-
    Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
    http://www.sexgott-or-not.com/?test=428054
    1. Hallo,

      erst mal vielen Dank für die schnelle Antwort.

      hast du schon an eine rein-CSS lösung gedacht?

      Meinst Du mit reine-CSS Lösung, dass ich die Position der gesamten Bilder, sprich des gesamten Designs, oder des gesamten Kopfbereiches, über die CSS festlegen soll?
      Wenn ja, inwiefern hilft mir das bei Lösung des Problems?
      Bis jetzt habe ich alle Designs immer über die html Seite aufgebaut und nur die Schalter, Schriftart, Schriftgröße, Hintergrundfarbe usw. über die CSS eingebracht. Ich bin aber immer offen für was neues, lerne gerne dazu und wenn diese Lösung Vorteile bringt werde ich es gerne versuchen.

      Gruß
      Uncle-Jo

      1. Grüße,
        falls du hier wieder liest -
        du kanns teinem bild :hover verpassen (bedingt ie kompatibel außer das bild ist in ein link eingebettet sodass du als "a:hover img" ansprechen kannst)

        da es nur 3 bilder sind, kann man der "hover" version einfach eine größere width/height angabe verpassen, und den padding entsprechend verkleinern (um die hälfte jeweils)

        MFG
        bleicher

        --
        __________________________-
        Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
        http://www.sexgott-or-not.com/?test=428054
        1. Hallo und Danke für den Tipp!
          Das hattest Du also mit rein-CSS Lösung gemeint.

          du kanns teinem bild :hover verpassen (bedingt ie kompatibel außer das bild ist in ein link eingebettet sodass du als "a:hover img" ansprechen kannst)

          da es nur 3 bilder sind, kann man der "hover" version einfach eine größere width/height angabe verpassen, und den padding entsprechend verkleinern (um die hälfte jeweils)

          Ich bin mir aber noch nicht sicher ob ich das so umsetzte, da ich eigentlich vorhatte in der Geschichte der Firma die Bilder auch mit Mausover zu vergrößern und da kommen dann schon noch einige dazu.
          Da das aber nur ein nebenbei Projekt ist und ich jetzt vorrangig eine andere Seite bearbeite hab ich ja noch etwas Zeit mir das zu überlegen, nach einer weiteren Lösung zu suchen oder eine andere Gestaltung zu wählen. Ich hatte auch schon eine Javascript Lösung ins Auge gefasst, nutze so etwas in der Regel aber nur wenn ich keine andere Lösung finde.

          Gruß
          Uncle-Jo