Zellenabstand trotz padding/margin = 0
Enrico
- css
Hallo,
mich plagt eine seltsame Anzeige-Ungereimtheit im Firefox:
Ich entwerfe meine Buttons gerade über eine selbst erstellte html-Seite, um diese dann, wenn alles passt, per Screenshot "abfotografieren" und zuzuschneiden, so dass ich letztendlich nur noch die fertigen Buttons habe.
Ich verwende zur Erstellung eine Tabelle, in der ich in die Zellen ich jeweils die Buttonecken als Grafiken einfüge und die Umrandungen als Hintergrundgrafiken definiere.
Wenn ich nun die Button-Beschriftungen einfüge, dann passt sich Zelle dem Inhalt an und ich bekomme jeweils 100% passende Buttons.
Mein Problem ist nun aber, dass ich zwischen den Zellen immer einen kleinen Abstand habe, den ich einfach nicht wegbekomme.
Mit dem doctype habe ich schon experimentiert, aber ohne Erfolg. Momentan steht er auf:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Die Tabellendefinitionen sehen auszugsweise wie folgt aus:
table,
tr,
td,
td.Eck_links_oben,
td.Umrandung_Rahmen_oben,
td.Eck_rechts_oben
{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:0px;
}
td.Eck_links_oben
{
width:9px;
height:9px;
background: url(Grafiken/Umrandung_Eck_links_oben.png);
}
td.Umrandung_Rahmen_oben
{
height:9px;
background-image:url(Grafiken/Umrandung_Rahmen_oben.png);
background-repeat:repeat-x;
}
Der zugehörige html-Code folgendermassen:
<table border="0">
<tr>
<td class="Eck_links_oben"></td>
<td class="Umrandung_Rahmen_oben"></td>
<td class="Eck_rechts_oben"></td>
</tr>
<tr>
<td class="Umrandung_Rahmen_links"></td>
<td>Neuigkeiten</td>
<td class="Umrandung_Rahmen_rechts"></td>
</tr>
<tr>
<td class="Eck_links_unten"></td>
<td class="Umrandung_Rahmen_unten"></td>
<td class="Eck_rechts_unten"></td>
</tr>
</table>
Die Grafiken sind auch 9px hoch und/oder breit, das passt.
Den html-Code habe ich ebenfalls ohne Abstände definiert:
html,
body
{
font-weight: bold;
font-family: Arial;
font-size: 14px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
height: 100%;
overflow: hidden;
background-image: url(Grafiken/Holzmaserung_Body.png);
background-repeat: repeat;
}
Wie gesagt bzw. geschrieben werde ich die Tabellenkonstruktion lediglich zur Erzeugung der Buttons verwenden, wenn alles fertig ist, dann verwende ich nur noch die Grafiken selber.
Wie bekomme ich den unschönen Abstand weg?
Vielen Dank für eure Hilfe.
Gruß
Enrico
Lieber Enrico,
bist Du sicher, dass Du padding und margin auch für die betreffenden img-Elemente auf Null gesetzt hast?
Liebe Grüße,
Felix Riesterer.
Hallo Felix,
bist Du sicher, dass Du padding und margin auch für die betreffenden img-Elemente auf Null gesetzt hast?
Das hatte ich nicht, habe es aber ergänzt, leider ebenfalls wieder ohne Erfolg:
img
{
display:block;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
Mann, Mann, Mann, ich bin erschüttert, wie schnell man html- und css-Programmierung wieder vergessen kann, wenn man nicht immer am Ball ist ;-)
Gruß
Enrico
Mann, Mann, Mann, ich bin erschüttert, wie schnell man html- und css-Programmierung wieder vergessen kann, wenn man nicht immer am Ball ist ;-)
Ich bin geschüttelt, dass man so was überhaupt lernen kann ;)
mfg Beat
Hi,
Na, dann bitte ich doch förmlichst und höflichst gnädigerweise um Nachsicht, es lag natürlich nicht in meiner Absicht, bei Dir durch mein Anliegen Schüttelattacken verursacht zu haben ;-)
Viele Grüsse
Enrico
Hallo,
da ich mich mit Flash weniger als gar nicht auskenne, hatte ich mir überlegt, bei MouseOver die grafischen Schaltflächen durch animierte gif-Dateien auszutauschen, die aber lediglich für ein farbliches Einblenden der Beschriftungen sorgen sollen, bei MouseOut wird analog dazu eine ausblendende gif-Grafik angezeigt.
Wenn ich nun die animierten gif-Grafiken vorlade, werden die Animationen dann sofort gestartet oder erst, sobald ich die Grafiken anzeigen lasse?
Ich hoffe, ihr habt verstanden, worauf ich hinaus will... ;-)
Viele Grüsse
Enrico
Hi,
Wenn ich nun die animierten gif-Grafiken vorlade, werden die Animationen dann sofort gestartet oder erst, sobald ich die Grafiken anzeigen lasse?
das ist nicht festgelegt und kann je nach Browser unterschiedlich sein. Und mir ist keine Methode bekannt, definiert auf eine GIF-Animation einzuwirken.
Ciao,
Martin
Hallo Martin,
ok, Idee verworfen ;-)
Dachte ich mir schon fast schon...
Danke und Gruß
Enrico
Hi,
table,
tr,
td,
td.Eck_links_oben,
td.Umrandung_Rahmen_oben,
td.Eck_rechts_oben
{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:0px;
}
Tabelleninterne Elemente (td, tr, tbody, ... - genauer: die mit display-werten table-cell, table-row, table-row-group ...) haben keinen margin, Angaben dafür werden also ignoriert.
Wie gesagt bzw. geschrieben werde ich die Tabellenkonstruktion lediglich zur Erzeugung der Buttons verwenden, wenn alles fertig ist, dann verwende ich nur noch die Grafiken selber.
Wie bekomme ich den unschönen Abstand weg?
border-spacing und evtl. border-collapse für die Tabelle wären Ansatzpunkte.
cu,
Andreas
Hi Andreas,
Andreas, Du bist mein Held !!! :-)
Menschenskinder, dad war's :-)
Vielen, vielen Dank :-)
Gruß
Enrico
PS: Wie bereits geschrieben, das hat man davon, wenn man mal ab vom Schuß ist... ;-)