Viele Float-Boxen, eine sieht anders aus...!?!

[Burn]

Hallo..! Ich habe ein mir etwas mysteriös erscheinendes CSS-Problem. Habe hier bereits im Forum nach einer Lösung gesucht, aber nix passendes gefunden, da ich auch nicht weiß, wie man das Problem bezeichnen soll. Ich versuch es mal zu umschreiben:

Auf der Seite einer Hockeymannschaft gibt es viele Berichte zu unterschiedlichen Events. Dazu gibt es natürlich eine Übersichtseite, auf der man alle Events sehen kann. Klickt man ein Event an, gelangt man zum entsprechenden Bericht. Hier ein Screenshot:

http://www.fliegendessuizidkommando.de/fskproblem.jpg

Man erkennt dort auch schon das Problem: Gelegentlich wird eine, zwei oder drei Boxen ohne CSS formatierung angezeigt.

Das ist nicht bei jedem Seitenaufruf der Fall und es handelt sich auch nicht immer um die selbe Box. Zunächst dachte ich, php macht da beim generieren der Seite irgendwelche Fehler, aber wenn ich in den Quellcode schaue, haben auch die falschangezeigten Elemente die richtige CLASS.

Der generierte HTML-Code:

Code: Alles auswählen

<div id="showallevents">
   <div class="eventbox">
      <div class="intronews">
         <a href="shownews.php?id=54" title="PHH 2009 Düsseldorf">
            <img src="pics/newsstartbilder/phh2009.jpg" width="215" border="0" height="105">
         </a>
      </div>
      <div class="group">
         <img src="gfx/hp/cms/hockey.png" height="10px">
      </div>
      <a href="shownews.php?id=54" title="PHH 2009 Düsseldorf">
         <h1>PHH 2009 Düsseldorf</h1>
      </a>
      <a href="shownews.php?id=54" title="PHH 2009 Düsseldorf">
         <h2>29. Mai - 01. Juni 2009</h2>
      </a>
      <div class="statistik">
         <table width="100%">
            <tbody>
               <tr>
                  <td title="0 Aufrufe" valign="top" width="33%">
                      <img src="gfx/hp/cms/aufrufe.png" height="16px"> 0
                 </td>
                 <td title="0 Bilder" valign="top" width="33%">
                      <img src="gfx/hp/cms/bilder.png" height="16px"> 0
                 </td>
                 <td title="0 Kommentare" valign="top" width="33%">
                      <img src="gfx/hp/cms/kommentar.png" height="16px"> 0
                 </td>
             </tr>
          </tbody>
      </table>
   </div>
</div>

<div class="eventbox">
...
</div>

</div>


Der entsprechende CSS-Code:

Code: Alles auswählen

         .eventbox {
            float: left;
            width: 215px;
            margin: 40px 20px 0px 0px;
            padding-bottom: 5px;
            background-color: #ffffff;
            }
            
            .intronews {
               width: 215px;
               height: 105px;
               background-image: url('../pics/newsstartbilder/blanko.jpg');
               }
            
            .group {
               padding: 5px;
               text-align: right;
               }
            
            .eventbox a {
               }
               
            .eventbox a h1 {
               padding: 0px 5px;
               font-size: 16px;
               color: #666666;
               color: #ff0033;
               }
            
            .eventbox a:hover h1{
               color: #ff0033;
               }
               
            .eventbox a h2 {
               padding: 0px 5px;
               font-size: 14px;
               color: #666666;
               }
            
            .eventbox a:hover h2{
               color: #ff0033;
               }
               
            .statistik {
               padding: 5px 5px 0px 5px;
               color: #53B5FF;
               font-weight: bold;
               font-size: 17px;
               }
               
               .statistik img {
                  float: left;
                  padding: 3px 5px 0px 0px;
                  }



Wäre für Eure Hilfe dankbar, denn ich weiß wirklich nicht, wo ich da ansetzen muss...