Breite und Höhe für SPAN festlegen

[Michel]

Bin eben von der Backspace-Taste abgerutscht und habe Enter getroffen...

Ich versuche einen schachbrettartigen Aufbau zu realisieren, bei dem jedes Feld eine andere Hintergrundgrafik enthält, auf der eine per php generierte Ziffer liegt:

<span class="Feld" style="background-image:url(Pfad)">Ziffer</span><span class="Feld" ... <br>
<span class="Feld" ...
...

Per ASS habe ich die Dimensionen der Felder und die Schriftgröße definiert:

.Feld {
 width:40px;
 height:40px;
 padding-top:15px;
 font-size:10px;
 line-height:10px;
 text-align:center;
}

In Opera und IE funktioniert das auch ohne Probleme, aber Mozilla ignoriert die Größenangaben und schrumpft mir die Felder auf die Größe der Ziffer zusammen. Ich habe schon versucht, DIVs statt SPANs zu nehmen und per float:left nebeneinander anzuordnen, was aber nicht den gewünschten Erfolg gebracht hat. Wie bekomme ich das in den Griff?

Gruß
Michel

[nag]

Hallo,

http://www.stud.uni-giessen.de/~su6690/selfhtml/schachbrett.html

mfg NAG

[Michel]

Dankeschön, hat mir sehr weitergeholfen!

Gruss
Michel

[XaraX]

Hallo Michel,

das geht schon mit <div> ;)
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display

von besonderem Interesse sind dabei die Werte:

table
  table-row
  table-cell

Dem gibtst du dann nur noch ein width:40px und height:40px zu und dann mag das der Mozilla. Wie das allerdings die andern Browser nun interpretiren, weiß ich nicht...
Viel Glück ;)

Gruß aus Berlin!
eddi

[wahsaga]

hi,

In Opera und IE funktioniert das auch ohne Probleme, aber Mozilla ignoriert die Größenangaben und schrumpft mir die Felder auf die Größe der Ziffer zusammen.

mozilla interpretiert es richtig.
span ist ein inline element, und kann als solches keine breite und höhe zugewiesen bekommen.

erst wenn du per display den span bspw. als block level element formatierst, zeigen diese angaben wirkung.

gruß,
wahsaga