How to Prevent the Floating Layout Wrapping When Firefox Zoom Is Reduced

Handling browser zoom (zoom causes wrapping)

The issue was bad data. Some of the category headers that I was using had close divs hidden in them. This caused layout issues on some pages, but because of the hierarchy, was not utterly fatal (and chrome handles some of these problems pretty gracefully). I cleared up the data issue and the pages all work as intended.....

I really should remember GIGO in these situations.

How do I stop a CSS layout from distorting when zooming in/out?

As this question still gets constant views, I'll post the solution I use currently.

CSS Media Queries:

@media screen and (max-width: 320px) { 

/*Write your css here*/

}

@media screen and (max-width: 800px) { 

}

Check out:
CSS-Tricks + device sizes and Media Queries

Chrome and Firefox handle zoom differently. How to deal with this in my CSS

adding white-space:nowrap; to #menu keeps all menu items in one line during zoom, which means that my site now looks ok. However, chrome and firefox still behave differently under zoom, but i guess that's just something that developers have to allow for.

HTML Elements wrapping on zoom in / out

The only wrapping I get is the Z going onto a new line at a few zoom increments on Firefox. Chrome and IE seem to work fine for me.

Something you could do is increase the width of the .letters class.

What I would probably do in order to have more control over the exact width of the .letters a tags is change them to float and explicitly state the width like so:

<html>
<head>
    <style>
    .filters { position: absolute; background: #ff0000 0 0 no-repeat; width: 970px; height: 31px; left: 0; text-transform: uppercase; }
    .letters { float: left; margin: 2px 0 0 7px; width: 710px; height: 30px; background-color: orange;  }
    .screenname {width: 244px; background-color: green; float: left; }
    /* flooat(710 / 27) = 26px  */
    .filters .letters a { float:left; display:block; text-align:center; width:26px; }
    /* fix offset */
    .filters .letters a:first-child { margin-left:8px; }
    .filters .letters a.disabled { color: #36373a; cursor: default; }
    .filters a { font: bold italic 12px/28px Arial, sans-serif; }
    </style>
</head>
<body>
    <div class="filters">
        <div class="screenname">
            Screen Name
        </div>
        <div class="letters">
            <a href="#" rel="#">#</a>
            <a href="#" rel="A">A</a>
            <a href="#" rel="B">B</a>
            <a href="#" rel="C">C</a>
            <a href="#" rel="D">D</a>
            <a href="#" rel="E">E</a>
            <a href="#" rel="F">F</a>
            <a href="#" rel="G">G</a>
            <a href="#" rel="H">H</a>
            <a href="#" rel="I">I</a>
            <a href="#" rel="J">J</a>
            <a href="#" rel="K">K</a>
            <a href="#" rel="L">L</a>
            <a href="#" rel="M">M</a>
            <a href="#" rel="N">N</a>
            <a href="#" rel="O">O</a>
            <a href="#" rel="P">P</a>
            <a href="#" rel="Q">Q</a>
            <a href="#" rel="R">R</a>
            <a href="#" rel="S">S</a>
            <a href="#" rel="T">T</a>
            <a href="#" rel="U">U</a>
            <a href="#" rel="V">V</a>
            <a href="#" rel="W">W</a>
            <a href="#" rel="X">X</a>
            <a href="#" rel="Y">Y</a>
            <a href="#" rel="Z">Z</a>
        </div>
    </div>
</body>

How to Prevent the Floating Layout Wrapping When Firefox Zoom Is Reduced

Handling browser zoom (zoom causes wrapping)

How do I stop a CSS layout from distorting when zooming in/out?

Chrome and Firefox handle zoom differently. How to deal with this in my CSS

HTML Elements wrapping on zoom in / out

Related Topics

Leave a reply