Abstand paßt nicht

[Cujo]

Hallo,

ich bin gerade dabei, die ganzen Tabellen, die ich bisher für das Design meiner Homepage genutzt habe, rauszuschmeißen und durch CSS-Code zu ersetzen.

Jetzt habe ich aber das Problem, je nachdem, welche Schriftgröße ich im Browser einstelle, der Abstand zum unteren Rand der Box variiert, bzw. sogar den Rand überschreitet.

Sprechblasentest

Bei meinem bisherigen Tabellendesign war das nicht der Fall

Woran kann das liegen?

Hier ist mal der CSS-Code:

/* Die 10 neuesten Rätsel */
.raetsel-box
{
float:left;
width:230px;
height:336px;
background-image:url(images/neu.png);
text-align:center;
margin: 0 50px 0 0;
padding: 7px 10px 7px 10px;
line-height:2.1;
}

Und hier der HTMl-Code:

<div class="raetsel-box">
<strong>Die 10 neuesten Rätsel</strong><br />
<a href="text-raetsel/wort-raetsel/wortraetsel-002.html">Worträtsel 21-40</a><br />
...
</div>

 

[elara1985]

hallo,

ich kann zwar beim testen auf deiner seite auf die schnelle nicht den fehler entdecken, allerdings solltest du bei allen maßgaben anstatt pixel (px) die einheit em verwenden (siehe beispielsweise selfthtml-dokumentation hier und hier). in deinem fall insbesondere die padding- und margin-angaben der boxen. die einheit em richtet sich dann nach der eingestellten schriftgröße und so müsste sich eben auch der abstand gleichmäßig anpassen.

außerdem sollest du bei allen numerischen angaben immer eine einheit angeben (z.b. hat bei dir line-height nur die angabe "2.1" ohne einheit).

hoffe, ich konnte dir helfen.

viele grüße