Content verschiebt sich bei Darstellung im Browser nach links

[Maxi]

Hallo Leute, folgendes Problem: Wenn ich von der index.html-Seite meiner Homepage auf andere Seiten meiner Webpräsenz wechsele, verschiebt sich der komplette Darstellungsbereich um eine Kleinigkeit nach links. Dies ist bei einigen, aber nicht bei allen Seiten zu beobachten. Komischerweise sind die betroffenen Seiten im FF und IE nicht dieselben... Ich verstehe das nicht, weil der Code, der m.E. die entscheidende Zentrierung des Content festlegt, bei allen meinen Seiten identisch ist:

html {
	box-sizing: border-box;
}
*, ::before, ::after {
	box-sizing: inherit;
}
 
body {
	margin: 10px auto;
	max-width: 70em;
	font-family: sans-serif;
	color: #333333;
}

Kann da jemand helfen? Gruß

[Matthias Apsel]

Hallo Maxi,

Geht diese Verschiebung mit dem Erscheinen von Scrollbalken einher?

Bis demnächst
Matthias

[Maxi]

Nein - hat damit nichts zu tun. Kannst ja mein Problem gern auch mal "live" nachsehen unter drkukowski.de ...

[Vollzitat]

[MrMurphy1]

Hallo,

das hat meiner Ansicht nach doch mit den ein- und ausgeblendeten Scrollbalken zu tun

Die Fenster und / oder die Zoomstufe sind bei den verschiedenen Browsern unterschiedlich groß, deshalb verhalten sich die Seiten wahrscheinlich teilweise unterschiedlich.

Gruss

MrMurphy

[Matthias Apsel]

Hallo Maxi,

Nein - hat damit nichts zu tun. Kannst ja mein Problem gern auch mal "live" nachsehen unter drkukowski.de ...

Hab ich gemacht. Und festgestellt, dass es sehr wohl mit den Scrollbalken zu tun hat. Etwa, wenn ich auf „Aktuelles“ wechsele. Dieser Inhalt ist länger als mein Browserfenster und deshalb erscheinen Scrollbalken, die den Inhalt nach links schieben.

[Vollzitat]

Bitte vermeide Vollzitate. Zitiere nur das, worauf du dich konkret beziehst. Danke. Und antworte auf den richtigen Beitrag, damit der Antworter ggf. eine Mitteilung bekommt, dass jemand geantwortet hat.

Bis demnächst
Matthias

[quincunx]

Hallo,

wenn du in dem css

body {
    margin: 10px auto;
    max-width: 70em;
    font-family: sans-serif;
    color: #333333;
}

das Scrolling

overflow-y:scroll;

Versuchsweise anschaltest, wird zwar rechts immer der Bereich für den Scrollbalken mitgerendert, doch das Verschieben nach Links wird dadurch aufgehoben ;-)

Beste Grüße

QuinCunX

[Maxi]

Vielen Dank. Das ist ein guter Hinweis. Zwischnezeitlich habe ich das Problem etwas unprofessionell so gelöst, dass ich die seiten ohne Scrollbalken durch <br> soweit nach unten ausgedehnt habe, dass sie nun auch einen Scrollbalken bekommen ...

Gruß Maxi

[Gunnar Bittersmann]

@@Maxi

Das ist ein guter Hinweis.

Nicht so wirklich. Nicht nutzerfreundlich.

Zwischnezeitlich habe ich das Problem etwas unprofessionell so gelöst, dass ich die seiten ohne Scrollbalken durch <br> soweit nach unten ausgedehnt habe

Das hättest du auch mit einer Mindesthöhenangabe hingebkommen: html { min-height: 101vh }

Aber wie gesagt bist du besser dran, die Breite anzugeben.

LLAP 🖖

[Gunnar Bittersmann]

@@quincunx

… wird zwar rechts immer der Bereich für den Scrollbalken mitgerendert …

Einen Scrollbalken darszustellen, wenn es gar nichts zu scrollen gibt, also ein UI-Element anzubieten, das überhaupt keine Funktion hat, ist nicht das, was man den Nutzern zumuten will.

Besser ist es dafür zu sorgen, dass die Box des html-Elements so breit ist wie der Viewport:

html
{
	width: 100vw;
	overflow-x: hidden;
}

(Funktioniert im Firefox. Andere Browser hab ich jetzt nicht getestet.)

Ergänzung: Damit Inhalte nicht unter einer evtl. angezeigten Scrollbar verschwinden, wäre entsprechendes Padding vorzusehen.

LLAP 🖖

[quincunx]

@@Gunnar

…also ein UI-Element anzubieten, das überhaupt keine Funktion hat, ist nicht das, was man den Nutzern zumuten will…

Das hast du schön gesagt, doch den Bereich für den Scrollbalken Versuchsweise anzuschalten, rendert nur der Bereich für den Scrollbalken nicht das UI-Element!

Zumindest hilft es zu verstehen warum die Seite Links nicht immer den gleichen Abstand hat.

beste gruesse qx

[Matthias Apsel]

Hallo Maxi,

noch ein anderer Hinweis zu deiner Seite.

Du verwendest HTML5-Elemente. Das ist gut. Du verwendest aber nicht den richtigen doctype. Ersetze <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 …"> durch <!doctype html>

Bis demnächst
Matthias

[Maxi]

Hallo matthias,

danke für den Hinweis. Ich werde ihn berücksichtigen ...

Gruß Maxi

< Ersetze

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 …"> durch <!doctype html>

[Msass]

Auch wenn das eigentliche Problem gelöst ist:

Mir ist aufgefallen, dass einige Unterseiten abgerundete Ecken haben und einige nicht. Ich empfehle, das Styling hier einheitlich zu lassen.