Ergebnis 1 bis 5 von 5

Thema: problem beim padding..

  1. #1
    suchender
    Gast

    Standard problem beim padding..

    Hallo !

    Ich hab ein kleines Problem. Ich hab meine erste Homepage gebaut mit div-containern.
    Jetzt hab ich ein kleines Problem bei der Anzeige zwischen Firefox und IE.

    In den Fotos sieht man glaub ich ganz gut, der Firefox hängt hinten und unten noch was dran.
    Ich denke mal des is der Wert der im Padding steht. Allerdings kann ich den nicht rausnehmen,
    dort soll nämlich noch Text rein..

    Wie kann ich dem FF anweisen das er nur die größe nimmt ?

    hier noch die css für diese div-box:
    Code:
    .menu {
    border:1px solid #000000;
    background-color:#000000;
    background-image:url(verlauf.png);
    position:absolute;
    width:470px;
    height:30px;
    top:35px;
    left:50px;
    color:#ffffff;
    font-family:courier new;
    padding-right:0px;
    padding-bottom:0px;
    padding-left:10px;
    padding-top:5px;
    }
    im html steht nur
    Code:
    <div class="menu"></div>
    url hab ich leider nicht, noch kein webspace...
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Moin!

    Es sieht so aus, als ob der IE dein 'padding' ignoriert.
    Mach trag mal in das Blockelement (also zwischen die Div-Tags) etwas Text ein und schau es dir dann im IE an, ändert sich etwas?

    Ansonsten: die URL bitte.

    G.a.d.M.

    Ronald

  3. #3
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    ähm... ich hab mal wieder ne icq message bekommen.. .wie so oft...
    leider konnte ich ihm auch nicht helfen... aber ich hab seine datei mal bei mir hochgeladen...

    funpic wollte er irgendwie net...

    http://www.devil-driver.de/test.html
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  4. #4
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Danke driver,

    jetzt verstehe ich überhaupt erst, was er erreichen will.

    Problem: 'padding' wird vom IE anders ausgelegt, als es von der W3C vorgegeben wird, Mozilla hält sich daran (padding befindet sich innerhalb eines Elementes). Dadurch verschiebt sich beim Firefox optisch der Hintergrund. Dieses könnte man durch eine positionierte und sich nicht wiederholende Hintergrundgrafik ausgleichen - dann paßt es allerdings im IE nicht mehr.

    So klappt es aber mit beiden Browsern:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>test</title>
    <style type="text/css">
    .menu &#123;
    border&#58;1px solid #000000;
    background-color&#58;#000000;
    background-image&#58;url&#40;banner.png&#41;;
    position&#58;absolute;
    width&#58;470px;
    height&#58;30px;
    top&#58;35px;
    left&#58;50px;
    color&#58;#ffffff;
    font-family&#58;courier new;
    padding&#58;0px;
    text-indent&#58;10px;
    line-height&#58;30px;
    &#125;
    </style>
    </head>
    <body>
    <div class="menu">
    testtext
    </div>
    </body>
    </html>
    Hier wurde das 10px-padding links durch einen Text-indent ersetzt, welches ähnlich ist, als hätte man ein margin links neben dem Text eingefügt.
    Damit die Schrift nicht am oberen Bildrand klebt, wurde mit 'line-height' die höhe für eine Schriftzeile auf 30px gesetzt, entsprechend der Größe der Hintergrundgrafik. Wenn die Schrift höher erscheinen soll, dann 'line-height' einfach einen kleineren Wert zuweisen, jeder Pixel weniger schiebt den Text einen halben Pixel höher.

    Eine andere Alternative wäre ein weiteres inneres Blockelement in den Div-Tag zu legen und dann mit margin zu arbeiten. Ich meine jedoch, je weniger Elemente, umso besser.

    G.a.d.M.

    Ronald

  5. #5
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    saucool... da kann sogar ich noch was lernen....
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

Ähnliche Themen

  1. Komisches padding problem IE
    Von Stephan im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 12.06.2008, 18:49
  2. padding problem
    Von gelöschter User im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 10.02.2008, 18:53
  3. CSS Padding streikt.
    Von im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 19.07.2007, 21:46
  4. h + padding-top
    Von ad3nau im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 27.11.2006, 21:54
  5. leeren Zeilen trotz padding
    Von Brandon im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 01.12.2004, 21:30

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •