IE - Div-Höhe spinnt

[Luke]

Hi,
Ich bin echt ratlos; Die Situation ist folgende: Ich habe eine Überschrift umschlossen von 2 DIVs (eigentlich sind es 5 DIVs (Hintergrund + 1 für jede (abgerundete) Ecke, aber der Fehler tritt schon bei 2 DIVs auf). Darunter befindet sich ein weiteres DIV. Die Überschrift und das DIV unter der Überschrift haben padding. Jetzt das komische: Das erste, also das äußerste DIV das die ÜBerschrift Umschließt hat plötzlich eine riesige Höhe und fließt in das darunterleigende DIV, es drückt es aber nicht runter, sondern liegt mit seiner Höhe unter dem anderen DIV!

Der Sourcecode ist ganz simpel:

HTML:

<div class="entry_title_top_right"><div class="entry_title_bottom_right"><h2><a href="#">Insanely Interesting Blogentry</a></h2></div></div>  
<div style="padding:20px;">blah</div>

CSS:

.entry_title_top_right {  
 background: url('images/greenbar_topright.gif') no-repeat top right #FF0000;  
}  
  
.entry_title_bottom_right {  
 background: url('images/greenbar_bottomright.gif') no-repeat bottom right #8ac503;  
  
h2 {  
 color: #FFFFFF;  
 font-size: 16px;  
 font-weight: bold;  
 padding: 6px 10px 6px 10px;  
 margin: 0px;  
}

Wenn ich das padding der Überschift auf 0px setze zeigt er mir's wie gewünscht an, wenn ich das padding der darunterliegenden DIVs entferne verkleinert er das rote DIV so als ob es das darunterliegende DIV umschließen würde!

Ich kapier's nicht. Habt ihr ne idee?

Greets
Luke

PS: Tantek-Hack geht glaub ich nicht weil ich hier keine feste Höhe angeben kann, die Überschrift kann nämlich unterschiedlich lang sein.

[Axel Richter]

Hallo,

Dein hier geposteter HTML/CSS-Code erzeugt _nicht_ das im Bild gezeigte Aussehen, so dass man sich weder vorstellen kann, was Du derzeit machst, noch, was Du erreichen willst. Wenn Du Hilfe willst, poste einen Link zu einer Seite, wo der unerwünschte Effekt auftritt und beschreibe bitte ausreichend genau, was Du erreichen willst, was also das gewünschte Aussehen wäre.

viele Grüße

Axel

[Luke]

Oh, das lag daran dass ich im CSS-Teil bei .entry_title_bottom_right die schließende klammer verschlampt hatte. Ein Beispiel hab ich mal hier http://www.bombach.info/luke/selfhtml/headerproblem/ online gesetzt. Wie es aussehen soll? Das DIV mit dem roten Hintergrund soll bündig mit der Überschrift sein, also nicht sichtbar, bzw. wenn die Hintergrundfarben (die hier nur zu demonstationszwecken gesetzt sind) weg sind soll eine abgerundete Ecke rechts-oben und rechts-unten bei der Überschrift sein, und das DIV soll auf gar keinen Fall Höher als die Überschrift sein.

[Axel Richter]

Hallo,

Ein Beispiel hab ich mal hier http://www.bombach.info/luke/selfhtml/headerproblem/ online gesetzt. Wie es aussehen soll? Das DIV mit dem roten Hintergrund soll bündig mit der Überschrift sein, also nicht sichtbar, bzw. wenn die Hintergrundfarben (die hier nur zu demonstationszwecken gesetzt sind) weg sind soll eine abgerundete Ecke rechts-oben und rechts-unten bei der Überschrift sein, und das DIV soll auf gar keinen Fall Höher als die Überschrift sein.

Das ist es auch nicht, jedenfalls nicht im FireFox. Und auch im IE nicht wirklich. Probier mal:

<div style="background-color:#FF0;">blah</div>

Das Hintergrundbild von .entry_title_top_right wird natürlich von der Hintergrundfarbe von .entry_title_bottom_right überdeckt, so dass man es nicht sieht.

Willst Du solche runden Ecken erzeugen? Dann nimm doch das als Vorlage.

viele Grüße

Axel

[Luke]

Das ist es auch nicht, jedenfalls nicht im FireFox. Und auch im IE nicht wirklich. Probier mal:

<div style="background-color:#FF0;">blah</div>

Im Firefox wirklich nicht, aber im IE schon. Der einzige div der rot hinterlegt ist, ist entry_title_top_right und blah hat definitiv ne rote hintergrundfarbe. Wenn man's gelb überdeckt sieht man's natürlich nicht mehr, aber das kann's ja nicht sein.

Willst Du solche runden Ecken erzeugen? Dann nimm doch das als Vorlage.

Da ist genau 0 Unterschied zu dem wie's ich mache, nur hab ich das Padding-Problem.

[Detlef G.]

Hallo Luke

Der Sourcecode ist ganz simpel:

...

Wirklich?

Ich würde es wohl so machen:

HTML:  
  <body>  
   <h2 class="entry_title"><a href="#">Insanely Interesting Blogentry</a></h2>  
   <div style="padding:20px;">blah</div>  
  </body>  

CSS:

h2.entry_title {  
 margin:0;  
 padding:0;  
 background: url('images/greenbar_topright.gif') no-repeat top right  #8ac503;  
}  
  
h2.entry_title a {  
 display:block;  
 background: url('images/greenbar_bottomright.gif') no-repeat bottom right;  
 color: #FFFFFF;  
 font-size: 16px;  
 font-weight: bold;  
 padding: 6px 10px 6px 10px;  
}  

Auf Wiederlesen
Detlef

[Luke]

Ich würde es wohl so machen:

Ja, wobei ich den Code gakürzt hatte, es fehlen noch die Ecken links- und rechts-oben

[Detlef G.]

Hallo Luke

Ich würde es wohl so machen:
Ja, wobei ich den Code gakürzt hatte, es fehlen noch die Ecken links- und rechts-oben

Wäre ja nicht schlecht gewesen, das gleich mit anzugeben, und zumindest auf der Beispielseite den relevanten Code nicht zu kürzen.

Eigentlich ist es eine totale Verschwendung, für solche kleinen Rundungen extra Grafiken zu bemühen, oder sind die im Beispiel verwendeten Grafiken auch gakürzt ;-).

Ohne Grafiken (kann allerdings nicht für alle Browser garantieren):
HTML:

  <h2 class="entry_title"><a href="#">Insanely Interesting Blogentry</a></h2>  
   <div style="padding:20px;">blah</div>  

CSS:

.entry_title {  
 margin:0 2px;  
 border:1px solid #8ac503;  
 background-color: #8ac503;  
}  
.entry_title a {  
 margin:0 -2px;  
 background-color: #8ac503;  
 display:block;  
 color: #FFFFFF;  
 font-size: 16px;  
 font-weight: bold;  
 padding: 4px 8px;  
}  

Wenn die Ecken ei klein wenig größer sein sollen:
HTML:

   <div class="entry_title">  
    <h2><a href="#">Insanely Interesting Blogentry</a></h2>  
   </div>  

CSS:

.entry_title {  
 margin:0 3px;  
}  
.entry_title, .entry_title h2 {  
 border:1px solid #8ac503;  
 background-color: #8ac503;  
}  
.entry_title h2, .entry_title a {  
 margin:0 -2px;  
}  
.entry_title a {  
 background-color: #8ac503;  
 display:block;  
 color: #FFFFFF;  
 font-size: 16px;  
 font-weight: bold;  
 padding: 3px 7px;  
}  

Das spart die Grafiken und auch ein paar der zusätzlichen Divs die bei "Runde und andere Ecken für skalierbare Boxen" nötig sind.

Auf Wiederlesen
Detlef