• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Streifen bei scrollbarem div im Internet Explorer

C

cssWelt

New member
Hallo liebe Leute. :)

Im Internet Explorer gibt es unerklärlicherweise eine ganz gemeine Streifenbildung beim vertikalen Scrollen in einem scrollbaren div-Container, wenn sich im Quelltext über dem div-Container <br>-tags befinden. Je mehr <br>-tags es sind, desto stärker ist die Streifenbildung. Verrückt!!!

Bei genau 5 oder 8 <br>-tags gibt es keine Streifenbildung mehr.

Die Streifen haben exakt die Farbe der Anweisung border-color. Entfernt man die 3 border-Anweisungen, dann gibt es auch keine Streifen mehr beim Scrollen. Ändert man den Wert von border width von 0.1em auf 1px, dann gibt es auch keine Streifenbildung mehr.

Je langsamer man im IE scrollt, desto stärker ist die Streifenbildung. Hat der IE ein Problem mit em-Werten? Was genau ist das Problem des IE und wie könnte ein Fix oder Workaround für den IE aussehen? Nur bitte, ich möchte nicht zurück in die px-Zeit. Es muss doch auch mit em gehen. Vielen Dank an Microsoft und vielen Dank im Voraus für alle Antworten und Vorschläge.

Hier ist der vollständige, lauffähige Code zum Testen im Internet Explorer.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="language" content="de">
<title>Streifen bei scrollbarem div im Internet Explorer</title>

<style type="text/css">
.scrollDiv{
background-color:#dddddd;
border-color:#cc0000;
border-style:solid;
border-width:0.1em;
height:15em;
overflow-x:hidden;
white-space:nowrap;
width:22em;
}
</style>

</head><body>
<br>
Überschrift für den Container<br><br>
<div class="scrollDiv">
Im Internet Explorer gibt es<br>
unerklärlicherweise eine ganz<br>
gemeine Streifenbildung<br>
beim vertikalen Scrollen in<br>
einem scrollbaren div-Container,<br>
wenn sich im Quelltext über dem<br>
div-Container br-tags befinden.<br>
Je mehr br-tags es sind,<br>
desto stärker ist die<br>
Streifenbildung. Verrückt!!!<br>
Bei genau 5 oder 8 br-tags<br>
gibt es keine Streifenbildung mehr.<br>
Die Streifen haben exakt die Farbe<br>
der Anweisung border-color.<br>
Entfernt man die 3 border-Anweisungen,<br>
dann gibt es auch keine Streifen<br>
mehr beim Scrollen.<br>
Ändert man den Wert von border width<br>
von 0.1em auf 1px, dann gibt es auch<br>
keine Streifenbildung mehr.<br>
Je langsamer man im IE scrollt,<br>
desto stärker ist die Streifenbildung.<br>
Hat der IE ein Problem mit em-Werten?<br>
Was genau ist das Problem des IE<br>
und wie könnte ein Fix oder Workaround<br>
für den IE aussehen?<br>
Nur bitte, ich möchte nicht zurück in die<br>
px-Zeit. Es muss doch auch mit em gehen.<br>
Vielen Dank an Microsoft und<br>
vielen Dank im Voraus für alle<br>
Antworten und Vorschläge.
</div><br><br>

</body></html>
 
Da em abhängig von der Schriftart ist hab ich einfach mal ein font-size in Pixeln dazu gegeben. Danach waren die Streifen weg, egal wie groß die font-size war. Die anderen Browser werden sich die Schriftgröße vermutlich erraten und haben deshalb kein Problem an der Stelle.

Und übrigens kann ich in der Einheit Pixel kein veraltetes Stilmittel sehen. Warum sagst du "zurück zu px"? Was gefällt dir an px nicht? Ich finde beide gleich gut und setze sie so ein, wie sie vorgesehen sind.
 
Mit der font-size hat das Problem nicht mehr zu tun als mit der border-width. (Verzeihung, die font-size habe ich in diesem Beispiel einfach weg gelassen, ist aber hier nicht wichtig.)

px ist nicht mehr zeitgemäß und nicht anpassungsfähig an verschiedene Bildschirmauflösungen und -größen (24 Zoll PC-Monitor, 15 Zoll NB-Bildschirm, Tablet, Smartphone, 2k, 4k, 8k, usw.), wenn man eine Webseite nicht zentriert oder links sondern gestreckt haben will. Und der Internet Explorer ist scheinbar leider auch nicht mehr zeitgemäß, doch muss man bei der Webseiten-Entwicklung auch diesen Browser berücksichtigen.

Ich habe im body-tag die font-size mit 100%. Alle anderen tags bzw. Werte in meinem Code sind mit em oder % versehen.

Der Firefox hat dieses Problem jedenfalls nicht.

Hat der Internet Explorer ein Problem mit em-Werten (bei border-width) in scrollbaren Divs und sorgt deswegen für die Streifenbildung?
-> Ist dies das Problem?
-> Wie könnte eine Lösung oder ein Workaround aussehen?

Bitte keine Lösung mit px.
-> Weil alle anderen border der Webseite mit em versehen sind und sich dann die verschiedenen border in der Darstellung unterscheiden.
-> Weil ein border mit 1px in 4k, usw. kaum noch zu erkennen ist bzw. immer dünner wird und 2px dann im Vergleich mit den anderen border bei 0.1em wieder zu dick ist.
 
Zuletzt bearbeitet:
Aber du kannst nicht die Tatsache ignorieren, dass em in Relation zu etwas stehen muss, zumindest lese ich das so an verschiedenen Stellen. Wenn die anderen Browser da etwas raten heißt das nicht, dass sie das besser lösen als der IE oder gar dass der IE alt wäre.
Und deine Abneigung gegen px kann ich nicht nachvollziehen, das passt sich doch auf allen Geräten automatisch an. Welches Problem hast du denn damit konkret? Kannst du das mal an einem Beispiel zeigen bitte.
 
cssWelt schrieb:
px ist nicht mehr zeitgemäß und nicht anpassungsfähig an verschiedene Bildschirmauflösungen und -größen
Zum Vergrößern anklicken....

Das ist ein weiterverbreiteter Irrglaube. Aus eigener Erfahrung: ich arbeite gewöhnlich mit absoluten px-Werten und die Seite schaut auf meinem Smartphone dann genauso gut aus wie auf dem großen PC-Bildschirm, da sie automatisch entsprechend skaliert wird...
 
Ja, genau so ist es, Julian. Ich weiß auch nicht, von was cssWelt hier schreibt. Ich versteh es nicht. Mir ist auch nicht klar, wieso man nicht verstehen will dass es relative und absolute Angaben gibt und das zu einer relativen immer mindestens eine absolute gehört, weil sonst keine Relation hergestellt werden kann. Oder bin ich da falsch informiert?
Das hat überhaupt nichts mit veraltet oder topaktuell zu tun. Es braucht beides, sonst gehts nicht.
 
1. Ob die Geräte eine Webseite mit px-Werten skalieren oder ob sich eine Webseite dank Verzicht auf px-Werte strecken und an die Geräte anpassen kann, sieht im Ergebnis unterschiedlich aus. Ich möchte nicht, dass ein Smartphone oder Tablet meine Webseite skaliert, damit sie ins Bild passt. px ist nicht anpassbar sondern wird durch die Geräte angepasst. Das fällt heutzutage aber offenbar Niemandem auf. Ohne px sieht es aber besser aus.

2. Diese Diskussion geht leider am Thema des Threads vorbei.

Bitte nochmal ganz von Vorne (s.o.). Vielleicht weiß Jemand wirklich bescheid, was diese Streifenbildung im Internet Explorer betrifft.
 
cssWelt schrieb:
Diese Diskussion geht leider am Thema des Threads vorbei.
Zum Vergrößern anklicken....
?????

cssWelt schrieb:
Vielleicht weiß Jemand wirklich bescheid...
Zum Vergrößern anklicken....
Das ist ja schon fast unverschämt. Man bemüht sich, testet das sogar extra, serviert die Lösung taggleich auf dem Silbertablett und bekommt dann gesagt, man wisse nicht wirklich Bescheid. Und auf das was man schreibt wird überhaupt nicht eingegangen, Behauptungen werden nicht belegt und am Ende wird sogar Themaverfehlung unterstellt. Du hast dich damit gerade extrem beliebt gemacht! :mad:
 
Das Thema des Threads war nicht, wie toll und aktuell oder veraltet px doch sei und dass sich hier px-Fans angegriffen fühlen sondern wie das Problem mit der Streifenbildung in scrollbaren Divs im Internet Explorer gelöst werden kann.

Bei einer Webseite, die ausschließlich %-Werte und em-Werte verwendet, ist ein einzelner px-Wert keine Lösung, weil die Anpassbarkeit der Webseite nicht mehr gegeben ist und weil der px-border und die em-border in den verschiedenen Bildschirmauflösungen unterschiedlich aussehen (können). Deine "Lösung" hat nichts mit professioneller Webseitengestaltung und -programmierung zu tun. Das soll aber keine Beleidigung sein sondern nur eine Feststellung. Und ich muss mich hier auch nicht beliebt machen. Bitte bleibe sachlich, mikdoe.

Es ist doch nicht schlimm, wenn keiner eine Lösung weiß. Es gibt nicht immer eine Lösung für jedes Problem. Trotzdem vielen Dank.

Viel Spaß noch weiterhin. :)
 
Ich gehe darauf inhaltlich nicht mehr ein. Aber wenn dir die Lösungen von hier nicht gefallen oder nicht professionell genug sind, frag doch hier bitte einfach nichts mehr. Dann braucht man seine Zeit auch nicht damit verschwenden. Ist nur eine Feststellung!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben