padding in IE, Firefox und Opera ??

[fd0311]

hi !

hab mal wieder Browserprobleme:

ich hab ein padding-Attribut verwendet mit dem wert 4px
im IE ist alles so wie ich es wollte, aber im Opera und Firefox mal
wieder alles anders

ich hab hier im forum schon was gefunden doch dann wirts noch schlimmer *heul*
wenn ich display auf block setzte is im Firefox und Opera alles falsch (siehe anhang).

vielleicht hat einer von euch nein tip oder eine hilfestellung für mich.


fd0311

[dkdenz]

Wenn ich aus Deinem Anhang etwas schlussfolgern sollte,
dann dass Du es wohl besser mit padding:0px; machen solltest.
Ansonsten wäre eine Beschreibung und die Angabe des gewünschten Zieles sehr hilfreich.

[fd0311]

Also ich möchte einer ganzen Tabelle einen Linkenrand von 4px verpassen.
Beispiel Datei im Anhang.


fd0311

[dkdenz]

table
{
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:4px;
}

Oder Kurzschreibweise:

table { padding:0px 0px 0px 4px; }

[fd0311]

hab ich gemacht aber der firefox zeigt es immer noch so:


hoffe problem jetzt verstanden..!




fd0311

[dkdenz]

Zum Ersten: das liegt nicht am Firefox oder Opera.
Wenn, dann interpretiert das der IE falsch.

Zum Zweiten: hilfreich wäre ein Link zu dem Problem,
denn es könnte durchaus sein, das Du einen syntaktischen Fehler übersehen hast.

Abgesehen davon ist das ja völlig korrekt.
Hast Du links ein padding von 4px, dann entsteht eben diese "Lücke".
Wenn Du sie nicht willst, dann solltest Du schon 0px nehmen.

[ZeitGeist]

ich nehme mal an du willst das der Text nicht direkt am Rand klebt, aber die Grafik direkt da anfängt?

Zeig mal ein bißchen Code her, vielleicht kann man dir dann besser helfen

[fd0311]

ich nehme mal an du willst das der Text nicht direkt am Rand klebt, aber die Grafik direkt da anfängt?
(..)

genau das meinte ich..

hier is der inhalt von meiner css-datei:

body { font-family: Arial; background-color: #D7DDE1; }

a:link    { color: #424B78; text-decoration:underline; }
a:visited { color: #424B78; text-decoration:underline; }
a:hover   { color: #FFFFFF; text-decoration:none; }
a:active  { color: #5E465B; text-decoration:none; }

table { border-collapse: collapse; font-size: 10pt; }

table.banner { border-collapse: collapse; border-bottom: 3px double #808080 }
table.navi   { font-family: Courier New; font-weight: bold; color: #FFFFFF; }
table.content{ border-style: solid; border-color: #FFFFFF; border-width: 1px; padding-left: 4px; display: block; }

td.links     { text-align: right; background-color: #BDC8CE; padding-right: 4; color:#FFFFFF; font-size:8pt }
td.titel     { background-color: #FFFFFF; font-family: Courier New; padding-top: 5; letter-spacing:3 }
td.adds      { text-align: right; }

a.navi:link      { text-decoration:none; }
a.navi:visited   { text-decoration:none; }

das ganze is auch noch mal oben im anhang.



fd0311

[ZeitGeist]

der html code wäre auch noch ganz praktisch, hab keine lust das zip erst zu entpacken und dann zu suchen.
vielleicht hilft das hier weiter:
http://www.css4you.de/backgroundproperty.html

[fd0311]

hier der HTML-Teil der sich verändern soll:

    <table class="content" cellpadding="0" cellspacing="0" width="90%">
      <tr>
        <td width="100%" height="32px" class="titel" background="../titel.png" valign="top">
        Kontakt</td>
      </tr>
      <tr>
        <td width="100%" bgcolor="#D7DDE1">Was möchten Sie tun ?<br>
        <br>
        - <a href="webmail.htm">E-Mail schreiben</a><br>
        - <a href="msn.htm">Über MSN Messenger Kontaktieren</a><br>
       &nbsp;</td>
      </tr>
      <tr>
        <td width="100%" class="links">[Webseite empfehlen]</td>
      </tr>
    </p></table>
    </td>
  </tr>
</table>

Der Hintergrund eines Elements kann als Farbe oder als Bild festgelegt werden. Nach dem Boxmodell erstreckt sich der Hintergrund über den Inhalt und dem padding-Bereich (Abstand zwischen Inhalt und Rahmen).
Hintergründe werden nicht vererbt. Da aber transparent der voreingestellte Wert für Hintergründe ist, scheint der Hintergrund der übergeordneten Box durch

und wie kann ich es jetzt so machen das der hintergrund am rand bleibt und der inhalt (text, o.ä.) nicht.



fd0311

[fd0311]

weiss dein keiner weiter ?!





fd0311

[dkdenz]

<td width="100%" height="32px" class="titel" valign="top">

.titel
{
background-image:url(../titel.png);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:top left;
}

Jetzt musst Du noch ein

padding-top:20px; padding-left:4px;

reinschreiben,
wobei 20px nur ein Beispiel ist.
Du musst die Pixelanzahl nehmen,
die der Höhe Deines Bildes entspricht + noch 3-4 Pixel dazu,
damit der Text nicht sofort unter dem Bild anfängt.

[fd0311]

danke vielmals!

ich hab jetzt eine noch einbischen was verändert und es geht.




fd0311