Scrolleiste nicht gleich FF/IE und Safari/Chrome

[krug_s]

So wie ich das sehe nur noch tutorials.de Forum ist aktiv deswegen frage ich wieder hier..

In Chrome und Safari wird die Scrolleiste hinter schwarzem Rand versteckt (overflow:scroll)....aber in IE und Firefox funktioniert das nicht, es zeigt die Scrolleiste ausserhalb von schwarzen Rand.

Hier könnt ihr selber sehen, unter Reiter: "NEWS" habe ich viel Blindtext.

http://jsfiddle.net/dqs3amky/3/


Was kann ich machen? es sollte wenn möglich wie in Chrome aussehen aber nicht so wie in IE -_-

Bild: 1_chrome.jpg ist gut, wenn möglich so sollte es sein.

Bild2: 1_ie.jpg ist schlecht, will unbedingt vermeiden.



Danke

 

[SpiceLab]

Die unerwünschte Darstellung tritt bei mir auch in Chrome und Safari zu Tage.

Hab die 567 Zeilen des CSS-Codes jetzt nicht näher durchgeschaut, aber bist du dir sicher, dass die Ausrundung in diesem Maße so erwünscht ist, und der Text im Viewport entsprechend abgeschnitten werden soll?!

Firefox stellt hingegen die Box ohne diesen großen Radius und mit einem sauber eingebetteten Scrollbalken dar, sodass der Text seitlich bis unten komplett zu lesen ist.

Mein OS ist Win7.

[edit]Tipp-Ex[/edit]​

 

[krug_s]

Hallo

Ja, die Ausrundung (border-radius) sollte so sein, da auch Logo in einem so Radius steht. Der Text bekommt noch margin links/rechts damit es schön zu sehen/lesen ist ev. werde ich noch CMS einbinden, das war jetzt quasi Demo.


Ohne Radius (mit Quadrat) ist natürlich viel besser und die Scrollleiste/balke passt, da ich aber ein Radius brauche suche ich dementsprechend auch eine Möglichkeit das alles zu verschönern, weil es sieht wirklich schlimm in IE/FF aus ...eben Chrome/Safari sind bei mir I.O

 

[SpiceLab]

Wird das Logo als Hintergrundbild verwendet, damit der Text davor steht? Oder soll der Text nur bis zum Logo scrollbar reichen?

[edit]Tipp-Ex[/edit]​

 

[krug_s]

Auf der Startseite (Navigation) steht Logo, eben nur auf der Startseite......das Logo wird nicht als Hintergrund im Text verwendet, der Text steht auf weissem Hintergrund.


Ich habe mir überlegt unterhalb von Text ein Bild oder div zu setzen und dann mit display:none zu übersehen/ decken.

 

[jeipack]

.rand hat bei dir overflow: scoll. Das führt dazu, dass der Scrollbalken da sind, sogar wenn nichts zum scrollen vorhanden ist. Setz es auf overflow: hidden und scroll irgendwie anders.

 

[SpiceLab]

Im Sinne der Usability, lieber den Text vor dem Radius enden lassen, als den Scrollbalken derart benutzerunfreundlich abzuschneiden / zu verdecken.

Oder wie von @jeipack empfohlen in einem gesonderten Bereich scrollen, der beispielsweise nicht mit dem rechten/unteren Rand kollidiert, weil er kleinere Dimensionen besitzt.

[edit]Tipp-Ex[/edit]​

 

[krug_s]

Wenn nur der Text wäre, dann würde ich einfach bei Anfang Radius Text beenden. Aber ich habe auch (Profil) Bilder (ca. 15 vorläufig) je Reihe 3 Bilder also mit overflow:hidden; sehe ich 9 Bilder. Wie soll ich die restlichen 6 Bilder sehen? und mit overflow:scroll war es möglich alle Bilder zu sehen.

Wenn auf ein Bild geklickt wird, dann öffnet sich ein Lightbox.