ol_li anstatt tabelle und browserbugs

[JamesT]

Hallo liebe Community,

ich habe mir gedacht anstatt einer kleinen tabelle, nutze ich eine etwas modifizierte geordnete liste, allerdings habe ich jetzt ein anderes aussehen im IE als im Firefox.

Habt ihr eine Idee woran es liegt? Ich komm nach ewigem hin und herprobieren nicht mehr weiter. Achja, ist es überhaupt sinnvoll dafür eine liste zu nehmen?

Ein Screenshot ist anbei, und hier kommt der Code:

CSS:

div.status_box {
	width: 650px;
	margin: 20px auto;
	background-color: #fff5df;
	border: 1px solid #d0d0d0;
}

	div.status_box ol{
		margin: 10px 0;
		list-style: none;
    }

	div.status_box li.name{
		width: 200px;
		text-align: right;
		float: left;
		font-weight: bold;
    }

	div.status_box li.value{
		margin: 0 0 0 10px;
    }

HTML:

				<div class="status_box">
					<ol>
						<li class="name">Date/Time</li>
						<li class="value">08.05.2008 02:14:33</li>
						<li class="name">Time Server</li>
						<li class="value">0.0.0.0</li>
						<li class="name">Time Zone</li>
						<li class="value">GMT</li>
					</ol>
				</div>

Vielen Dank für eure Zeit und Hilfe im voraus.

Jamest

 

[kuddeldaddeldu]

Hi,

Achja, ist es überhaupt sinnvoll dafür eine liste zu nehmen?

Also, das würde ich eigentlich mit einer Tabelle machen. Das sind doch tabellarische Daten (zumindest eher als eine Auflistung).

LG

 

[Maik]

Hi,

Habt ihr eine Idee woran es liegt?

der IE (5.x, 6 & 7) erwartet einen anderen linken Außenabstand für das li-Element mit der Klasse .value:

<style type="text/css">
div.status_box {
        width: 650px;
        margin: 20px auto;
        background-color: #fff5df;
        border: 1px solid #d0d0d0;
}

div.status_box ol{
                margin: 10px 0;
                list-style: none;
    }

div.status_box li.name{
                width: 200px;
                text-align: right;
                float: left;
                font-weight: bold;
    }

div.status_box li.value{
                margin: 0 0 0 10px;
    }
</style>
<!--[if lte IE 7]>
<style type="text/css">
div.status_box li.value{
                margin: 0 0 0 210px;
    }
</style>
<![endif]-->