Autor |
Nachricht |
metty
Threadersteller
Dabei seit: 21.03.2005
Ort: Köln
Alter: 39
Geschlecht:
|
Verfasst Mi 16.01.2008 10:39
Titel Ordered List wird im IE und FF unterschiedlich dargestellt. |
|
|
Morgen!
Bitte helft mir mal, ich bin gerade ein wenig mit meinem Latein am Ende...
Ich möchte eine Ordered-List in einem Div (600Px breit) erzeugen, es sollen immer zwei Listenelemente nebeneinander stehen, dann soll eine neue Zeile beginnen. Des Weiteren soll die Liste mit "list-style-type: decimal;" gekennzeichnet werden.
Im FF klappts wunderbar, allerdings zickt der IE rum. Der vergisst nämlich die Ziffern. Lasse ich das "float: left;" weg, zeigt er immer eine 1. Entferne ich das "width: 50%;" floatet er zwar, jedoch kommen, keine Ziffern...
Hier mal der Code, vielleicht kommt ja wer auf den Fehler:
Code: |
<?xml version="1.0" encoding="iso-8859-2"?>
<!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" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>liste</title>
<style type="text/css" media="all">
<!--
body {
background: #FFF;
margin: 0;
}
.list-div {
width: 600px;
}
ol.ordered-list li {
float: left;
list-style-type: decimal;
width: 50%;
}
-->
</style>
</head>
<body>
<div class="list-div">
<ol class="ordered-list">
<li><a href="#">Lorem</a></li>
<li><a href="#">ipsum</a></li>
<li><a href="#">dolor</a></li>
<li><a href="#">sit</a></li>
<li><a href="#">amet,</a></li>
<li><a href="#">consectetuer</a></li>
<li><a href="#">adipiscing</a></li>
<li><a href="#">elit</a></li>
<li><a href="#">Ut tempus</a></li>
<li><a href="#">Curabitur</a></li>
<li><a href="#">dignissim</a></li>
<li><a href="#">tempus</a></li>
<li><a href="#">lacus</a></li>
<li><a href="#">Fusce</a></li>
<li><a href="#">mattis</a></li>
<li><a href="#">ultrices</a></li>
<li><a href="#">sem</a></li>
<li><a href="#">Vestibulum et metus</a></li>
<li><a href="#">adipiscing</a></li>
<li><a href="#">facilisis</a></li>
</ol>
</div>
</body>
</html>
|
Vielen Dank!
Metty
|
|
|
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
Verfasst Mi 16.01.2008 11:00
Titel
|
|
|
da war mal was, was listen angeht
Code: |
/* reset styles */
dl {margin: 0 0 0 0;}
dl dt {margin: 0 0 0 0;}
dl dd+dt {margin-top: 0;}
dl dd {margin: 0 0 0 0;}
ol {list-style: none;}
ol li {margin: 0 0 0 0;}
ol li ol {margin: 0 0 0 0;}
ol li ul {margin: 0 0 0 0;}
p {margin-bottom: 0em;}
ul {list-style: none;}
ul li {margin: 0 0 0 0;}
ul li ul {margin: 0 0 0 0; list-style: none;}
ul li ol {margin: 0 0 0 0;} |
vlt hilfts dir
|
|
|
|
|
Anzeige
|
|
|
metty
Threadersteller
Dabei seit: 21.03.2005
Ort: Köln
Alter: 39
Geschlecht:
|
Verfasst Mi 16.01.2008 11:06
Titel
|
|
|
Um ehrlich zu sein, nein, sorry.
Jemand ne andere Idee...?
Zuletzt bearbeitet von metty am Mi 16.01.2008 11:07, insgesamt 1-mal bearbeitet
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Mi 16.01.2008 11:38
Titel
|
|
|
ist vielleicht ein workaround - dennoch finde ich meine idee als schnellschuss nicht schlecht hoffe, du kannst es brauchen:
Code: |
<?xml version="1.0" encoding="iso-8859-2"?>
<!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" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>liste</title>
<style type="text/css" media="all">
<!--
body {
background: #FFF;
margin: 0;
}
.list-div {
width: 600px;
}
ol.ordered-list li {
list-style-type: decimal;
line-height: 20px;
}
.tricky_float
{
margin: -20px 0px 0px 150px;
}
-->
</style>
</head>
<body>
<div class="list-div">
<ol class="ordered-list">
<li><a href="#">Lorem</a></li>
<li class="tricky_float"><a href="#">ipsum</a></li>
<li><a href="#">dolor</a></li>
<li class="tricky_float"><a href="#">sit</a></li>
<li><a href="#">amet,</a></li>
<li class="tricky_float"><a href="#">consectetuer</a></li>
<li><a href="#">adipiscing</a></li>
<li class="tricky_float"><a href="#">elit</a></li>
<li><a href="#">Ut tempus</a></li>
<li class="tricky_float"><a href="#">Curabitur</a></li>
<li><a href="#">dignissim</a></li>
<li class="tricky_float"><a href="#">tempus</a></li>
<li><a href="#">lacus</a></li>
<li class="tricky_float"><a href="#">Fusce</a></li>
<li><a href="#">mattis</a></li>
<li class="tricky_float"><a href="#">ultrices</a></li>
<li><a href="#">sem</a></li>
<li class="tricky_float"><a href="#">Vestibulum et metus</a></li>
<li><a href="#">adipiscing</a></li>
<li class="tricky_float"><a href="#">facilisis</a></li>
</ol>
</div>
</body>
</html>
|
Zuletzt bearbeitet von pixelpapst303 am Mi 16.01.2008 11:38, insgesamt 1-mal bearbeitet
|
|
|
|
|
metty
Threadersteller
Dabei seit: 21.03.2005
Ort: Köln
Alter: 39
Geschlecht:
|
Verfasst Mi 16.01.2008 12:04
Titel
|
|
|
Schon gut und tricky, da muss ich dir Recht geben.
Allerdings kann ich das so nicht verwenden, da die Elemente per Script rausgeschrieben werden...
Es muss doch eine Lösung für das Problem geben, oder nicht?
|
|
|
|
|
Kraat
Dabei seit: 05.10.2006
Ort: Köln
Alter: 42
Geschlecht:
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Mi 16.01.2008 12:07
Titel
|
|
|
metty hat geschrieben: | Allerdings kann ich das so nicht verwenden, da die Elemente per Script rausgeschrieben werden...
|
wo ist das problem?
ob es eine alternative gibt, die den ie zwingt trotz float die zahlen zu schreiben, würde mich interessieren - jedoch kenn ich keine.
edit:
und der reset bringt den ie tatsächlich dazu, decimal in zusammenhang mit flot zu verwenden? das will ich nu wissen
EDIT2:
ein schnelltest bei mir sagt: NEIN, der reset behebt das problem nicht...
Zuletzt bearbeitet von pixelpapst303 am Mi 16.01.2008 12:13, insgesamt 2-mal bearbeitet
|
|
|
|
|
metty
Threadersteller
Dabei seit: 21.03.2005
Ort: Köln
Alter: 39
Geschlecht:
|
Verfasst Mi 16.01.2008 14:01
Titel
|
|
|
Bei mir klappts auch nicht....
|
|
|
|
|
|
|
|
Ähnliche Themen |
PowerPoint - Text unterschiedlich dargestellt
Div-Layer in Firefox und IE unterschiedlich dargestellt
fotos werden in browsern unterschiedlich dargestellt
CSS: List-image nur bei Hauptmenüpunkten
css list-style-position
CSS: list item mit border
|
|