display:inline-block in Chrome fehlerhaft

[katabo]

Hallo,

über einen Tip zu folgendem Problem würde ich mich sehr freuen.

Im Browser "Chrome" wird mein Element (mit display: inline-block) nicht richtig dargestellt.
Die Zeilen werden nicht wie gewollt und wie in allen anderen Browsern zu früh gebrochen und in die nächste Zeile geschoben. >>> http://www.katharinabohm.de/index.html <<<

Habe schon das Internet durchwühlt, aber alle Varianten haben bei Chrome nicht funktioniert.

Vielen Dank. Katharina

Zugehöriger CODE:

``

<div style="position:relative; top:230px; left:40px; " id="CENTER">

<p ><a href="http://www.katharinabohm.de/graenslandet.html"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image001','','ROLLOVER/rollover_black.jpg',1)">

<img src="PICTURES/201308092607_ROGEN_SCHWEDEN_2554.png" name="Image001" width="785" height="334" border="0" id="Image001"> </a>

<a href="http://www.katharinabohm.de/food.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image028','','ROLLOVER/rollover_black.jpg',1)">

<img src="PICTURES/ROSMARIA_001.jpg" name="Image028" width="250" height="334" border="0" id="Image028"> </a>

<a href="http://www.katharinabohm.de/jaeger.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image009','','ROLLOVER/rollover_black.jpg',1)">

<img src="PICTURES/2013010_JAEGER_JOACHIM_STOLZ_298.png" name="Image009" width="500" height="334" border="0" id="Image009"> </a>

<a href="http://www.katharinabohm.de/roewer.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image016','','ROLLOVER/rollover_black.jpg',1)">

<img src="PICTURES/20140206_MARIA_ROEWER_168.jpg" name="Image016" width="250" height="334" border="0" id="Image016"> </a> ......

``

#CENTER {
position: relative;
display: inline-block;!important;
    display: -moz-inline-stack;
    *display: inline;
width: 100%;

[Gunnar Bittersmann]

@@katabo:

nuqneH

Im Browser "Chrome" wird mein Element (mit display: inline-block) nicht richtig dargestellt.
Die Zeilen werden nicht wie gewollt und wie in allen anderen Browsern zu früh gebrochen und in die nächste Zeile geschoben.

Ich kann keinen Unterschied zwischen Chrome und Firefox erkennen (MacOS).

Qapla'

[katabo]

Hallo,

vielen Dank für die Antworten.

Important! und -moz-stack habe ich erst nach meiner googlerei eingefügt, aus purer Hilflosigkeit. Vorher stand da nur

``
#CENTER {
position: relative;
display: inline-block;
width: 100%;
}

Meine Porgrammierkenntnisse beschränken sich auf die Basics. Man möge mir Fehler verzeihen.
Benutze eigentlich nur noch den Adobe Edge Editor. Bis auf das eine Script.

Auf einmal funktionierts.

Danke trotzdem für eure Antworten.

Liebe Grüße Katharina

[1UnitedPower]

Meine Herren!

Auf einmal funktionierts.

Vielleicht war es ein Cache-Problem? Mit STRG + F5 kannst du Seiten explizit so anfordern, dass sie nicht aus dem Cache geladen werden.

[1UnitedPower]

Meine Herren!

Habe schon das Internet durchwühlt, aber alle Varianten haben bei Chrome nicht funktioniert.

> #CENTER {  
> 	position: relative;  
> 	display: inline-block;!important;  
>     display: -moz-inline-stack;  
>     *display: inline;  
> 	width: 100%;  

Uh, uff. Du willst tatsächlich Firefox 2 (-moz-inline-stack) berücksichtigen? Und IE 7 (*display: inline)? Das nenn ich ambitioniert. Und du nutzt du DreamWeaver (MM_swapImage)?

Beginn doch mal damit dein CSS von Syntax-Fehler zu bereinigen. Vor !important gehört kein Semikolon und da fehlt eine schließende geschweifte Klammer. !important ist übrigens fast immer ein sicherer Indikator dafür, dass man den Überblick über seine Stylesheets verloren hat. Besser man erhöht die Spezifität von Selektoren, um andere Regeln zu überschreiben.

Sollte dein Problem damit noch behoben sein, erkläre doch mal ausführlich den Soll- und Ist-Zustand, am besten anhand von Bildern oder einem Online-Beispiel.