Relative numerische Angaben

[rekire]

Hi,

ich habe ein Problem mit relativen numerische Angaben. Ich will zur Formatierung einen Button machen der ein Blockschrift-Icon enthalten soll allerdings will ich dafür kein Bild verwenden damit man es besser Skalieren kann. Im IE7 und Opera9 wird .1em konstant als 1px interpretiert. Im Firefox scheint es aber zu Rundungsfehler zu kommen und die Abstände und Striche schwanken zwischen 1 und 2px.
Hat jemand eine Idee wie man das verhindern kann?

Hier noch ein Code schnipsel zur Verdeutlichung:

<style type=...>
.strich {
 margin:0;
 padding:0;
 background-color:#000;
 height:.1em;
 width:1em;
 overflow:hidden;
 margin-top:.1em;
 min-height:1px;
}
</style>

<button>
<div class="strich"></div>
<div class="strich"></div>
<div class="strich"></div>
<div class="strich"></div>
<div class="strich"></div>
<div class="strich"></div>
</button>

Gruß,
Rekire

[rfb]

Moin

Im IE7 und Opera9 wird .1em konstant als 1px interpretiert.

sollte das nicht davon abhängen, was der Browser als 1em interpretiert, also was Standardschriftgröße ist?

Gruß
rfb

[rekire]

Morgen,

sollte das nicht davon abhängen, was der Browser als 1em interpretiert, also was Standardschriftgröße ist?

Genaugenommen schon, aber ich wollte wissen warum es im FF mal 1 Pixel und mal 2 Pixel sind und wie ich es verhinder kann, so dass es immer die selbe höhe ist.

Gruß,
Rekire

[rekire]

Hi,

Ich habe jetzt eine mehr oder weniger elegante Lösung gefunden:

<style>
button {
 font-size:12px;
 height:2em;
 width:2em;
}
.strich {
 margin:0;
 padding:0;
 background-color:#000;
 height:.08em;
 width:.8em;
 overflow:hidden;
 margin-top:.08em;
}
</style>

<button><b>F</b></button>
<button><u>U</u></button>
<button>
<div class="strich" style="margin-top:4px;"></div>
<div class="strich"></div>
<div class="strich"></div>
<div class="strich"></div>
<div class="strich"></div>
<div class="strich"></div>
</button>

Das Problem dabei ist allerdings das die Buttons in FF, Opera und IE anders aussehen. Die Buttons sind unterschiedlich nicht alle auf einer Höhe und haben zum Teil einen merkwürdigen Abstand zu den anderen Elementen wie kann ich das verhindern?

Gruß,
Rekire

[rekire]

Hat niemand eine Idee?

Ich verstehe einfach nicht warum das verschieden Dargestellt wird.

[Struppi]

ich habe ein Problem mit relativen numerische Angaben. Ich will zur Formatierung einen Button machen der ein Blockschrift-Icon enthalten soll allerdings will ich dafür kein Bild verwenden damit man es besser Skalieren kann. Im IE7 und Opera9 wird .1em konstant als 1px interpretiert. Im Firefox scheint es aber zu Rundungsfehler zu kommen und die Abstände und Striche schwanken zwischen 1 und 2px.

Wieso nimmst du nicht einfach 1px?
oder macht es einen Sinn einen so kleinen Abstand in Relation zur Schriftgröße zu setzen?

Struppi.

[rekire]

Hi Struppi,

Wieso nimmst du nicht einfach 1px?
oder macht es einen Sinn einen so kleinen Abstand in Relation zur Schriftgröße zu setzen?

Weil es dann nicht vergrößert wird wenn man Strg++ drückt. Ich will das man die Seite beliebig vergrößern kann.

Gruß,
Rekire