Vinzenz Mai: Bilder mit Untertiteln nebeneinander anordnen

Beitrag lesen

Hallo Stefan,

hmm, also mit dem "IE-Hack" komme ich nicht klar - so, wie es dort auf der Seite angegeben ist ...

Du solltest den Code auch nicht unverändert übernehmen :-)

Was z.B. bedeutet der "*" und das "html",

Das ist der http://de.selfhtml.org/css/layouts/browserweichen.htm#star_html_hack@title=Star-HTML-Hack (für IE6)

  • html li {
        display: inline;
    }

und wozu dient "*:first-child+html"

Das ist der [ref:self812;css/layouts/browserweichen.htm#star_plus_html_hack@title=Star-plus-HTML-Hack] für den IE 7.

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

  

> und was soll überhaupt mit dem "display:inline" bewirkt werden? \*kopf-rauch\*  
  
IE 7 und älter unterstützen display: inline-block nicht wirklich, aber ... mit dieser lustigen Kombination  
  
a) display: inline-block;  
b) display: inline  
  
in etwa doch, siehe z.B. <http://www.brunildo.org/test/InlineBlockLayout.html>  
  
Damit die Hacks greifen, solltest Du beachten, dass die Listenelemente sich in der Liste mit der id="galerie" befinden:  
  
~~~css
  
/*  
    Star-HTML-Hack für IE6  
    Beachte, dass durch das vorhergehende  
  
        display: inline;  
  
    das Element über [link:http://www.webkrauts.de/2007/06/05/haslayout-auf-deutsch-erklaert/@title=hasLayout] verfügt.  
*/  
* html #galerie li {  
    display: inline;  
}  
  
/* Star-Plus-HTML-Hack für IE7 */  
*:first-child+html li {  
    display: inline;  
}  

Damit sah es in IE6, 7 und 8 so aus wie von Dir gewünscht. Ein

list-style: none;

war bei mir nicht erforderlich.

Freundliche Grüße

Vinzenz