IE Problem: Kein Zeilenumbruch bei Farbfeldern mit PHPTAL

[apollox]

Hi Leute,
ich bin derzeit dabei einen Webshop auf XHTML 1.1 zu validieren, was soweit auch fertig ist. Jedoch habe ich beim prüfen ob noch alles korrekt im IE 8 und 9 angezeigt wird, festgestellt das dort in der seitlichen Navibar, welche über eine feste Breite verfügt, die Anzeige für den einen Filter nicht mehr funktioniert.
Der Filter filtert die Ergebnisse nach Farben und zeigt die Farben als Kacheln an, im Firefox und Chrome werden die Farbkacheln automatisch in der Zeile umgebrochen, wenn die Navibar Breite erreicht wurde (siehe folgendes Bild).
http://www.imagebanana.com/view/ljrx11oa/farbe_firefox.jpg
Im Internet Explorer, sowohl im 8er, als auch 9er nicht.
http://www.imagebanana.com/view/qorvxo9e/farbe_internet_explorer.jpg

Das seltsame an dem ganzen ist, das ich beim validieren in dem Bereich nichts angepasst habe.

Hier mal der Quelltext vor dem parsen:

<div id="color" class="filter">
	<span class="label">
		<tal:block i18n:translate="">COLOR</tal:block>
	</span>
	<div class="criteria">
			<tal:block tal:define="global colCount php: ceil(count(colors)/2)"></tal:block>
				<tal:block tal:repeat="color colors">
						<input name="color" type="radio" value="${color/color_main_id}" tal:attributes="checked color/checked;"	id="clr_ck_${color/color_main_id}"  class="CheckBoxPanels" onchange="submit()" />
						<label for="clr_ck_${color/color_main_id}" tal:attributes="class php: color['checked']?'LabelUns LabelSelected':'LabelUns LabelSelectedDisabled'">
							<tal:block tal:condition="php: lang=='en'">
								<span style="background-color:#${color/color_main_hex};" title="${color/color_main_name_en} (${color/number_of_elements})" class="color"></span>
							</tal:block>
							<tal:block tal:condition="php: lang=='de'">
								<span style="background-color:#${color/color_main_hex};" title="${color/color_main_name_de} (${color/number_of_elements})" class="color"></span>
							</tal:block>
						</label>

				</tal:block>
				<input style="clear:both;" name="color" type="radio" value="reset" 	id="clr_ck_reset" tal:attributes="checked allColorsSelected;" class="CheckBoxPanels" onchange="submit()" />
				<label for="clr_ck_reset"  tal:attributes="class php: allColorsSelected?'LabelUns LabelSelected':'LabelUns LabelSelectedDisabled'"><tal:block i18n:translate="">All colors</tal:block></label>
	</div>
</div>

Und hier der des Internet Explorer vom anzeigen:

<div class="filter" id="color">
	<span class="label">FARBE</span>								
	<div class="criteria">
		<input name="color" class="CheckBoxPanels" id="clr_ck_5" onchange="submit()" type="radio" value="5" />
		<label class="LabelUns LabelSelectedDisabled" for="clr_ck_5">
			<span title="Orange (3)" class="color" style="background-color: rgb(255, 145, 0);"></span>
		</label>
		...
	</div>
</div>

Ich selbst habe absolut keinen Schimmer warum das plötzlich so ist und daher auch keine wirkliche Idee, wie man das beheben kann. Muss aber dazu sagen, das ich im Bereich von XHTML, PHP + PHPTAL noch Anfänger bin und mich daher nicht so gut auskenne.

Meine Hoffnung ist, das Ihr mir hier tatkräftig weiterhelfen könnt um das Problem zu lösen. Falls Ihr noch weitere Infos braucht, dann versuch ich euch diese so gut es geht zu geben.

Vielen Dank!

Gruß
apollox

 

[CPoly]

Um das zu beurteilen brauchen wir auch das CSS, mindestens die Regeln für die Klasse "color" und die ID "color".

 

[apollox]

Ok, hier sind dann mal die CSS Regeln, hoffe das ich nichts übersehen habe.

#color .arrow	{	background-color: #7FD7E5;	}

.filter .criteria
{
	overflow: hidden;
	line-height: 15px;
	padding: 6px 6px 3px 5px;
	font-size: 11px;
	color: #777;
	font-family: verdana;
	font-size: 10px;
	text-transform: capitalize;
	margin: 0 2px 0px 0px;
	background: #EAEAEA;
	border: 1px solid #DDD;
	border-top: none;
	position: relative;
	top: -1px;
	left: 1px;
	-webkit-border-radius: 0 0 6px 6px;
	-moz-border-radius:0 0 6px 6px;
	border-radius: 0 0 6px 6px;
}

label.LabelUns .color
{
	width:18px;
	height:18px;
	display: inline-block;
	margin-right: 3px;
	margin-left: 2px;
	top: 5px;
	cursor: pointer;
}

label.LabelSelected .color
{
	border: 1px solid black;
}

label.LabelSelectedDisabled .color
{
	border: 1px solid transparent;
}

label.LabelSelectedDisabled
{
	filter: alpha(opacity:0.4);
	MozOpacity: 0.4;
	-ms-filter:â****alpha(opacity=40)â****;
	-moz-opacity:.4;
	filter:alpha(opacity=40);
	opacity:.4;
}