1.)
img ist ja normalerweise ein Inline-Element.
Nicht ganz. einem Inline Element kannst du normalerweise keine height zuweisen. Einem img hingegen schon, weil es ein inline-replaced Element ist, das heisst, es hat eine intrinsische Höhe.
2.)
Mit " width: width: 30%;" bzw. " width: width: 69.9%;" teilst du ja den verfügbaren Platz auf. Warum nimmst du denn nicht 70.0% sondern 69.9%?
Rundungsfehler. Alle browser rechnen ja letztlich in Pixel um und erzeugen dabei jedoch Rundungsfehler.
Wenn durch Addition der Breiten mehr als 100% herauskommt, hast du ein radikal verschiedenes Erscheinungsbild.
3.)
Kann ich dem Foto keine genaue Pixelbreite zuweisen und der Beschreibung den ganzen Rest?
Dafür müsstes du statt dem <img> ein wrapperelement als inline-block Element verwenden. Dann kannst du dem darin enthaltenen <img> immer noch eine eigene Angabe geben.
Warum ist diese Zeile notwendig:
display: inline; /* MSIE und Opera Trigger */
Wie kommst du auf diese Zeile
MSIE 6 und 7 verstehen kein inline-block, werden also die inline-block Anweisung nicht parsen.
Sie haben aber zugleich eine nicht konformante Ausführung von inline-Elementen, denen sie ein vertikales padding und height zugestehen.
Darum kommt bei diesen Browsern in etwa das gleiche zustande.
Opera war früher sehr an MSIE angelehnt und hat noch ein paar Bugs geerbt aus dieser Zeit. Auch Opera kann man diese Mängel durch das vorangehende inline abgewöhnen.
mfg Beat
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische