• Wieder einmal haben uns unsere Apfeltalker tolle Fotos zur Abstimmung eingesandt. Welches ist Euer Favorit? Stimmt mit ab! Hier geht es zur Abstimmung --> Klick
  • Es ist bereits Apfeltalk-Tradition und wir möchten sie auch in diesem Jahr fortsetzen: Unser Apfeltalk-Weihnachtslogo-Wettbewerb hat begonnen! Gestaltet für uns das Weihnachtsbanner, das im Monat Dezember bis zum Weihnachtsfest unsere Webseite schmücken soll. Lasst Eurer Kreativität freien Lauf! Hier geht es zum Wettbewerb --> Klick

DIV Box mit Überschrift

Caesar

Weigelts Zinszahler (Rotfranch)
Registriert
03.04.06
Beiträge
245
Hallo zusammen,

der IE7 macht mal wieder Probleme :angry:

Folgende Situation:
Ich habe ein DIV mit einer bestimmten Rahmenfarbe. Das ganze bildet dann eine Box. Oben soll die Überschrift dieser Box angezeigt werden.

Das ganze soll dann so aussehen:
Bild 3.png

Das tuts auch im Firefox und im Safari (sowohl Win als auch OS X) nicht jedoch im IE7. Der macht folgendes draus:
Bild 2.png

Ich habe die CSS-Styles wie folgt definiert:

Box mit Rahmen:
.box_blau {
border-color:#ADD5E9;
border-style:solid;
border-width:1px 1px 1px;
font-size:12px;
margin:0pt 0pt 20px;
padding:11px 11px 15px;
}

Position der Überschrift:
.box_blau_headline {
margin-top: -23px;
margin-bottom: 10px;
}

Weißer Hintergrund und Format der Überschrift:
box_blau_headline_format {
background:#FFFFFF;
color:#1D6DB7;
font-family:"Trebuchet MS",verdana,arial,helvetica,sans-serif;
font-size:18px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
margin:0pt;
padding:2px 7px 0pt;
}


Im Quellcode wird das wie folgt eingebaut:
<div class="box_blau">
<div class="box_blau_headline"><box_blau_headline_format>Überschrift</box_blau_headline_format></div>
Text Hauptbereich
</div>


Der IE 7 kennt einerseits die Formatierung der Überschrift nicht. Und er zeigt oben zwei Rahmenlinien an.

Hat vielleicht jemand eine Idee wie man das lösen könnte? Kennt jemand einen entsprechenden CSS Code?

Merci

Manuel
 
Meines Wissen nach ist das Browserverhalten bei negativen Werten für Margin nicht eindeutig definiert.
 
Hmm hast du am Anfang alles Margin & padding Attribute auf Reset gesetzt? Sprich, die Default Werte der Browser überschrieben?

-> * {padding:0;margin:0}
 
Ja, das habe ich gemacht ;)