li ul Problem im Internet Explorer

[counter18]

Hi,
bin wieder mal auf ein Problem gestoßen beim Internet Explorer. Brauche Listen in meiner Seite. Wollte das dort ein Viereck als Listensymbol davor gezeigt wird. Im Firefox wird das Symbol angezeigt, im Internet Explorer nicht. Hier die CSS:

body {
	background-color:#999999;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:200;
	}
#page {
	width: 820px;
	position:absolute;
	margin-left: -410px;
	top:0;
	left:50%;
	background-image:url(../grafik/background.jpg);
	background-repeat:repeat-y;
	margin-bottom:-2px;
}
#page_2 {
	width: 800px;
	position:absolute;
	top:0;
	left:0;
	float: left;
	padding-left:10px;
}
#top {
	width: 100%;
	height: 202px;
	background-image:url(../grafik/banner.jpg);
	background-repeat:no-repeat;
	width:798px;
	margin-left:11px;
}
.tooltip {
	position: absolute;
	display: none;
	background-color: #FFFFFF;
}
	#haaslink {
		background-image:url(../grafik/hp_haasgrid_180607_r1_c6.jpg);
		background-repeat:no-repeat;
		width: 222px;
		height: 29px;
		margin-left: 522px;
	}
	#navi {
		width: 798px;
		height: 54px;
		background-image:url(../grafik/r3_c1.jpg);
		background-repeat:repeat-x;
		clear: left;
		position: absolute;
		top: 147px;
	}
	#links {
		margin: 9px 5px 5px 15px;
		font-weight:bold;
		color:#FFFFFF;
		font-size:14px;
	}
#content {
	padding: 1px 5px 5px 15px;
	width: 795px;
	min-height:300px;
}
#footer {
	margin-left: 10px;
	width: 799px;
	height: 65px;
	background-image:url(../grafik/footer.jpg);
	background-position:bottom;
	background-repeat:no-repeat;
	vertical-align:baseline;
	clear:both;
	
	
}
	#agrifarm_link {
		float: left;
		margin-left: 2px;
		margin-top: 2px;
		height: 60px;
	}
	#pferdesport_link {
		margin-left: -9px;
		margin-top: 2px;
		float: left;
		height: 60px;
	}
	#allzweckhallen_link {
		margin-left: 160px;
		margin-top: 2px;
		float: left;
		height: 60px;
	}

/*Links*/
a, a:link, a:hover, a:visited {
	color:#FFFFFF;
	font-weight:bold;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
a:hover {
	text-decoration:none;
	color: #F1FFB5;
}
ul {
  margin: 0;
  padding: 0;
  font-size:13px;
  font-weight:200;
  text-align:left;
  list-style:square;
}

ul#nav li ul {
	display: none;
}

ul#nav li:hover ul {
	display:inline;
	color:#0000FF;
}

ul#nav li a {
  font-weight: bold;
}

/*Überschriften*/
h1, h2, h3, h4 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin: 3px 3px 5px 0px;
}
h1 {
	color: #990000;
	font-size:16px;
}
h2 {
	color:#0000FF;
	font-size:14px;
}
h3 {
	color: #FFFFFF;
	font-size: 14px;
}
h4 {
	font-size:12px;
	color:#990000;
}

img, .left, .right {
	margin: 3px 3px 5px 3px;
}
.left {
	float: left;
}
.right {
	float: right;
	margin-right: 13px;
}

ul.list {
	color:#000000;
	float: left;
	width: 47%;
	list-style-type:square;
}
ul.list {
	margin-bottom: 15px;
	margin-right: 7px;
	margin-left: 3px;
	list-style-type:square;
}
li.list, .list_ohne {
	width:80%;
	float: left;
	margin-left: 15px;
	display:list-item;	
	list-style-type:square;
	list-style:outside;
	color:#000000;
	margin-bottom: 2px;
}
.list_ohne {
	margin-left: 0px;
	list-style: none;
	color: #000000;
}
.schritte {
	list-style:decimal;
	color:#000000;
}
li.schritte {
	margin-left:-15px;
} 
.haasgrid {
	color:#990000;
	font-weight:500;
}
#balken, .balken_kl {
	background-image:url(../grafik/balken.jpg); 
	background-repeat:repeat-x; 
	height:50px; 
	width:778px; 
	clear: both; 
	margin: 100px 0 5px -4px; 
	padding: 10px; 
	text-align:center; 
	font-size:16px;
}
.balken_kl {
	vertical-align:middle;
	background-image:url(../grafik/balken_3.jpg); 
	width: 100%;
	height: 30px;
	margin: 10px 0 10px 10px;
	text-align:left;
	border-top: 2px solid #A39D4F;
	border-bottom: 2px solid #A39D4F;
	border-left: 2px solid #A39D4F;
}
.zwei_spalten, .drei_spalten {
	float: left;
	width: 50%;
}
.drei_spalten {
	width: 32%;
	margin-left: 10px;
}

So sieht es aus:


Woran liegt das?

[Nightline]

Zeig mal den HTML-Teil mit der Liste.

[counter18]

Hier der Listenteil:

<div style="width:100%; font-size:14px;">
	<h4>Die I:</h4>
	<div class="drei_spalten">
		<ul>
			<li class="list">bla</li>
			<li class="list">bla</li>
			<li class="list">bla</li>
			<li class="list">bla</li>
		</ul>
	</div>
	<div class="drei_spalten">
		<ul>
			<li class="list">bla</li>
			<li class="list">bla</li>
			<li class="list">bla</li>
			<li class="list">bla</li>
		</ul>
	</div>
	<div class="drei_spalten">
		<ul>
			<li class="list">bla</li>
			<li class="list">bla</li>
			<li class="list">Fbla</li>
			<li class="list">bla</li>
		</ul>
	</div>

Oder von den Beispielen:

<ul class="list">
	<li style="list-style: none"><h1>Die Eigenschaften:</h1></li>
	<li class="list">ru</li>
	<li class="list">UV- u</li>
	<li class="list">amm</li>
	<li class="list">bru</li>
	<li class="list">inte</li>
	<li class="list">ger</li>
	<li class="list">ho</li>
	<li class="list">um</li>
	<li class="list">re</li>
</ul>

[hero-master]

Hi
gib dem list-style noch ein inside dazu:

list-style:square inside;

[counter18]

Hab die CSS folgendermaßen geändert:

body {
	background-color:#999999;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:200;
	}
#page {
	width: 820px;
	position:absolute;
	margin-left: -410px;
	top:0;
	left:50%;
	background-image:url(../grafik/background.jpg);
	background-repeat:repeat-y;
	margin-bottom:-2px;
}
#page_2 {
	width: 800px;
	position:absolute;
	top:0;
	left:0;
	float: left;
	padding-left:10px;
}
#top {
	width: 100%;
	height: 202px;
	background-image:url(../grafik/banner.jpg);
	background-repeat:no-repeat;
	width:798px;
	margin-left:11px;
}
.tooltip {
	position: absolute;
	display: none;
	background-color: #FFFFFF;
}
	#haaslink {
		background-image:url(../grafik/r1_c6.jpg);
		background-repeat:no-repeat;
		width: 222px;
		height: 29px;
		margin-left: 522px;
	}
	#navi {
		width: 798px;
		height: 54px;
		background-image:url(../grafik/r3_c1.jpg);
		background-repeat:repeat-x;
		clear: left;
		position: absolute;
		top: 147px;
	}
	#links {
		margin: 9px 5px 5px 15px;
		font-weight:bold;
		color:#FFFFFF;
		font-size:14px;
	}
#content {
	padding: 1px 5px 5px 15px;
	width: 795px;
	min-height:300px;
}
#footer {
	margin-left: 10px;
	width: 799px;
	height: 65px;
	background-image:url(../grafik/footer.jpg);
	background-position:bottom;
	background-repeat:no-repeat;
	vertical-align:baseline;
	clear:both;
	
	
}
	#agrifarm_link {
		float: left;
		margin-left: 2px;
		margin-top: 2px;
		height: 60px;
	}
	#pferdesport_link {
		margin-left: -9px;
		margin-top: 2px;
		float: left;
		height: 60px;
	}
	#allzweckhallen_link {
		margin-left: 160px;
		margin-top: 2px;
		float: left;
		height: 60px;
	}

/*Links*/
a, a:link, a:hover, a:visited {
	color:#FFFFFF;
	font-weight:bold;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
a:hover {
	text-decoration:none;
	color: #F1FFB5;
}
ul {
  margin: 0;
  padding: 0;
  font-size:13px;
  font-weight:200;
  text-align:left;
  list-style:square inside;
}

ul#nav li ul {
	display: none;
}

ul#nav li:hover ul {
	display:inline;
	color:#0000FF;
}

ul#nav li a {
  font-weight: bold;
}

/*Überschriften*/
h1, h2, h3, h4 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin: 3px 3px 5px 0px;
}
h1 {
	color: #990000;
	font-size:16px;
}
h2 {
	color:#0000FF;
	font-size:14px;
}
h3 {
	color: #FFFFFF;
	font-size: 14px;
}
h4 {
	font-size:12px;
	color:#990000;
}

img, .left, .right {
	margin: 3px 3px 5px 3px;
}
.left {
	float: left;
}
.right {
	float: right;
	margin-right: 13px;
}

ul.list {
	color:#000000;
	float: left;
	width: 47%;
	list-style:square inside;
}
ul.list {
	margin-bottom: 15px;
	margin-right: 7px;
	margin-left: 3px;
	list-style:square inside;
}
li.list, .list_ohne {
	width:90%;
	float: left;
	margin-left: 15px;
	display:list-item;	
	list-style:square inside;
	color:#000000;
	margin-bottom: 2px;
}
.list_ohne {
	margin-left: 0px;
	list-style: none;
	color: #000000;
}
.schritte {
	list-style:decimal;
	color:#000000;
}
li.schritte {
	margin-left:-15px;
} 
.haasgrid {
	color:#990000;
	font-weight:500;
}
#balken, .balken_kl {
	background-image:url(../grafik/balken.jpg); 
	background-repeat:repeat-x; 
	height:50px; 
	width:778px; 
	clear: both; 
	margin: 100px 0 5px -4px; 
	padding: 10px; 
	text-align:center; 
	font-size:16px;
}
.balken_kl {
	vertical-align:middle;
	background-image:url(../grafik/balken_3.jpg); 
	width: 100%;
	height: 30px;
	margin: 10px 0 10px 10px;
	text-align:left;
	border-top: 2px solid #A39D4F;
	border-bottom: 2px solid #A39D4F;
	border-left: 2px solid #A39D4F;
}
.zwei_spalten, .drei_spalten {
	float: left;
	width: 50%;
}
.drei_spalten {
	width: 32%;
	margin-left: 10px;
}

Leider hat sich im IE nichts geändert.

[hero-master]

Hi counter,
das Problem liegt wohl an den gefloateten Listenpunkte. Wie du den Bug hier direkt umgehen kannst, kann ich dir leider nicht sagen, aber ich schalg dir ne gute Alternative vor:
Verwende den Listenpunkt als Hintergrundbild für deine Listenpunkte

[counter18]

Meinst du ein list-style-image: oder ein background-image?

[hero-master]

Meinst du ein list-style-image: oder ein background-image?

background-images