CSS inline-block

oriolus · 17.11.2009, 11:06

Hallo,

hier ein Ausschnitt au einer längeren Liste:

Code:

<style type="text/css">
.iblock { display:inline-block; width:40px; padding-left:5px; background-color:#f6f6f6; }
</style>
...

<li><div class='iblock'>1234</div> &nbsp;Hans Hansen, Hamburg</li>

Der div-Bereich erhält durch inline-block eine feste Breite, erzeugt aber keinen Absatz (insgesamt verhält sich dieser Bereich also wie eine Tabellenspalte).

Alles perfekt in Firefox + Opera, aber leider habe ich dann erst bemerkt, dass der IE inline-block anscheinend noch nicht kennt (es wird also ein Absatz erzeugt).

Gibt es hierfür Alternativen, die auch der IE versteht?

Danke!

Dark Guardian · 17.11.2009, 12:03

IE block level element inline-block hack

< 5 sec Google...

oriolus · 17.11.2009, 14:46

Danke! Dann bist du besser im Suchen als ich...

Ich habe das Beispiel so für meine Zwecke angepasst, und es scheint überall zu funktionieren:

Code:

<style type="text/css">
#iblock div.in { display:inline-block; width:40px; padding-left:5px; background-color:#f6f6f6; }
#iblock div.in { display:inline; }
#iblock>div.in { display:inline-block; }
</style>
...

<li id='iblock'><div class='in'>1234</div> &nbsp;Hans Hansen, Hamburg</li>

Dark Guardian · 17.11.2009, 15:21

"inline-block ie" der zwiete Eintrag bei Google ist der Treffer gewesen.

oriolus · 17.11.2009, 16:05

nochmal was zum obigen Code:

Das funktioniert zwar, ist aber kein valides HTML, weil <li id='iblock'> ja jedesmal wiederholt wird, ID aber eindeutig sein muss.

Wenn ich stattdessen oben <ol id='iblock'> schreibe, oder die ganze Liste mit <div id='iblock'>...</div> einschließe, klappt es leider nicht mehr; die feste Breite wird dann nicht angezeigt.

Vielleicht hat ja noch jemand 'ne Idee...

Dark Guardian · 17.11.2009, 16:08

Zitat:

Zitat von oriolus

nochmal was zum obigen Code:

Das funktioniert zwar, ist aber kein valides HTML, weil <li id='iblock'> ja jedesmal wiederholt wird, ID aber eindeutig sein muss.

Wenn ich stattdessen oben <ol id='iblock'> schreibe, oder die ganze Liste mit <div id='iblock'>...</div> einschließe, klappt es leider nicht mehr; die feste Breite wird dann nicht angezeigt.

Vielleicht hat ja noch jemand 'ne Idee...

Versuch doch mal ne Klasse draus zu amchen. Also . anstelle von # und class= anstelle von id.

nikosch · 17.11.2009, 16:10

Beschäftige Dich lieber noch malmit CSS. Du kannst genauso #id li div {} o.ä. angeben.

oriolus · 17.11.2009, 17:06

Ich habe es jetzt mit einem anderen, einfacheren CSS-Hack gelöst (wusste vorher gar nicht, was das ist):

Code:

div.iblock { display:inline-block; width:40px; padding-left:5px; background-color:#f6f6f6; }

* html div.iblock { display:inline; }

so reicht eine einfache Klasse, ohne Verschachtelungen. Die untere Zeile wird nur vom IE gelesen.

Aber ganz ohne "Hack" gehts wohl nicht?

Vielen Dank nochmal für die Tipps.

oriolus · 17.11.2009, 17:11

Zitat:

Zitat von Dark Guardian

Versuch doch mal ne Klasse draus zu amchen. Also . anstelle von # und class= anstelle von id.

ich glaube, das hatte nicht geklappt, weil so der eingebaute Fehler des hacks nicht "funktioniert".

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Curl Post Problem	GTA26	PHP Tipps 2009	2	10.03.2009 23:16
PHPmailer: Problem Bilder extern / absolut verlinken, nicht als inline attachment	brtl	PHP-Fortgeschrittene	2	16.09.2008 20:59
Undefined variable Undefined property: block	xxJJxx	PHP Tipps 2008	16	05.08.2008 15:30
kleine Frage zu Einfärben von Kategorie	cybermailer	PHP Tipps 2008	21	05.05.2008 14:42
newbe q: array in js	noskule	HTML, Usability und Barrierefreiheit	3	20.04.2006 14:00
[CSS] Block und Inline Element gleichzeitig....oder so		HTML, Usability und Barrierefreiheit	2	26.02.2006 23:31
[Erledigt] Fehler beim Einfügen von Inline Attachments		PHP Tipps 2007	9	16.11.2005 15:36
Nur der letzte Wert im Array wird angezeigt	argon	PHP Tipps 2005-2	28	05.11.2005 16:21
block elemente nebeneinander		HTML, Usability und Barrierefreiheit	2	30.07.2005 12:12
try / catch block ..		PHP-Fortgeschrittene	1	24.09.2004 08:04
bbcode - Classe		PHP-Fortgeschrittene	4	18.09.2004 17:30
[Erledigt] "Output-Pufferung spezial...?"		PHP-Fortgeschrittene	7	04.09.2004 12:04

17.11.2009, 11:06
oriolus Benutzer Registriert seit: 26.04.2007 Beiträge: 33 PHP-Kenntnisse: Anfänger	CSS inline-block Hallo, hier ein Ausschnitt au einer längeren Liste: Code: <style type="text/css"> .iblock { display:inline-block; width:40px; padding-left:5px; background-color:#f6f6f6; } </style> ... <li><div class='iblock'>1234</div>  Hans Hansen, Hamburg</li> Der div-Bereich erhält durch inline-block eine feste Breite, erzeugt aber keinen Absatz (insgesamt verhält sich dieser Bereich also wie eine Tabellenspalte). Alles perfekt in Firefox + Opera, aber leider habe ich dann erst bemerkt, dass der IE inline-block anscheinend noch nicht kennt (es wird also ein Absatz erzeugt). Gibt es hierfür Alternativen, die auch der IE versteht? Danke!


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

17.11.2009, 12:03
Dark Guardian Erfahrener Benutzer Registriert seit: 10.10.2009 Beiträge: 2.630 PHP-Kenntnisse: Fortgeschritten	IE block level element inline-block hack < 5 sec Google...

17.11.2009, 15:21
Dark Guardian Erfahrener Benutzer Registriert seit: 10.10.2009 Beiträge: 2.630 PHP-Kenntnisse: Fortgeschritten	"inline-block ie" der zwiete Eintrag bei Google ist der Treffer gewesen.

17.11.2009, 16:05
oriolus Benutzer Registriert seit: 26.04.2007 Beiträge: 33 PHP-Kenntnisse: Anfänger	nochmal was zum obigen Code: Das funktioniert zwar, ist aber kein valides HTML, weil <li id='iblock'> ja jedesmal wiederholt wird, ID aber eindeutig sein muss. Wenn ich stattdessen oben <ol id='iblock'> schreibe, oder die ganze Liste mit <div id='iblock'>...</div> einschließe, klappt es leider nicht mehr; die feste Breite wird dann nicht angezeigt. Vielleicht hat ja noch jemand 'ne Idee...

17.11.2009, 16:10
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Beschäftige Dich lieber noch malmit CSS. Du kannst genauso #id li div {} o.ä. angeben. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

17.11.2009, 17:06
oriolus Benutzer Registriert seit: 26.04.2007 Beiträge: 33 PHP-Kenntnisse: Anfänger	Ich habe es jetzt mit einem anderen, einfacheren CSS-Hack gelöst (wusste vorher gar nicht, was das ist): Code: div.iblock { display:inline-block; width:40px; padding-left:5px; background-color:#f6f6f6; } * html div.iblock { display:inline; } so reicht eine einfache Klasse, ohne Verschachtelungen. Die untere Zeile wird nur vom IE gelesen. Aber ganz ohne "Hack" gehts wohl nicht? Vielen Dank nochmal für die Tipps.