nicht angemeldet
Liste mit float: left formatiert - keine Listenzeichen im IE
Hallo zusammen,
nachdem ich jetzt vergeblich sämtliche Forenarchive durchsucht habe, muss ich leider doch ein neues Thema aufmachen:
Ich habe eine unsortierte Liste via CSS mit der Eigenschaft 'float:left' formatiert. Weiterhin habe ich die Option 'list-style-type:square' gewählt.
Mein Problem: sobald ich 'float' verwende, verschwinden im IE (7) die Listenzeichen. Im FF werden sie dagegen korrekt dargestellt. Entferne ich 'float', bekomme ich auch im IE die Zeichen zurück - allerdings natürlich untereinander...
---> HTML-Code <---
<div id="subnavi">
<ul>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
</ul>
</div>
---> CSS-Code <---
#subnavi ul {
background: url(../pixel/subnavi.jpg) no-repeat;
width: 910px;
height: 46px;
padding-top: 5px;
padding-left: 15px;
list-style-type: square;
}
#subnavi li {
float: left;
margin-left: 30px;
}
Meine einzige Vermutung ist, dass IE und FF standardmäßig ein verschiedenes 'display' verwenden, denn wenn ich in '#subnavi li {}' die Eigenschaft 'display:block' oder 'display:inline' ergänze, verschwinden auch dort die Listenzeichen.
Hat jemand schon Erfahrung mit diesem Problem oder einen Lösungsansatz für mich? Ich weiß gerade leider nicht mehr weiter.
Mit freundlichen Grüßen
David
-
Hi,
Meine einzige Vermutung ist, dass IE und FF standardmäßig ein verschiedenes 'display' verwenden, denn wenn ich in '#subnavi li {}' die Eigenschaft 'display:block' oder 'display:inline' ergänze, verschwinden auch dort die Listenzeichen.
Nein - das liegt daran, dass Listenzeichen natürlich nur bei Elementen mit display:list-item dargestellt werden.
Die Browser machen bei der Darstellung von Listen allerdings durchaus Unterschiede - und zwar in der Realisierung der Einrückungen. Du musst für UL und LI passende werte für margin und padding vorgeben, damit in jedem Browser genügend Platz für die Listenzeichen vorhanden ist.
freundliche Grüße
Ingo-
Hallo,
danke für die Antwort!
Allerdings habe ich mit 'padding' und 'margin' schon alles erdenklich durchprobiert. Es spielt keine Rolle, ob ich 0 oder 100 Pixel Abstand wähle, im IE sind keine Listenzeichen zu sehen.Ich habe auch schon explizit 'display:list-item' probiert. Des Weiteren spielt es auch keine Rolle, ob ich 'list-style-position' inside oder outside wähle.
Mit freundlichem Gruß
DavidHi,
Meine einzige Vermutung ist, dass IE und FF standardmäßig ein verschiedenes 'display' verwenden, denn wenn ich in '#subnavi li {}' die Eigenschaft 'display:block' oder 'display:inline' ergänze, verschwinden auch dort die Listenzeichen.
Nein - das liegt daran, dass Listenzeichen natürlich nur bei Elementen mit display:list-item dargestellt werden.Die Browser machen bei der Darstellung von Listen allerdings durchaus Unterschiede - und zwar in der Realisierung der Einrückungen. Du musst für UL und LI passende werte für margin und padding vorgeben, damit in jedem Browser genügend Platz für die Listenzeichen vorhanden ist.
freundliche Grüße
Ingo-
Hi,
Allerdings habe ich mit 'padding' und 'margin' schon alles erdenklich durchprobiert.
gerade mal ausprobiert: der IE ändert offensichtlich durch das floaten die display-Eigenschaft.
Entweder wartest Du auf den IE8 (der hat diesen Bug nicht mehr) oder Du floatest statt der LI- die A-Elemente.freundliche Grüße
Ingo
-
-