problem beim padding..

suchender

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;
}

Alles anzeigen

im html steht nur

Code

<div class="menu"></div>

url hab ich leider nicht, noch kein webspace...

Ronald

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

driver

ä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

Ronald

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:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<style type="text/css">
.menu {
border:1px solid #000000;
background-color:#000000;
background-image:url(banner.png);
position:absolute;
width:470px;
height:30px;
top:35px;
left:50px;
color:#ffffff;
font-family:courier new;
padding:0px;
text-indent:10px;
line-height:30px;
}
</style>
</head>
<body>
<div class="menu">
testtext
</div>
</body>
</html>

Alles anzeigen

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

driver

saucool... da kann sogar ich noch was lernen....