✔ Css Problem in der Darstellung manchmal

[Ch]

Hallo,
ich habe wieder mal ein Problem mit CSS. Irgendwie wird das css entweder nicht komplett geladen, oder ich habe einen Fehler. Es ist sehr merkwürdig, mal wird es richtig angezeigt und nur manchmal nicht. Siehe dazu die Grafiken. Kann mir jemand sagen wo der Fehler ist?

Danke



Hier das zugehörige CSS

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#archiv{
   background:#fff;
   margin:4px;
   border:1px solid #266591;
   font: small-caps bold 11px arial, verdana, sans-serif;
}
#archiv .head_center{
   line-height: 25px;
   border-bottom: 1px solid #205888;
   margin: 0px 5px 4px 5px;
   color: #205888;
   text-align:center;
}
#archiv .head_left{
   float:left
}
#archiv .head_right{
   float:right
}
#archiv .m_line_top{
   padding:0px 4px 0px 4px;
}
#archiv .m_line_middle{
   padding:0px 4px 0px 4px;
}
#archiv .m_line_bottom{
   padding:0px 4px 4px 4px;
}
#archiv .m_line_out{
   float:left;
   width:45px;
   height:45px;
   border:1px solid #ddd;
   margin:4px;
}
#archiv .m_line_in_top{
  text-align:right;
  margin:3px;
}
#archiv .m_line_in_bottom{
  margin:3px;
  margin-top:10px;
}
#archiv a {    
   text-decoration:none;
	color: #000;
}
#archiv a:hover {
    background: url(img/archiv_btn.png);
	background-position: bottom;
	color: #FFF;
}
#archiv a:active {
    background: url(img/archiv_btn.png);
	background-position: center;
	color: #403114;
}
#archiv .actived {
    background: url(img/archiv_btn.png);
	background-position: top;
	color: #FFF;
}

und hier der HTML Code

<div id="archiv">
		   <div class="head_center"><div class="head_left">?</div><div class="head_right">?</div><b>2009</b></div>
		   <div class="clearfix m_line_top">
		   <a href="#" class="m_line_out"><div class="m_line_in_top">1</div><div class="m_line_in_bottom">Jan</div></a>
		   <a href="#" class="m_line_out actived"><div class="m_line_in_top">2</div><div class="m_line_in_bottom">Feb</div></a>
		   <a href="#" class="m_line_out"><div class="m_line_in_top">3</div><div class="m_line_in_bottom">Mar</div></a>
		   <a href="#" class="m_line_out"><div class="m_line_in_top">4</div><div class="m_line_in_bottom">Apr</div></a>
		   </div>
		   <div class="clearfix m_line_middle">
		   <a href="#" class="m_line_out"><div class="m_line_in_top">5</div><div class="m_line_in_bottom">Mai</div></a>
		   <a href="#" class="m_line_out"><div class="m_line_in_top">6</div><div class="m_line_in_bottom">Jun</div></a>
		   <a href="#" class="m_line_out"><div class="m_line_in_top">7</div><div class="m_line_in_bottom">Jul</div></a>
		   <a href="#" class="m_line_out"><div class="m_line_in_top">8</div><div class="m_line_in_bottom">Aug</div></a>
		   </div>
		   <div class="clearfix m_line_bottom">
		   <a href="#" class="m_line_out"><div class="m_line_in_top">9</div><div class="m_line_in_bottom">Sep</div></a>
		   <a href="#" class="m_line_out"><div class="m_line_in_top">10</div><div class="m_line_in_bottom">Okt</div></a>
		   <a href="#" class="m_line_out"><div class="m_line_in_top">11</div><div class="m_line_in_bottom">Nov</div></a>
		   <a href="#" class="m_line_out"><div class="m_line_in_top">12</div><div class="m_line_in_bottom">Dez</div></a>
		   </div>
		</div>

 

[Maik]

Hi,

im CSS-Code kann ich keinen Fehler ausmachen, was mir der CSS-Validator auch bestätigt.

Dafür solltest du mal als erste Gegenmaßnahme deinen HTML-Code validieren, denn Inline-Elemente (= <a>) dürfen gemäß der HTML-Elementreferenz keine Block-Elemente (= <div>) enthalten.

mfg Maik

 

[Ch]

Danke Maik,
ab Version 3.0 soll es aber gehen mit den Blockelementen. Theoretisch könnte ich den link auch ein "display:inline-block;" mitgeben. Oder spricht was dagegen? Ich wollte bewußt ein <a> einsetzen und auf ein blockelement dem ich ein Klickevent mitgebe verzichten.

 

[Maik]

Von welcher "Version 3.0" sprichst du?

Ich rede hier nicht von CSS3, falls du darauf hinaus willst, sondern von HTML / XHTML - siehe Inline-Elemente.

Den Einsatz von inline-block würde ich derzeit noch mit Vorsicht genießen, da die Eigenschaft nur von den aktuellen Browsergenerationen (FF3.5.x, IE8, Opera 10.10, Safari, usw.) gemäß der CSS-Spezifikation interpretiert wird.

Ältere Versionen (wie z.B. FF2.x, IE6 u. IE7) behandeln das so formatierte Element als reines Blockelement, das einen Absatz im Textfluß erzeugt.

mfg Maik

 

[Ch]

Weiß nicht mehr genau ob Version 3.... Hatte mal in der CT gelesen das bald z.B. inline elemente um <H1> möglich sind. siehst du denn eine Möglichkeit es anders zu machen?

 

[Maik]

Du kannst innerhalb der <a>-Elemente die <div>-Elemente gegen <span> austauschen, und diesen mittels CSS "Block-Level-Charakteristika" verleihen, sei's mit display:block, oder einer float-Deklaration, damit sie Boxmodell-Eigenschaften annehmen.

mfg Maik

 

[Ch]

Verstehe ich jetzt nicht..... Habe ich dann nicht das selbe Problem?

 

[Maik]

Probier's doch einfach aus, wie die Browser mit einem validen Markup umgehen.

Ich verstehe sowieso nicht, wieso das Problem nur manchmal in Erscheinung tritt.

1. Wann ist manchmal?
2. In welchem Browser tritt das Problem manchmal auf?

In allen gängigen Browsern, die nicht aus Redmond stammen, kann ich den vermeintlichen Darstellungsfehler nicht produzieren, auch nicht zwischendurch manchmal.

Ich weiß ja nicht, ob da noch ein separates Stylesheet für die IE-Familie existiert, denn die .clearfix-Klasse ist aus Sicht des IE6 und IE7 unvollständig, und führt in beiden zu einer absoluten Fehldarstellung, die selbst von deinem ersten Schnappschuß (*-falsch.png) meilenweit entfernt ist.

Kannst du vielleicht mal einen Link zur Online-Version nennen, damit man dort einen Blick drauf werfen kann, und evtl. in den Genuß des Darstellungsproblems kommt?

mfg Maik

 

[Ch]

Der Fehler tritt bei Firefox auf. Habe dir eine PM geschickt.

 

[Maik]

Ich hab auf meinem System FF in den Versionen "2.0.0.20" und "3.5.5" vorrätig, und beide zeigen den Kalender fehlerfrei an.

Bleibt die Frage offen, wann konkret "manchmal" ist.

Die rechte Spalte ist ja fix, und behält ihre Breite, wenn die Fensterbreite runter skaliert wird, also wann genau zerteilt sich bei dir der letzte Monat in zwei weitere Boxen für die Monatszahl und den Monatsnamen?

mfg Maik