hover schaltet line-height aus

[pepsi]

Hallo,
wenn ich über diese Zeile:
<p><a href="images/mc7450.pdf" target="_blank">PDF-Datenblatt...
mit der Maus gehe (hover),
fällt die Zeile von 145% in sich zusammen.
Dadurch rutscht auch das Bild häßlich an den unteren Rand.

a:hover 
          { background-color:yellow;
            text-decoration:none;  
          }
#angebot p 
           {  line-height: 145%;
              margin: 0 0 0 12px;
           }
    
.small 
           { font-size:70%;
           }



<div id="angebot">
          <p> <img class="imagefloat" src="images/7450.jpg"
                 alt="aaa"></p>
         <p>aaa</p>
         <p><b>DIN A3</b> Farb-Laser-Drucker</p> 
         <p><a href="images/mc7450.pdf" target="_blank">PDF-Datenblatt 
                für magicolor 7450</a></p>
<div class="Preis">Euro xxx<span class="small"> inkl.    
           Mwst.</span>

    </div>
         <p> abzüglich € xxx Cash-Back</p>
  </div> 

gruss und dankeschön
pepsi

[cag-live]

mehr details?! Welcher Browser? bei mir funktionierts. Beispiel-Seite? etc..

[pepsi]

danke fürs Erbarmen.

glaube bin evtl. auf dem Weg...
bei css = Boxmodell hat jede Box einen anderen Namen.

Weil die Boxen bei mir keine Höhe haben,
dachte ich, ich könnte die gleiche Box
für mehrere "Angebote" verwenden.

aber mit dem Ausprobieren bin ich noch erfolglos.
Ohne line-height steht der Text in der Box
in nur einer Reihe übereinander.
Mit line-height: rutscht beim ersten "drüberhuschen"
über den Datenblatt-pdf-Link dieser Text und das Bild
etwas nach unten. (etwas!)

Hier meine Seite: darf ich das so? http://wittkowski.com/Konica.php

script-Text folgt auch noch gleich

[pepsi]

ach so:
IE-Browser

#angebot
    {
    width: 500px;
    background-color: #fff;
    border: 2px solid red;
    }
    
    
    
    }
    #angebot p { line-height: 145%;
                margin: 0 0 0 12px;
                }




<div id="angebot"> 

 <p> <img class="imagefloat" src="images/kamera.jpg" alt="Olympus Kamera">
    OLYMPUS..........    </p>
<div class="Preis">Euro<span style="margin-left:10px"> 289,00 <span class="small"> inkl. Mwst.</span></div>
 </div>
 
  
 <div id="angebot">
   <p> <img class="imagefloat" src="images/7450.jpg" alt="konica minolta"></p>
    <p>KONICA .........</a></p>
 <div class="Preis">Euro 2.999,00 <span class="small"> inkl. Mwst.</span></div>
 <p> abzüglich € 250,00 Cash-Back</p>
  </div> 

etwas ausführlicher?
danke für's Verständnis

gruss Pepsi

[cag-live]

Also es geht, mach mal so, dass alles verruscht

[pepsi]

kleinen Moment noch (Neustart / zu langsam plötzlich)

[pepsi]

alles patschdich zusammen

[pepsi]

so, hier ist ein Bild von meinem Chaos...
wenn ich line-height 145% herausnehme.


hab die Seite CSS validiert. alles ok.

[pepsi]

Guten Morgen,

letzter Versuch, für einen Schönheitsfehler,
der nicht so auffällt. Ich hätte nur gerne gewusst, warum.

im beigefügten Bild sind nocheinmal die drei Variationen:
1. wie es mir gefällt.
2. wie es verrutscht
3. als ob line-height das Zünglein an der Wage wäre.

Ich hoffe, ich rege Euch nicht mit meinem Problemchen auf.

Mein schlechtes Gewissen:
Ich habe vier rote "Boxen" alle gleich mit
#angebot bzw. <div id="angebot"> ausgewiesen.

Gruss
Pepsi

[Kropff]

1. pro seite darf eine id nur einmal (!) vergeben werden. arbeite mit class.
2. beseitige alle fehler
3. sieht nach dem sog. guillotinen-bug aus.

gruß
peter

[pepsi]

danke Peter,

stimmt (jetzt erinnere ich mich - selbstverständlich nur 1mal id). danke.

werde sofort mit class loslegen.
Deine Anwort hat mich wieder motiviert.

Gruss
Pepsi

[pepsi]

ach ist das schön
wenn
"This Page Is Valid HTML 4.01 Strict!"
grün leuchtet !!!!!

---- und nix mehr "verrutscht" !!!!!!!!!!!!!!!!

weil ich auch div class (statt ein paarmal div id) eingesetzt habe

danke nochmal

[Kropff]

ach ist das schön

OffTopic:

---

besser als ein orgasmus

---

petger