Wordwrap problem of mozillas inline-box

pex — Mon, 05 Nov 2007 12:10:55 +0000

As Firefox and its friends don’t support the normal “display: inline-block” feature of css, it got its own syntax which is called “display: -moz-inline-box”. In most cases you can use it without seeing a difference to the standard CSS-syntax.
One of the bugs is that your element won’t have an automatic break at the end of the line but behaves somehow like “white-space: nowrap”.
The other bug which I will kill by now appears when your inline-block Element doesn’t have a content.
For example when the background is set with CSS and you don’t want anything else to be displayed. Or if you are using Javascript to fill the element.
Anyway Firefox would ignore the line-height and put your element in the next line.
Perhaps you didn’t see this HTML-Enitie for a while as we all use CSS and UTF-8, but a simple (a white-space) will work, though.

Tabellen- und Listenabstände per CSS im IE

pex — Thu, 25 Oct 2007 18:57:51 +0000

Wer angehalten ist für größere Projekte seine Seiten auch dem Microsoft Internet Explorer schmackhaft zu machen, stößt recht schnell auf die Grenzen der vollkommen veralteten CSS Engine.

Ein grandioser Bug im ist hier eine mehrdimensionale Liste. Heisst, eine Liste (ol/ul), die in einer anderen liegt (oder auch in einer Tabelle).
Hier fügt der IE oberhalb der Liste einen Abstand ein, den man mit normalen Margin oder Padding angaben nicht ändern kann. Wir versuchen es:
Ein Beispiel:

<ul>
  <li>Irgendetwas</li>
  <li>
    <ul>
      <li>Irgendetwas in der zweiten Liste</li>
      <li>Nochetwas</li>
    </ul>
   </li>
</ul>

Selbst wenn wir nun im CSS folgende Angaben machen, bleibt der Abstand der zweiten Liste:

ul, ul li, ul li ul, ul li ul li {
  margin: 0;
  padding: 0;
}

Indem man allerdings die zweite Liste als inline-block definiert, kann man den Fehler beheben:

ul li ul {
  display: inline-block
}

Da die Mozilla Engine kein inline-block kennt, wird es dort übergangen. Im Safari und Opera auf der anderen Seite führt diese Definition zu krassen Darstellungfehlern, weshalb es ratsam ist, die Definition als IE-Hack bzw. Browserweiche zu kennzeichen:

*+html ul li ul, * html ul li ul {
  display: inline-block;
}

das *+html ist dabei speziell für den IE7, da er (eigentlich korrekter Weise) das * html igoriert.

Ich hoffe, dass ich einigen von euch ein wenig Frust nehmen konnte.
Hier gibt’s übrigens nehr über Internet Explorer 7 Hacks.

Wanderwort » CSS

Wordwrap problem of mozillas inline-box

Tabellen- und Listenabstände per CSS im IE