Float-Problem

[Matze]

Hallo!

Ich habe mehrere Bilder in Definitions-Listen verpackt:

<dl>  
    <dt><img src="(...)" alt="(...)" /></dt>  
    <dd>  
        Beschreibung  
        Name: (...)  
        Größe: (...)kb  
    </dd>  
</dl>

Die Foratierung mit CSS sieht so aus:

dl {  
    list-style-type:none;  
    border:1px solid #CCC;  
    margin:0 5px 0 0;  
    padding:5px;  
    display:inline-block;  
/*    float:left; */  
}  
dl dt {  
    margin:0;  
}  
dl img {  
    border:1px solid #CCC;  
}  
dl dd {  
    margin:0;  
    padding:0 5px 0 5px;  
}

Nun zu meinem Problem.
Mit display:inline-block erreiche ich, dass die Listen schön in einer Reihe bleiben.
Wenn der Platz zu klein wird, wandern die Listen einfach in die nächste Zeile.
Problem a) dabei: Die Listen sind auf der Textlinie ausgerichtet. Ich möchte aber, dass die Listen oben "hängen". So, wie wenn ich sie mit float:left ausrichte.
Problem b) inline-block wird wohl noch nicht von allen Browsern verstanden. (ab IE7?)

Wenn ich die Listen mit float:left ausrichte wandern sie nicht bis ganz nach Links sondern, wenn die Liste links daneben kleiner ist als die davor, nur bis unter die Nachbarliste.
Das sieht dann ungefähr so aus
|--------| |--------|
|        | |   A    |
|   B    | |--------|
|        | |--------|
|        | |        |
|--------| |   C    |
           |        |
           |        |
           |--------|

Liste C soll aber nach links unter B.
Kann mir bitte jemand einen Tipp geben wie ich das erreichen kann?
Ich hoffe, ich konnte mein Problen ordentlich beschreiben.

Danke für Hilfe!

Matze

[apsel]

Om nah hoo pez nyeetz,

Schau dir Gunnars Artikel an. Dort sind Hacks für den IE beschrieben und auch vertical-align genannt.

Matthias

[Matze]

Hey Matthias!

Schau dir Gunnars Artikel an. Dort sind Hacks für den IE beschrieben und auch vertical-align genannt.

Danke, mir hat das vertical-align gefehlt.
Leider bleibt aber das Problem b), dass der IE einschließlich IE7 inline-block nicht kennt.
Und dafür hat Gunnar auch keine Alternative beschrieben :(

Grüße, Matze

[apsel]

Om nah hoo pez nyeetz,

Und dafür hat Gunnar auch keine Alternative beschrieben :(

doch. Zitat:

und da Internet Explorer dies nicht verstehen, für IE 6 und IE 7 mit Hacks

* html li { display: inline; } *:first-child+html li { display: inline; }

Matthias

[Matze]

Ach Sorry, ich bin aber auch blind...