• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

TD höhe und Breite - Firefox und IE

ToxicDeluxe

Neues Mitglied
Hey,

ich bin nun schon seit Stunden auf der Suche und finde einfach nix gescheites.

Mein Problem:
Ich möchte eine Tabelle haben, in der pro Zelle ein 2Pixel schwarzer Border gesetzt ist. Die Zellen solllen hierbei immer 62 Pixel hoch und 42 Pixel breit sein.
Da der Firefox aber die Border mit in die bereits vorgegebene Höhe (62) einrechnet, aber der IE nicht, wird es etwas schwierig.
Nun habe ich sogar schon Browserunterscheidung gemacht, aber das bringt alles nichts.
Wie bekomme ich den IE dazu, den Border mit in die Höhe einzuberechnen, bzw. die Tabellenzelle so hinzubekommen, dass die Zelle genau so schick ist wie im Firefox?
Ach so... und jede Tabellenzelle soll einen Hintergrund haben (auch 62px hoch und 42px breit). Im Firefox gehts und im IE wird dieser dann aber nicht mehr im Rest des dashed Borders angezeigt. Der Hintergrund soll komplett sichtbar sein und der Border soll "mit im Hintergrund" sein.

Hier der Code (CSS):
Code:
.myTable td {
    height:62px;
    width:42px;
    border:2px black dashed;
}
... und HTML:

HTML:
... <td style="background-image:url('http://www.testseite.de/images/test.png')">
     test
   </td>
Bin dankbar für jede Antwort :)

Gruß
 
Schon nach Lesen des ersten Satzes hört es sich an, wie ein Problem mit dem Box Model. Das CSS Box Model besagt, dass sich die Größe eines Elements errechnet aus dem Außenabstand, dem Rahmen, dem Innenabstand und width/height. Der IE, wenn er im Quirks Mode arbeitet, arbeitet mit einem falschen Box Model, wo Abstände und Rahmen in width enthalten sind.

Du musst Deiner Seite einen Doctype geben, der alle Browser in den Standards Mode versetzt, dann arbeitet der IE auch mit dem richtigen Box Model.

Mehr zu Doctypes findest Du hier: LANtastic’s Artikel » DTD - Document Type Declaration - Das richtige Doctype
 
vielen Dank!

nicht wirklich oder? ;)
ich hab schon nen doctype eingebunden, weil ich dachte, es läge daran. scheint der falsche gewesen zu sein. bin grade auf arbeit und kann dir den quellcode nicht schicken, aber es war auf jeden fall HTML 4.01 im Doctype.
Was würdest du empfehlen? Ich werde mir das mal heute Abend durchlesen, wenn ich zu Hause bin ;)
Vielen Dank schon mal, ich werde nochmal schreiben, ob´s funktioniert hat oder nicht.
 
Auf Seite 3 des von mir verlinkten Artikels hast Du eine Übersicht über die Browser und in welchen Modus sie schalten. Für HTML 4.01 gibt es 6 mögliche Doctypes.

Im Zweifelsfall würde ich HTML 4.01 Transitional mit URL oder XHTML 1.0 Strict empfehlen.
 
Der IE5-7 stellt das background-image immer nur innerhalb der border da wenn das Element layout hat. <td> hat immer Layout.
 
ich hab mal grade ein "testdokument" angelegt (bin noch auf arbeit).
egal mit welchem doctype ich es ausprobiere, es funktioniert nicht. der IE stellt den border immer noch außen dar. Die Zelle wird also immer noch größer und der Background wird auch immer noch nicht richtig angezeigt :(
 
Sag ich doch.
Du könntest ein Element (div) in die Tabellenzelle legen und dem border, width und height geben. <td> bekommt nur das background-image.
 
Zuletzt bearbeitet:
Sag ich doch.
Du könntest ein Element (div) in die Tabellenzelle legen und dem border, width und height geben. <td> bekommt nur das background-image.


joah, super, genau so hab ich es jetzt auch gemacht und es funktioniert wunderbar. schade eigentlich, dass man immer umwege gehen muss...
na gut, das thema ist damit abgeschlossen ;)
 
Zurück
Oben