Scrollbalken - warum?

[Linuchs]

Moin,

auf dieser Seite wird ein horizontaler Scrollbalken erzeugt und ich habe nicht rausgefunden, warum.

Noch eine Merkwürdigkeit: Input-Feld und Button in der rechten Spalte sollten eigentlich gleich breit sein, bei mir (FF) ist der Button schmäler.

<input
...
name        = "medium_url"
style       = "width:99%"

>

<button
class       = "em08"
style       = "width:99%"

>noch nicht</button>

Wie kann ich die beiden Störungen beheben?

Linuchs

[Der Martin]

Hallo,

auf dieser Seite wird ein horizontaler Scrollbalken erzeugt und ich habe nicht rausgefunden, warum.

das finde ich auf die Schnelle auch nicht heraus, aber ab einer gewissen Fensterbreite (bei mir so um die 1500px) verschwindet der. Ich vermute hier ein unglückliches Zusammenspiel von prozentualen und festen Breitenangaben (in em oder px).

Noch eine Merkwürdigkeit: Input-Feld und Button in der rechten Spalte sollten eigentlich gleich breit sein, bei mir (FF) ist der Button schmäler.

Das input-Element hat ein seitliches padding von 0.2em, der button von 5px.

So long,
 Martin

[Linuchs]

Das input-Element hat ein seitliches padding von 0.2em, der button von 5px.

Okay, ist aber kein großer Unterschied. Jetzt haben beide

padding: 0 5px;

Breitenunterschied bleibt.

[Gunnar Bittersmann]

@@Linuchs

Breitenunterschied bleibt.

Im Firefox gibt’s bei Buttons innendrin noch Padding. Wenn das stört:

button::-moz-focus-inner { margin: -1px; border-width: 1px; padding: 0; }

Siehe https://forum.selfhtml.org/self/2016/jun/28/css-kopieren/1669975#m1669975 ff.

LLAP 🖖

[marctrix]

Hej Gunnar,

Breitenunterschied bleibt.

Im Firefox gibt’s bei Buttons innendrin noch Padding. Wenn das stört:

button::-moz-focus-inner { margin: -1px; border-width: 1px; padding: 0; }

Siehe https://forum.selfhtml.org/self/2016/jun/28/css-kopieren/1669975#m1669975 ff.

Interessant! Kümmert sich wohl meine normalize.css schon drum. Allerdings sollte auch dieses Problem mit box-sizing: border-box; behoben sein.

Warum eigentlich den Vendor-Präfix in deinem Beispiel verwenden?

Man will für keinen Browser einen padding, also würde es folgendes genauso tun:

button { margin: -1px; border-width: 1px; padding: 0; }

Oder nur padding, wenn es nur um den Innenabstand geht...

Marc

[dedlfix]

Tach!

auf dieser Seite wird ein horizontaler Scrollbalken erzeugt und ich habe nicht rausgefunden, warum.

Man kann mit den Entwickler-Tools in den Browsern die DOM-Darstellung aufrufen (Rechtsklick, Element untersuchen) und dann da mal testweise Elemente rauslöschen, bis der Balken verschwindet. So kann man sich dem Übeltäter nähern. Diesem kann man dann über die CSS-Eigenschaften weiter auf den Pelz rücken. Die Eigenschaften lassen sich nämlich ausschalten, so dass man sieht, für welche Auswirkungen sie zuständig sind. Selbst wenn man dann immer noch nicht weiß, wie man das Problem löst, so hat man doch zumindest seine Ursache gefunden.

dedlfix.

[Tabellenkalk]

Hallo,

auf dieser Seite wird ein horizontaler Scrollbalken erzeugt und ich habe nicht rausgefunden, warum.

Die Navigationsleiste ist schuld. Da hast du offensichtlich mit right und left versucht, sowas wie eine Zentrierung hinzukriegen. Erkennbar daran, dass du margin:auto verwendest, damit bist du auf dem richtigen Weg.

Gruß
Kalk

[marctrix]

Hej Linuchs,

auf dieser Seite wird ein horizontaler Scrollbalken erzeugt und ich habe nicht rausgefunden, warum.

Gib mal Deiner nav ein overflow: auto mit - dann verschwindet der untere Scrollbalken. du hast dann zwar einen anderen, aber ich denke, der wird dir beim Finden des Problems hilfreicher sein. ;-)

Noch eine Merkwürdigkeit: Input-Feld und Button in der rechten Spalte sollten eigentlich gleich breit sein, bei mir (FF) ist der Button schmäler.

Dann gestalte die identisch.

Deine Fehlersuche wird durch das Gemisch von inline-Styles (böse) und Verwendung eines zentralen Stylesheets (gut) extrem erschwert.

Lösche mal alle inline-Styles und schreibe in Deine CSS-Datei:

input[type="url"], button {
    width: 100%;               /* So breit wie das Elternelement */
    box-sizing: border-box;    /* padding und border werden NICHT zum Inhalt addiert */
    border: 1px solid #008;    /* an Deine Wünsche anpassen */
    padding: .25em;            /* an Deine Wünsche anpassen */
}

Vergiss nicht, im HTML den Input-Type von text auf url zu ändern.

Aber eigentlich müsstest du die gesamte Seite mal aufräumen. Anscheinend bist du dabei, da es ja bald eine neue Version geben soll?!?

Marc

[marctrix]

Hej Linuchs,

label fehlt auch noch...

Marc