CSS-Frage: Überschrift im IE "verrückt"

Amarok365 · 26.03.2008, 12:14

Liebe CSS-Kenner,

ich habe ein Problem, das ich bislang nicht durch eigene Kraft lösen konnte, und bevor ich mit meiner Homepage weitermache... Nun, ein Bild sagt mehr als 1000 Worte (www.pielawa.de):

Wie man sieht, ist die Überschrift im DIV "sidebar" im IE7 und darunter immer höher angedockt als in den anderen Browsern (rechts), die die Überschrift so darstellen, wie ich möchte.
Hier das Dreamweaver CS3-CSS für den Sidebar:

Code:

   .Haupt #sidebar {
 float: right; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
 width: 237px;
 padding-top: 1px;
 padding-right: 15px;
 padding-bottom: 11px;
 padding-left: 15px;
 background-color: #F7FDEC;
 margin-left: 17px;
 margin-bottom: 7px;
 border-top: none;
 border-left: 1px solid #99cc66;
 border-right: 1px solid #99cc66;
 border-bottom: 1px solid #99cc66;
    }

Das CSS für die Überschrift:

Code:

P.header2 {
 font-family:Segoe UI, Calibri, Helvetica, Swiss, Tahoma;
 font-weight:bold;
 font-size:11pt;
 line-height:14pt;
 color:#669933;
}

Gibt es da einen Kniff, dem IE beizubringen, dass er den header2 genauso darstellt wie die anderen? Wäre schön, wenn mir da einer helfen könnte.

Beste Grüße von

Boris · 26.03.2008, 12:55

1. ist pt für den Bildschirm ungeeignet. Nimm durchgehend px oder noch bessr em. Pt ist nur für ein Druck-CSS geeignet

2. Haben alle Elemente gewisse (leider unterschiedliche) Standardabstände bei den Browsern. Am besten ist es, diese komplett auf 0 zu setzen und dann nach Bedarf entsprechend zu setzen - das geht ganz einfach so:

*
{
margin: 0;
padding: 0;
}

Amarok365 · 26.03.2008, 13:36

Zitat:

Zitat von Boris

Haben alle Elemente gewisse (leider unterschiedliche) Standardabstände bei den Browsern. Am besten ist es, diese komplett auf 0 zu setzen und dann nach Bedarf entsprechend zu setzen - das geht ganz einfach so:
{
margin: 0;
padding: 0;
}

Ja genau, das hat schon mal prächtig geholfen. Jetzt sieht zwar alles ziemlich zusammengezogen aus, aber mit gezielten paddings usw. kann man jetzt bequemer die Abstände steuern. Zumindest das anfängliche Problem ist damit gelöst. Ich habe das margin und padding mit 0 in den Sammelbegriff reingesetzt und werde jetzt mit padding-bottom etc. Nachabstände für die Absätze definieren. Danke für den Anfangstipp!
Wie das pt da reinkam, weiß ich nicht, normalerweise habe ich immer px.

Beste Grüße von

EvilElvis666 · 27.03.2008, 10:43

Nur mal so:
du kannst die Angaben zu padding/margin auch zusammenfassen. Dann
wird der Code etwas übersichtlicher, z.B.:

margin: 0px 3px 5px 4px;

die Angabe spricht dann folgendes an: oben, rechts, untern, links

border-top: none; brauchst du nicht zu definieren.

Gruß
Elvis