Linuchs: Scrollbalken - warum?

problematische Seite

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

  1. problematische Seite

    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

    --
    Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
    - Douglas Adams, The Hitchhiker's Guide To The Galaxy
    1. problematische Seite

      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.

      1. problematische Seite

        @@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 🖖

        --
        “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
        Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
        1. problematische Seite

          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

  2. problematische Seite

    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.

  3. problematische Seite

    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

  4. problematische Seite

    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

    1. problematische Seite

      Hej Linuchs,

      label fehlt auch noch...

      Marc