[CSS] DIV und Hintergrundgrafik

Huhuu,

ich hoffe hier kann mir jemand helfen! Ich möchte einen abgerundeten Kasten darstellen. Dieser setzt sich aus 3 Grafiken zusammen(1x Kopf, dann den Hintergrund, 1 den Fuss).

der CSS Code dazu:

.top{
  background: url(images/block_top_left.gif);
  background-repeat: no-repeat;
  height: 11px;
}

.mid{
  background: url(images/block_bg_left.gif);
  background-repeat: repeat-y;
}

.bottom{
  background: url(images/block_bottom_left.gif);
  background-repeat: no-repeat;
  height: 16px;
}

Im HTML(Sonst kein weiterer Code zwischen den body Tags):

<div class="top"></div>
<div class="mid">Content</div>
<div class="bottom"></div>

Im Mozilla wird alles korrekt angezeigt, nur der IE macht zwischen der top Grafik und dem .mid Teil ca. 10px Abstand. Bei Tabellen hatte so etwas meist mit cellpadding/celspacing zu tun, in diesem Fall bin ich ratlos.

Da ich vorher das Design über Tabellen gelöst habe, bin ich leider noch recht unerfahren mit solchen Problemen.

Vielen Dank im voraus!

flenders

Hast du die Elemente direkt so plaziert (ohne explizite Angabe)? Versuch's mal mit margin:0px;
Wobei bei mir 3 DIVs ohne weitere Angaben (im IE) direkt untereinander platziert werden

Danke erstmal für Deine Antwort...

Aber daran lag es leider auch nicht... Ich konnte aber glücklicherweise das Problem etwas genauer einschränken. Ich habe um alle 3 DIV's einen Rahmen gelegt und siehe da - der Internetexplorer vergrößert auch den DIV der Fussgrafik, nur fällt es dort nicht auch auf, da die vertikale Ausrichtung auf Top ausgerichtet ist. Setz ich diese bei .top auf vertical-align: bottom; ändert sich ebenfalls nichts.

Kann es sein, dass der IE ne Mindesthöhe von. ca. 20px bei den DIV's hat? Auch wenn ich einen anderen DIV(ohne Grafik, einfach nur nen Border) auf height: 10px; setze, wird dieser im IE auch größer angezeigt.

Weiß jemand Rat?

Danke!

AJ

Setz mal zusätzlich zum margin auch das padding auf 0px, vielleicht liegts daran.

Leider auch nicht

Also das Problem könnte man unschön umgehen, in dem ich die Top-Grafik vergrößere. In meinem Bsp. ist diese jetzt 23px Hoch, und es gibt keine Probleme im IE. Im Mozilla funktioniert es einwandfrei wie vorher, da der DIV nur mit 11px Höhe angezeigt wird.

Aber ihr wisst nicht ob das ein allgemeines IE Problem ist?

Danke!

flenders

Hast du auch darauf geachtet, dass du keine Leerzeichen in den DIV's hast - evtl. liegt es daran

Hab ich leider auch dran gedacht...

Könntet Ihr bitte folgenden Code mal testen?

<html>
  <head>
  </head>

  <body>
    <div style="background: #FFFF00; border: 1px solid #000000; height: 20px;"></div>
    <br/>
    <div style="background: #FFFF00; border: 1px solid #000000; height: 10px;"></div>
  </body>
</html>

Dieser demonstriert genau mein Problem. Firefox/Mozilla zeigt die exakten Größen an. IE 5.0 - 6.0 beide gleich Groß!

Liebe Grüsse

AJ

Das ist ja mehr als seltsam

AJ

*MEGALOL*

Der IE ist ja noch blöder als ich dachte *LOL*.

Stell mal deinen Schriftgrad unter Ansicht um, dann siehst du worans liegt.
Als Lösung brauchst du dann nur den Schriftgrad in deinen divs anders setzen und schon funktionierts einwandfrei ;).

*amBodenwälz*lol*

Super Danke!

Dieser Browser macht mich noch wahnsinnig!

Liebe Grüsse