Unerwünschter Scrollbalken im IE 11

[Achot]

Hallo,

ich platziere eine Box mittig auf meiner Seite mit folgenden Angaben

body, html { 
	margin:0; 
	padding:0; 
	width:100%; 
	height:100%; 
	background-color: #efefef;
}

.benutzerLogin {
	width:440px; 
	height:auto; 
	position:absolute; 
	top:50%; 
	left:50%; 
	transform:translateX(-50%) translateY(-50%); 
	background:#fff;
}

Im IE habe ich dadurch einen Scollbalken, der eigentlich bei einer großen Auflösung nicht da sein müsste. Der Firefox und Chrome stellen es korrekt da. Laut http://caniuse.com/#search=transform wird transform vom IE unterstützt.

[MrMurphy1]

Hallo

Im IE habe ich dadurch einen Scollbalken

Nö. Du wünscht dir, dass das Problem an dem von dir genannten CSS liegt, tut es aber nicht.

Tip: Verwende zum Zentrieren Flexbox.

Gruss

MrMurphy

[Achot]

Mehr habe ich nicht

<section class="benutzerLogin">
	<figure>
	  <img src="img/logo.png" alt="Logo">
	  <figcaption>Beschreibung zum Logo</figcaption>
	</figure>

	<form action="" method="POST">
        <input type="text" placeholder="E-Mail Adresse" name="user_nickname" required>
        <input type="password" placeholder="Passwort" name="passwort" required>
        <p class="p-vergessen">
           <a href="#" title="">Passwort vergessen?</a> <span class="s">|</span> 
   	   <a href="#" title="">Account anlegen</a>
   	</p>
        <input type="submit" value="Login" name="einloggen" id="send">
    </form>
</section>

Und ja, ich weiß dass ich bei den input Felder kein Label habe, darauf habe ich ganz bewusst verzichtet. Darüber muss erst gar keine Diskussion aufkommen, da dieses mit meinem Problem nichts zu tun hat.

Hier noch das CSS

body, html { 
	margin:0; 
	padding:0; 
	width:100%; 
	height:100%; 
	background-color: #efefef;
}

.benutzerLogin {
	width:440px; 
	height:auto; 
	position:absolute; 
	top:50%; 
	left:50%; 
	transform:translateX(-50%) translateY(-50%); 
	background:#fff;
}

.benutzerLogin img {
	max-width: 60%;
	height: auto;
}

.benutzerLogin figcaption {
        width: 61%;
        position: absolute;
        top: 13.6em;
        color: #bfbfbf;
        left: 9.8em;
}	

.benutzerLogin form {
	margin-top:3em;
}

.benutzerLogin form input { 
	margin:4% 10% 0 10%; 
	width:80%; 
	padding:5%; 
	display:block; 
	border:none; 
	border:1px solid #dadada; 
}

.benutzerLogin input:focus { 
	outline:none; 
	background-size:100% 100%;
}

.benutzerLogin #send { 
	background:#dadada; 
	border:none; 
	color:#777; 
	width:80%; 
	margin:5% 10% 10% 10%; 
	cursor:pointer;
}

.benutzerLogin #send:hover { 
	background:#666; 
	color:#fff;
}

[Matthias Apsel]

Hallo Achot,

Und ja, ich weiß dass ich bei den input Felder kein Label habe, darauf habe ich ganz bewusst verzichtet. Darüber muss erst gar keine Diskussion aufkommen, da dieses mit meinem Problem nichts zu tun hat.

Du musst aber in Kauf nehmen, dass in diesem Forum darauf hingewiesen wird, dass das keine gute Idee ist, und man das nicht tun sollte. Schließlich lesen diesen Thread auch andere Leute.

Da mit dir schon mehrfach darüber diskutiert wurde, erübrigt sich diese.

Du kannst natürlich machen, was du möchtest.^[1] Für alle anderen: label-Elemente sind für die Benutzbarkeit von Formularen notwendig.

Bis demnächst
Matthias

---

1. Ich könnte mir vorstellen, dass Barrierefreiheit ein Kriterium für Suchmaschinen darstellt. Siehe https://forum.selfhtml.org/m1685583 ff. ↩︎

[Achot]

Du kannst natürlich machen, was du möchtest.[^Barrierefreiheit] Für alle anderen: label-Elemente sind für die Benutzbarkeit von Formularen notwendig.

Hör doch einfach auf mit so eine Provokation ständig. Lass es doch einfach mal gut sein und nimm es so hin wie es jemand schreibt. Schau lieber auf deine eigene Fehler, die ihr hier bei SELFHTML ist bevor du immer mit dem Finger auf andere zeigst.

Dein Posting hat NICHTS mit meinem Problem zu tun, Hauptsache mal wieder ein Kommentar abgelassen dass man meint, du bist der größte und der beste. Lächerlich.

[dedlfix]

Tach!

Hör doch einfach auf mit so eine Provokation ständig. Lass es doch einfach mal gut sein und nimm es so hin wie es jemand schreibt.

Die Freiheit, die du für dich forderst, musst du auch anderen zugestehen. Auch du kannst es einfach hinnehmen, dass jemand eine andere Meinung dazuschreibt.

dedlfix.

[Achot]

Hallo,

Die Freiheit, die du für dich forderst, musst du auch anderen zugestehen. Auch du kannst es einfach hinnehmen, dass jemand eine andere Meinung dazuschreibt.

man muss es doch nicht jedesmal wiederholen? Einmal reicht doch?

[dedlfix]

Tach!

Die Freiheit, die du für dich forderst, musst du auch anderen zugestehen. Auch du kannst es einfach hinnehmen, dass jemand eine andere Meinung dazuschreibt.

man muss es doch nicht jedesmal wiederholen? Einmal reicht doch?

Nö, finde ich nicht. Wenn du eine Website mit einem Menü versehen möchtest, musst du das auch auf jeder Seite wiederholen, sonst ist es nicht da, wenn du auf einer Unterseite einsteigst. So ähnlich verhält es sich mit Threads in einem Forum. Wenn eine Anmerkung nicht direkt dabeisteht, ist sie quasi nicht vorhanden.

dedlfix.

[Matthias Apsel]

Hallo Achot,

man muss es doch nicht jedesmal wiederholen? Einmal reicht doch?

Für dich vielleicht. Für jemanden, der die Wiedeholungen nicht gelesen hat, nicht.

Bedenke, dass sich die Antworten nicht ausschließlich an dich richten.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Achot,

Und ja, ich weiß dass ich bei den input Felder kein Label habe, darauf habe ich ganz bewusst verzichtet. Darüber muss erst gar keine Diskussion aufkommen, da dieses mit meinem Problem nichts zu tun hat.

Wenn du der Meinung bist, dass die Beschriftungen dein Layout kaputt machen und deine Zielgruppe das Formular auch ohne sie ordentlich bedienen kann, kannst du sie einfach ausblenden.

@media screen {
  label { display: none; }
}

So ist allen geholfen: Dir, weil das Layout nicht kaputt ist; Nichtsehenden, weil sie das Formular dennoch bedienen können.

Bis demnächst
Matthias

[Achot]

Hallo,

Wenn du der Meinung bist, dass die Beschriftungen dein Layout kaputt machen und deine Zielgruppe das Formular auch ohne sie ordentlich bedienen kann, kannst du sie einfach ausblenden.

@media screen {
  label { display: none; }
}

jetzt bekommt der @Gunnar Bittersmann bestimmt ein Herzkasper, er sagt doch ständig man soll einem Label kein display:none geben ;) Aber wenn ich es ausblende, dann kann ich es doch direkt weg lassen?

[dedlfix]

Tach!

@media screen {
  label { display: none; }
}

Aber wenn ich es ausblende, dann kann ich es doch direkt weg lassen?

Mit obigem Code wird es ja nur für Bildschirme ausgeblendet. Für andere Medien bleibt es sichtbar. Müsste man vielleicht noch um Print-Medien erweitern ...

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Mit obigem Code wird es ja nur für Bildschirme ausgeblendet. Für andere Medien bleibt es sichtbar.

Alle Nutzer verwenden aber Bildschirme. Auch nicht- oder schwachsehende.

Müsste man vielleicht noch um Print-Medien erweitern ...

Alle, außer Internetausdrucker.

LLAP 🖖

[Matthias Apsel]

Hallo Achot,

jetzt bekommt der @Gunnar Bittersmann bestimmt ein Herzkasper, er sagt doch ständig man soll einem Label kein display:none geben ;) Aber wenn ich es ausblende, dann kann ich es doch direkt weg lassen?

Durch die Mediaquery blendest du das label nur auf Bildschirmen aus. Nutzer von Screenreadern bekommen die entsprechenden (und für sie notwendigen) Beschriftungen dennoch vorgelesen.

Durch ein display:none ohne MQ oder ein Weglassen der Label, stehen diese Informationen niemandem mehr zur Verfügung.

Bis demnächst
Matthias

[Achot]

Hallo,

Durch die Mediaquery blendest du das label nur auf Bildschirmen aus. Nutzer von Screenreadern bekommen die entsprechenden (und für sie notwendigen) Beschriftungen dennoch vorgelesen.

damit kann ich leben. Und die Infos habe ich noch nie bekommen ;) Hättest du auch im ersten Posting direkt schreiben können, dann hätte ich mich erst gar nicht so aufregen müssen. Entschuldigung.

Dann werde ich dieses mal erweitern. Allerdings ist damit mein Problem mit dem Balken rechts noch nicht aus der Welt geschafft.

[Matthias Apsel]

Hallo Achot,

Allerdings ist damit mein Problem mit dem Balken rechts noch nicht aus der Welt geschafft.

Ursache ist

.benutzerLogin form {
    margin-top: 3em;
}

Aber: Verwende flexbox zum zentrieren.

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

Das gleiche auch für das Formular selbst.

Bis demnächst
Matthias

[Achot]

Hallo,

Wenn ich das nutze ist mein ganzes Formular kapput. Dann muss ich mit dem Scrollbalken erst einmal leben. Wenn ich margin-top: 3em; entferne, sehe ich keine Veränderung.

[Matthias Apsel]

Hallo Achot,

Wenn ich margin-top: 3em; entferne, sehe ich keine Veränderung.

Ein Zeichen, dass es nicht notwendig ist.

Im IE11 ist nach dieser Änderung der Scrollbalken weg, im Edge hat das keinen Einfluss.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Achot

Durch die Mediaquery blendest du das label nur auf Bildschirmen aus. Nutzer von Screenreadern bekommen die entsprechenden (und für sie notwendigen) Beschriftungen dennoch vorgelesen.

damit kann ich leben. Und die Infos habe ich noch nie bekommen ;)

Das wäre auch besser so geblieben; die Information ist nämlich falsch.

Du kannst aber sicher auch damit leben:

.visually-hidden
{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

Was nicht auf dem Bildschirm zu sehen sein soll, aber von Screenreadern vorgelesen werden soll, bekommt die Klasse visually-hidden verpasst.

Man könnte die Styles auch den entsprechenden Elementen direkt verpassen, aber die Information, dass etwas nicht visuell, aber doch von AT (assisive technology) wiedergegeben wird, darf durchaus im Markup verankert sein.

---

Label visuell zu verstecken und die Beschriftung mit placeholder zu machen ist dennoch unsinnig. Vielleicht kannst du auch damit leben, Label wie Placeholder aussehen zu lassen.

LLAP 🖖

[Gunnar Bittersmann]

@@Matthias Apsel

Durch die Mediaquery blendest du das label nur auf Bildschirmen aus. Nutzer von Screenreadern bekommen die entsprechenden (und für sie notwendigen) Beschriftungen dennoch vorgelesen.

Nei-en!

Warum heißt es wohl Screenreader?

Genau, weil der vorliest, was auf dem Bildschirm ist. Er liest nicht vor, was nicht auf dem Bildschirm ist: weder Elemente mit display: none noch solche mit visibility: hidden. (Elemente mit opacity: 0 werden vorgelesen, AFAIK.)

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Durch die Mediaquery blendest du das label nur auf Bildschirmen aus. Nutzer von Screenreadern bekommen die entsprechenden (und für sie notwendigen) Beschriftungen dennoch vorgelesen.

Nei-en!

Warum heißt es wohl Screenreader?

Genau, weil der vorliest, was auf dem Bildschirm ist. Er liest nicht vor, was nicht auf dem Bildschirm ist: weder Elemente mit display: none noch solche mit visibility: hidden. (Elemente mit opacity: 0 werden vorgelesen, AFAIK.)

Aha. Das war mir nicht bewusst.

Bis demnächst
Matthias

[JürgenB]

Hallo,

wenn man etwas visuell verbergen möchte, sollte man es lieber rausschieben, z.B. absolut positioniert und dann >100vw nach links.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

wenn man etwas visuell verbergen möchte, sollte man es lieber rausschieben, z.B. absolut positioniert und dann >100vw nach links.

−9999px hack? Nein.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

wenn man etwas visuell verbergen möchte, sollte man es lieber rausschieben, z.B. absolut positioniert und dann >100vw nach links.

−9999px hack? Nein.

da wird der Text aber auch nur nach links geschoben. Und wie man so einzelne Elemente, wie z.B. die Inputs beim Checkboxhack verstecken kann, sehe ich erst mal noch nicht.

Auch das Performance-Argument sehe ich jetzt nicht als entscheidend an.

Ich würde sagen, textident ist ein weiterer Weg, etwas zu verstecken.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Ich würde sagen, textident ist ein weiterer Weg, etwas zu verstecken.

Der übliche Weg ist dieser.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Durch die Mediaquery blendest du das label nur auf Bildschirmen aus. Nutzer von Screenreadern bekommen die entsprechenden (und für sie notwendigen) Beschriftungen dennoch vorgelesen.

Nei-en!

Ein Test bestätigt deine Aussage.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Gunnar Bittersmann

[Screenreader] liest nicht vor, was nicht auf dem Bildschirm ist: weder Elemente mit display: none noch solche mit visibility: hidden.

Und auch nicht solche mit width: 0 oder height: 0.

Weshalb das beim üblichen Weg, Elemente visuell zu verstecken auf 1px gesetzt wird.

LLAP 🖖

[Gunnar Bittersmann]

@@Achot

Und ja, ich weiß dass ich bei den input Felder kein Label habe, darauf habe ich ganz bewusst verzichtet. Darüber muss erst gar keine Diskussion aufkommen, da dieses mit meinem Problem nichts zu tun hat.

Die Unbenutzbarkeit deiner Seite ist für dich kein Problem, aber Scrollbalken im IE 11 sind ein Problem?

Du setzt eindeutig falsche Prioritäten.

LLAP 🖖