nicht angemeldet
Listen mit "float" im Internet Explorer
Hallo,
wahrscheinlich seh ich den Wald vor lauter Bäumen nicht.
Ich habe einer Liste ein icon zugewiesen:
ul {list-style-image:url(img/list_icon.gif);}
Da ich die Liste waagerecht als Menü einsetzen will habe ich nun die Listenelemente gefloatet:
li {float: left;}
Der Firefox zeigt mir das an was ich erwarte:
Der Internet Explorer hingegen zeigt die Icons nicht an:
Was habe ich nicht beachtet, vergessen, übersehen?
Kann mir jemand einen Schupps in die richtige Richtung geben?
Danke
Ole
(8-)>
PS: Wenn ihr meint, der gesamte Quelltext wäre interessant (der Übersicht halber CSS und HTmL getrennt:
CSS
body {margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif;}
.canvas {margin: auto; width: 730px; position:relative;}
div.n_can {width: 179px;}
div.aussen {padding: 2px; background-color: #ADB0B5;}
div h2 {border: 1px solid #fff; font-size: 12px; padding: 1px 4px 1px 4px; margin: 0; font-weight: normal; background: url(img/icon.gif) center right no-repeat;}
span {font-weight: bold;}
h3 {margin: 0; padding: 2px 4px 2px 4px; font-size: 11px; font-weight: normal;}
h3.ort {float: left; border-left: 1px dashed #ADB0B5; color: #0000FF;}
h3.preis {text-align: right; border-right: 1px dashed #ccc; color: #666;}
h3.preis span {color: red;}
p.n_cont {border-left: 1px dashed #ADB0B5; border-right: 1px dashed #ADB0B5; margin: 0; font-size: 11px; padding: 2px 4px 6px 4px; clear:both;}
img.teaser {padding: 2px 5px 2px 5px; border-left: 1px dashed #ccc; border-right: 1px dashed #ccc;}
img.haus {margin-bottom: 1px;}
div.trenner {line-height: 8px; background-color: #bbb; margin-bottom: 1px;}
div.trenner2 {line-height: 1px; margin-bottom: 1px; border-top: 5px solid #AAA6FF; border-bottom: 4px solid #ADB0B5;}
div.header {line-height: 86px; border-top: 2px solid #AAA6FF; border-bottom: 1px solid #ADB0B5; margin-bottom: 1px; background:url(img/logo.gif) left center no-repeat;}
div.haus {margin-left: 182px; position: absolute; top: 43px;}
div.m_menu {border-top: 4px solid #ADB0B5; border-bottom: 2px solid #AAA6FF; height: 20px; width: 548px;}
div.m_menu ul {list-style-image:url(img/list_icon.gif); font-size: 12px; font-weight: bold; letter-spacing: 1px; margin: 0 0 0 15px; padding: 0; line-height: 20px;}
div.m_menu ul li {float: left; padding: 0 20px 0 0; margin: 0 0 0 10px; }
==================================================
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
</style>
</head>
<body>
<div class="canvas">
<div class="trenner"> </div>
<div class="header"> </div>
<div class="trenner2"> </div>
<div class="haus">
<img src="img/haus_bg.jpg" class="haus" alt="" />
<div class="m_menu">
<ul>
<li>ÜBER UNS</li>
<li>SERVICE</li>
<li>ANGEBOTE</li>
<li>ANFRAGEN</li>
<li>VERMIETUNGEN</li>
</ul>
</div>
</div>
<div class="n_can">
<div class="aussen">
<h2><span>Häuser</span> zum Kauf</h2>
</div>
<img src="img/teaser.jpg" class="teaser" alt="" />
<h3 class="ort">Langenberg</h3>
<h3 class="preis">Preis: <span>123.000 €</span></h3>
<p class="n_cont">
oöifsd sdijf jfsdiojfsdj fiosdjfiopsjfsipjsdp fjpsifjpsdi
</p>
</div>
<div class="n_can">
<div class="aussen">
<h2><span>Wohnungen</span> zum Kauf</h2>
</div>
<img src="img/teaser.jpg" class="teaser" alt="" />
<h3 class="ort">Langenberg</h3>
<h3 class="preis">Preis: <span>123.000 €</span></h3>
<p class="n_cont">
oöifsd sdijf jfsdiojfsdj fiosdjfiopsjfsipjsdp fjpsifjpsdi
</p>
</div>
<div class="n_can">
<div class="aussen">
<h2><span>Grundstücke</span> zum Kauf</h2>
</div>
<img src="img/teaser.jpg" class="teaser" alt="" />
<h3 class="ort">Langenberg</h3>
<h3 class="preis">Preis: <span>123.000 €</span></h3>
<p class="n_cont">
oöifsd sdijf jfsdiojfsdj fiosdjfiopsjfsipjsdp fjpsifjpsdi
</p>
</div>
<div class="n_can">
<div class="aussen">
<h2><span>Gewerbeobjekte</span> zum Kauf</h2>
</div>
<img src="img/teaser.jpg" class="teaser" alt="" />
<h3 class="ort">Langenberg</h3>
<h3 class="preis">Preis: <span>123.000 €</span></h3>
<p class="n_cont">
oöifsd sdijf jfsdiojfsdj fiosdjfiopsjfsipjsdp fjpsifjpsdi
</p>
</div>
</div>
</body>
</html>
--
Stickstoff eignet sich nicht für Handarbeiten.
Stickstoff eignet sich nicht für Handarbeiten.
-
Hellihello
vielleicht fehlt dem IE ein margin-left, dass die Element soweit auseinanderzieht, dass das Auflistungszeichen zu sehen ist?
frankx
-
hallo frankx,
Wenn ich in diesen beiden Zeilen Margi und/oder Padding verändere, bekommt ich trotzdem keine Icons angezeigt.
div.m_menu ul {list-style-image:url(img/list_icon.gif); font-size: 12px; font-weight: bold; letter-spacing: 1px; margin: 0 0 0 15px; padding: 0; line-height: 20px;} div.m_menu ul li {float: left; padding: 0 20px 0 0; margin: 0 0 0 10px; }Danke
Ole
(8-)>--
Stickstoff eignet sich nicht für Handarbeiten.-
Hellihello
na und siehst was, wenn du das float weglässt. teste doch mal von einfach bis kompliziert durch, indem du immer eine baustein dazunimmst...;
frankx
-
hi frankx
soblad ich das float einfüge sind die icons weg. das minimum an code wäre:
div.m_menu ul {list-style-image:url(img/list_icon.gif);} div.m_menu ul li {float: left;}schon da funktioniert es nicht.
Danke
Ole
(8-)>--
Stickstoff eignet sich nicht für Handarbeiten.-
Hoi
Lass das list-style-image ganz weg und nimm stattdessen ein Hintergrundbild für das li-Tag, dazu noch ein padding-left und du solltest den gleichen Effekt mit weniger Aufwand haben.
Gruß Ben
-
hi Ben
ein Workaround den ich auch einsetze, da es anders scheinbar nicht funktioniert. Allerdings nicht umbedingt im Sinne des Erfinders (wie man so schön sagt :)).
Danke
Ole
(8-)>--
Stickstoff eignet sich nicht für Handarbeiten.-
Hellihello
wenn man eine border um die listelemente macht, sieht man, dass ff und opera das list-style-element inside darstellen, nicht aber die ie; auch mit list-style-element:inside bekomme ich ihn nicht dazu...;
frankx
-
Hellihello
is mich zu kompliziert: http://www.brunildo.org/test/IEul1.html; aber wohl ein bug. machste den list ohne width, zeigts der ie inside an, aber beim float ist wieder alles wech...;
frankx
-
Hi.
Vielleicht findest du hier noch was Nützliches zu float und CSS Listen Internet Explorer
Gruß
CurtB
-
-
-
-
-
-
-