Raphael: min-height wird ignoriert

So, hi erstmal!
Nach Stunden des Suchens und Probierens bin ich jetzt am Punkt der totalen Verzweiflung angelangt. Diese Seite will sich einfach nicht mit dem min-height Attribut anfreunden.

Hier der HTML-Aufbau:

<BODY>
<DIV ID="site">
 <DIV CLASS="centered">

<!-- Start of Navigation -->
<TABLE ID="Table_01" BORDER="0" CELLPADDING="0" CELLSPACING="0">

</TABLE>
<!-- End of Navigation -->

</DIV>
 <DIV ID="main_content" CLASS="centered">

<!-- Start of Content -->
  <DIV CLASS="content">
   <TABLE BORDER="0" CLASS="heading">
    <TR>
     <TD CLASS="text_header">

</TD>
    </TR>
   </TABLE>
   <SPAN CLASS="text_content">

</SPAN>
  </DIV>

<DIV CLASS="content">
   <TABLE BORDER="0" CLASS="heading">
    <TR>
     <TD CLASS="text_header">

</TD>
    </TR>
   </TABLE>
   <SPAN CLASS="text_content">

</SPAN>
  </DIV>
<!-- End of Content -->

<!-- Start of Footer -->
  <DIV CLASS="footer">

</DIV>
<!-- End of Footer -->

</DIV>
</DIV>
</BODY>

Und hier das CSS:

HTML, BODY
  {
  background:url(bg_main.jpg) #000000 repeat-y fixed center;
  margin:0px auto;
 height:100%;
         width:100%
  }

a
  {
         outline:none;
         }

a:link
  {
         color:#cc0000;
         text-decoration:none;
         }

a:visited
  {
         color:#660000;
         text-decoration:none;
         }

a:focus
  {
         color:#ff0000;
         text-decoration:underline;
         }

a:hover
  {
         color:#ff0000;
         text-decoration:none;
         }

a:active
  {
         color:#ffffff;
         text-decoration:underline;
         }

#table_01
  {
         width:700px;
         height:311px;
         }

#main_content
  {
         padding-top:85px;
  background:url(images/header/gigs.gif) #000000 no-repeat top left;
         }
 #site
  {
         min-height:100%;
         }

.centered
  {
  width:700px;
  margin:0px auto;
  }

.content
  {
  width:535px;
  margin:0px auto 40px;
         }

.heading
  {
         width:535px;
         table-layout:fixed;
         margin:0px;
         padding:0px;
         border-bottom:2px solid #990000;
         }

.text_header
  {
         width:400px;
         font:600 small-caps 1.1em Arial,sans-serif;
         color:#cccccc;
         vertical-align:bottom;
         text-align:left;
         padding:0px;
         }

.text_content
  {
         font:500 0.85em/1.4em Arial,sans-serif;
         color:#cccccc;
         }

.footer
  {
         margin-top:50px;
         border-top:2px solid #990000;
         border-bottom:2px solid #990000;
         font:400 0.7em/1.8em Arial,sans-serif;
         color:#cccccc;
         vertical-align:middle;
         text-align:center;
         padding:5px;
         }

Da ich mir nicht sicher bin, ob diese gekürzte Fassung ausreicht hier noch die ganze Datei online: http://www.shattered-remains.de/new/gigs.htm

Ach ja: sowohl IE7 als auch Firefox interpretieren min-height korrekt, wenn ich das Attribut ein DIV-Element weiter unten verwende. Der Effekt ist logischerweise aber ein Anderer.

Und falls jemand etwas über den ziemlich konfusen Aufbau zu sagen hat, bin ich auch hier über alle (konstruktiven ;) )Ratschläge glücklich.

Danke im Voraus, und guter Hoffnung zum Gruß,
Raphael

  1. Hallo,

    Ach ja: sowohl IE7 als auch Firefox interpretieren min-height korrekt, wenn ich das Attribut ein DIV-Element weiter unten verwende. Der Effekt ist logischerweise aber ein Anderer.

    Wenn dem so ist, liegt der Fehler nicht bei Dir, sondern am Browser. Ich denke mal das Probelem tritt im IE < 7 auf, und das ist normal. Bis IE7 ist weder min-height, noch min-width implementiert. Allerdings hat der IE<7 den hilfreichen Bug, height/width wie min-height/min-width zu behandeln.
    Was Du nun machen musst, ist z. B. über conditional comments für IE<7 eine exklusive CSS-Anweisung zu geben, in der du anstatt min-height:Wert einfach height:Wert einträgst.

    netten Tag
    ^da Powl

    --
    ===============================
    powl.hat-gar-keine-homepage.de/
    1. hi,

      Wenn dem so ist, liegt der Fehler nicht bei Dir, sondern am Browser. Ich denke mal das Probelem tritt im IE < 7 auf, und das ist normal. Bis IE7 ist weder min-height, noch min-width implementiert. Allerdings hat der IE<7 den hilfreichen Bug, height/width wie min-height/min-width zu behandeln.

      also dass der IE<7 width wie min-width behandelt wäre mir neu. schön wärs. stimmt aber leider nicht.

      vg mel

      1. Hallo Mel,

        also dass der IE<7 width wie min-width behandelt wäre mir neu. schön wärs. stimmt aber leider nicht.

        Stelle Dir ein Div vor, sagen wir width:50px; breit.
        Darinnen ein Blockelement mit width:XXem, welches aber kleiner ist als das Div. Wenn Du nun die Schrift größer skalierst, dass XXem>50px werden, was passiert dann in
        a) einem Browser
        b) in einem IE<7 ?

        Würdest Du widersprechen, dass das Verhalten des IE<7 in etwa dem entspricht, was man für Browser bei einer Angabe von min-width:50px erwarten würde?

        netten Tag
        ^da Powl

        --
        ===============================
        powl.hat-gar-keine-homepage.de/
    2. Wenn dem so ist, liegt der Fehler nicht bei Dir, sondern am Browser. Ich denke mal das Probelem tritt im IE < 7 auf, und das ist normal. Bis IE7 ist weder min-height, noch min-width implementiert. Allerdings hat der IE<7 den hilfreichen Bug, height/width wie min-height/min-width zu behandeln.
      Was Du nun machen musst, ist z. B. über conditional comments für IE<7 eine exklusive CSS-Anweisung zu geben, in der du anstatt min-height:Wert einfach height:Wert einträgst.

      Erstmal danke für so schnelle antwort, aber mein problem ist aber dass es weder im firefox noch im IE=7 interpretiert wird, im mom bin ich noch garnet dazu gekommen es im 6er auszuprobieren, wobei ich den bug mit height durchaus kenne und auch probiert habe ob es für den 7er evtl damit funktioniert...tut es aber nicht, und wie gesagt auch firefox verweigert...ich bin echt verzweifelt...