Farbige Border um Themenweltbanner wird bei Viewportänderung abgeschnitten

Hallo Zusammen,

trotz stundenlangem Probieren und Herumsuchen finde ich keine Lösung. Ich möchte in einer Themenwelt 3-spaltig 6 Banner kachelmässig anbringen und jedes Banner lessmässig mit einem farbigen Rand umgeben. Leider werden immer einzelne Ränder nicht angezeigt wenn die Größe des Viewports sich verändert. Ich habe nachfolgend auf meiner Testspielwiese ( http://bit.ly/28Jlz4P ) 6 weisse Banner zum Probieren aufgezogen und die less wie folgt ergänzt:

.emotion–banner {
    border: 1px solid red;}

 

Aber egal was ich lessmässig anstelle, es klappt nicht. Irgendwelche Tipps?

Danke und schöne Grüße
 

Wenn ich mich recht erinner, hat ein EKW-Element ja keinen “Rand” - die Größe wird dann ohne Rand berechnet. Nun Verpasst Du der Box einen Rand - der kommt dann ja noch zur Größe dazu und passt somit nicht mehr in den umgebenden Container.

Gibt dem Element noch ein “box-sizing:border-box;” mit - dann wird die Größe vom border nicht aufgeschlagen, sondern der Container entsprechend vorher verkleinert.

Danke für den Hinweis. Habe jetzt alle möglichen Elemente als border-box definiert. Ohne Erfolg. Entweder ich mach was falsch oder es ist so nicht zu beeinflussen???

Hallo,

bei Deiner Einkaufswelt verwendest Du den „Resize“ Modus bei dem eine CSS Skalierung vorgenommen wird. Hierbei werden auch sämtliche Styles „skaliert“. Dein bereits aus nur 1px bestehender Border wird also auch kleiner. Je nach Sub-Pixel Rendering der verschiedenen Browser kann es sein, dass dieser nicht richtig dargestellt wird.

Sonnige Grüße,
Phil

Das klingt logisch, danke für die Info. Hast du denn sonst eine Idee, wie man das realisieren könnte?