CODEWITHSUNDEEP
htmlcss
user1032531
user1032531

Reputation: 26281

Firefox browser zoom effect on CSS layout

I have a form using the below HTML/CSS. It looks like:

enter image description here

When viewing with Firefox 31, if I zoom out (https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages), it looks like:

enter image description here

A live demo is located at http://jsfiddle.net/29fb020c/.

What causes this and how can it be fixed?

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Form Test</title>
        <style type="text/css">
            html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
                background: none repeat scroll 0 0 transparent;
                border: 0 none;
                font-size: 100%;
                margin: 0;
                outline: 0 none;
                padding: 0;
                vertical-align: baseline;
            }

            div.form-input, div.form-select {
                padding: 2px;
            }

            label.forInput {
                width: 200px;
                clear: both;
                float: left;
                font-size: 11px;
                font-weight: bolder;
            }

            input, select {
                width: 300px;
            }

            .findOnMap {
                float: right;
            }
            form {
                width: 536px;
            }

        </style> 
    </head>
    <body>
        <form class="dialog-form" id="addAccount" method="post" novalidate="novalidate">
            <div class="form-input">
                <label for="name" class="forInput">Name:</label>
                <input type="text" id="name" name="name" aria-required="true">
            </div>
            <div class="form-input">
                <label for="address" class="forInput">Street Address:</label>
                <input type="text" value="" id="address" name="address" autocomplete="off" placeholder="Enter a location">
                <a href="javascript:void(0)" class="findOnMap">map</a>
            </div>
            <div class="form-input">
                <label for="city" class="forInput">City:</label>
                <input type="text" value="" id="city" name="city">
            </div>
            <div class="form-input">
                <label for="state" class="forInput">State:</label>
                <input type="text" value="" id="state" name="state">
            </div>
        </form>
    </body>
</html>

Upvotes: 0

Views: 491

Answers (2)

Riskbreaker
Riskbreaker

Reputation: 4791

You need to change some styling so it will fit either case since all browser slighty go with the style that is determined so in this case make for:

form {width: 600px}

.findOnMap {display: inline-block}

You can see it here:

http://jsfiddle.net/29fb020c/10/

I checked in Chrome and FF and zoomed it and it does not break.

Upvotes: 0

tzvig
tzvig

Reputation: 208

You need to change the width of your form. If you enlarge it, even when you zoom out several times it wont ruin your layout. I changed width to 650px and removed .findOnMap{ float:right} and it looks fine.

Upvotes: 3

Related Questions