Listemenü IE/Firefox Problem

[josDesign]

Hallo ich habe eine kleine Teaseransicht für Termine auf der Startseite.
Folgender Code:

<!--  CONTENT ELEMENT, uid:76/list [begin] -->

		<a name="anker76" id="anker76"></a>
		<!--  Plugin inserted: [begin] -->
			


	<!--

		BEGIN: Content of extension "ke_yac", plugin "tx_keyac_pi1"

	-->
	<div class="tx-keyac-pi1">
		<div class="cal-teaser">
					<div class="header">Unsere nächsten Termine</div><ul><li><a href="no_cache/termine/kalender/start/parkfest-der-ff-krumbach.html"><span class="wann">12.08.2007 14:00</span><br /><span class="wo">Krumbach i.d. Buckligen Welt</span><br /><span class="was">Parkfest der FF Krumbach</a></li><li><a href="no_cache/termine/kalender/start/burschen-kirtag.html"><span class="wann">01.09.2007</span><br /><span class="wo">7021 Draßburg</span><br /><span class="was">Burschen-Kirtag</a></li><li><a href="no_cache/termine/kalender/start/harmonika-musikantentreffen.html"><span class="wann">30.09.2007</span><br /><span class="wo">2851 Krumbach / Museumsdorf</span><br /><span class="was">Harmonika & Musikantentreffen</a></li></ul></div>

	</div>
	
	<!-- END: Content of extension "ke_yac", plugin "tx_keyac_pi1" -->

	
		<!--  Plugin inserted: [end] -->
			
	<!--  CONTENT ELEMENT, uid:76/list [end] -->

Die CSS-Definitionen:

		/* Kalender - TeaserView  */
		.tx-keyac-pi1 .cal-teaser {
			border:0px solid #f3c107;
			width:180px;
			line-height:1.2;
			padding-bottom:0.3em;
		}
		.tx-keyac-pi1 .cal-teaser .header {
			display:block;
			color:#f3c107;
			vertical-align:middle;
			background-image:url(images/icon-rot-gr.gif);
			background-position: right center;
			background-repeat:no-repeat;
			font-weight:bold;
                        line-height:1.6em;
			font-size:1em;
                        letter-spacing:0.07em;
			height:1.7em;
			padding-left:0.6em;
			margin-bottom:0.1em;
		}
                div.tx-keyac-pi1 div.cal-teaser ul li {
                        list-style-image: url(http://www.krumbacher-spitzbuam.at/fileadmin/grafiken/listenNote2keineTrans.png);
                        padding-bottom:3px;
                        border-bottom: 1px dotted #f3c107;
                }
                div.tx-keyac-pi1 div.cal-teaser ul {
                        padding-left:25px;
                }
                .tx-keyac-pi1 .cal-teaser ul li a .wann { color:yellow; letter-spacing:0.05em; font-size:0.9em; font-weight:bold;}
                .tx-keyac-pi1 .cal-teaser ul li a .wo { color:yellow; font-weight:normal; font-size:0.8em; line-height:1.6em;}
                .tx-keyac-pi1 .cal-teaser ul li a .was { color:#f3c107; letter-spacing:0.03em;}

		.tx-keyac-pi1 .cal-teaser a:link,
		.tx-keyac-pi1 .cal-teaser a:visited {
			text-decoration:none;
                        font-weight:normal;
		}

Problem:
Screenshot

FRAGE:
An welchen Definitionen liegt es, dass es im IE so anders angezeigt wird?
Ich habe schon gesucht, jedoch nichts gefunden.

Vielleicht hat jemand einen tipp? mit bestem Dank im Voraus,
jos

 

[maeTimmae]

div.tx-keyac-pi1 div.cal-teaser ul {
 padding-left:25px;
}

An dieser Stelle würde ich das Padding generell festlegen, und nicht nur eine Seite. Zweiter Punkt wäre dann eine uniforme Definition des Außenabstands (margin: 0) oder was in der Art. Der nächst Punkt, der mir in Vergangenheit immer ein paar Probleme geschaffen hat, war das relative Maß "em". Pixelmaß wollen Mozilla und MSIE < 7.0 nicht so schön skalieren, aber sollte dennoch ein einheitlicheres Ergebnis liefern.

Eh ich es vergesse: Der MSIE hat immer so seine Probleme mit Margin, Padding & Border - Da wird man schnell fündig unter dem Begriff "Boxmodell", dächte ich.

Und dann noch eine Anmerkung: Für alle Werte, die nicht gesetzt werden, verwenden die Browser ihre Standardeigenschaften. Diese variieren recht häufig von Browser zu Browser. Wo der eine einen Außenabstand von 12px einsetzt, verwendet ein anderer eventuell 32px. Einige CSS-Deklarationen sehe ich als sinnfremd - Die können eventuell durch passende Festlegungen ersetzt werden

Die ganzen 0.12em Angaben sind (eventuell) übertriebene Profiangaben, die man so seltenst brauchen wird. Sinnvoller wäre zB

ul {
 margin: 0 12px;
 padding: 0;
}
ul li {
 margin: 0;
 padding: 0;
}
div.tx-keyac-pi1 div.cal-teaser ul {
 padding-left: 25px; /* für Oben, Rechts und Unten wird nun der Standardwert '0' eingesetzt - Eine Überschreibung via padding: 0 0 0 25px; lohnt sich also nicht mehr */
}

Das sind nur Beispiele. Um das ein wenig professioneller anzugehen, fehlen mir die restlichen CSS Definitionen

Und weil es mir gerade noch auffällt: Der MSIE unterstützt border-style: dotted; erst ab einer Rahmenbreite von 2px. Vorher wird die Linie als dashed dargestellt, wenn ich mich recht entsinne

 

[Maik]

Hi,

du musst einfach noch den vom Browser voreingestellten Außenabstand für das Listenelement auf null setzen:

div.tx-keyac-pi1 div.cal-teaser ul {
                        margin:0;
                        padding-left:25px;
                }

 

[josDesign]

Vielen herzlichen Dank! Das Margin alleine hat es gebracht. Das Boxmodell-problem weis ich eh auch, bin auch gerade dabei ein CSS-Buch zu lesen. Hatte nicht gewusst das dies auch so bei Listen ist.

Vielen Dank und einen schönen Tag wünsche ich noch!

PS: Welches CSS-Buch bringt sich wirklich was zu lesen? Ich lese derzeit ein YAML-Buch.