✔ Positionierung eines Span Elements

[Steffen Giers]

Guten Abend,

nach Stundenlanger Testerei frage ich einfach mal hier um Hilfe. Es geht um die absolute Positionierung eines Inline Elements innerhalb eines Block Elements bei der der Internet Explorer nicht so möchte wie ich.

Hier mal 2 Bilder zur verdeutlichung:
So soll es sein (Screenshot vom Firfox)


Und so siehts im IE aus.


Ich habe das Problem schon eingekreist. Es liegt definitiv an der deklaration von Padding in diesem Selektor.

#article-list ul li {
    background:#EDEDED;
    margin-bottom:.2em;
    padding-left:10em;
    position:relative
    }

]
Hier der Link zur Seite: www.intervisual.de

Hier der betreffende CSS- und HTML Code:

    <ul>
        <li class="article-list-head"><span>Date</span>Title</li>
        <li><span>21. Jan</span><a href="#">Standards in einem neuen Licht.</a></li>
        <li><span>09. Mrz</span><a href="#">Was zum Teufel soll das?</a></li>
        <li><span>10. Mai</span><a href="#">Warum das alles hier?</a></li>
        <li><span>03. Sep</span><a href="#">Ein weiterer Testeintrag in diesem Bereich.</a></li>
        <li><span>19. Okt</span><a href="#">Die formale Struktur von xHTML</a></li>
    </ul>

#article-list {
    width:32.5em;
    }

#article-list ul li {
    background:#EDEDED;
    margin-bottom:.2em;
    padding-left:10em;
    position:relative
    }
    
#article-list ul li:hover {
    background:#eaeaea
    }

#article-list ul li a {
    padding-right:1em
    }

#article-list ul li span {
    display:block;
    left:0;
    top:0;
    position:absolute
    }

#article-list ul li:first-child, .article-list-head {
    border-top:.1em solid #e0e0e0;
    color:#000
    }


#article-list ul li:last-child {
    border-bottom:.1em solid #e0e0e0
    }

Ich bin für alle vorschläge Offen und Dankbar für jede Hilfe

Bye Steffen

 

[Gumbo]

Weise dem Element doch einfach bloß eine fixe Breite zu.

 

[Maik]

Mein Lösungsvorschlag:

#article-list {
        width: 36em;
        }

#article-list ul li {
        background: #EDEDED;
        margin-bottom: .2em;
        }

#article-list ul li span {
        display: block;
        float: left;
        width: 10em;
        }

 

[Steffen Giers]

Ok danke für eure Antworten.

@Michael
dein Lösungsvorschlag funktioniert zwar sehr gut allerdings bringt das Floaten in diesem Beispiel einen entscheidenden Nachteil mit sich:

Wenn der Eintrag in diesem Listenelement zu lang wird bricht er ja eine neue Zeile an. Das soll er ja auch aber in diesem Fall fängt er am Anfang des <li> eine neue Zeile an also direkt unterhalb des Datums. Genau das habe ich mit der absoluten Pos. versucht zu umgehen.

Hier ohne Float:


Und hier mit Floating


Danke nochmal...

 

[Maik]

Vielleicht solltest du in diesem Fall über den Einsatz einer zweispaltigen Tabelle nachdenken?

 

[Steffen Giers]

Ja daran habe ich auch schon Gedacht. Aber das geht hier an meinen persönlichen Ehrgeiz... ich weiß das es geht. Nur wie muss ich noch rauskriegen... Danke erstmal.

 

[Steffen Giers]

Unglaublich aber wahr ich habe eine Lösung gefunden. Sie ist zwar nicht auf meinen Mist gewachsen aber es funktioniert.

Man bindet über Conditional Comments einfach eine neues Stylesheet ein und Selektiert so den betreffenden Browser.

<!--[if lt IE 7]><link href="iecss.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->

In diesem Stylsheet Notiert man für diesen Fall folgendes:

#article-list li { display: inline-block; }

Thats it. Danke für die Hilfe!

 

[Gumbo]

Arbeite doch mit Polsterung und negativem Abstand:

#article-list li {
	padding-left: 5em;
}
#article-list li span {
	float: left;
	display: block;
	width: 5em;
	margin-left: -5em;
}

 

[Steffen Giers]

Um die zusätzliche definition eines Stylesheets zu vermeiden?

Edit:
Auf jedenfall ein Interessanter Ansatz. Aber aus unerfindlichen Gründen zeigt der IE dann gar kein Datum sprich <span> an.