Question

I am experiencing an issue with Firefox (tested with FF5/win, FF6/win, FF5/mac) having wider margins than any other browser I’ve tested. (IE9/win, Chrome/win, Opera/win, Safari/win, Safari/mac).

Admittedly, the HTML is unusual, I have 5 forms in a row, but I cannot find any documented problems with the idea, or any warning against it.

Here is the code:

HTML

<div style="background-color: rgba(255, 0, 0, 0.5); float: left; height: 82px; padding-left: 5px; padding-top: 12px; width: 502px;">
    <span style="color: #514536; font-weight: bold;">Search By Destination:</span><br />
    <div id="regions" style="margin-top: 5px;">
        <form action="/view-the-collection/" method="post">
            <input type="hidden" id="dest" name="dest" value="Caribbean" />
            <input type="hidden" id="search" name="search" value="1" />
            <button class="imgbtn" type="submit">
                <img src="/a/i/pe_carrib_region.jpg" alt="Caribbean" />
            </button>
        </form>
        <form action="/view-the-collection/" method="post">
            <input type="hidden" id="dest" name="dest" value="Mexico" />
            <input type="hidden" id="search" name="search" value="1" />
            <button class="imgbtn" type="submit">
                <img src="/a/i/pe_mexico_region.jpg" alt="Mexico" />
            </button>
        </form>
        <form action="/view-the-collection/" method="post">
            <input type="hidden" id="dest" name="dest" value="Thailand" />
            <input type="hidden" id="search" name="search" value="1" />
            <button class="imgbtn" type="submit">
                <img src="/a/i/pe_thailand_region.jpg" alt="Thailand" />
            </button>
        </form>
        <form action="/view-the-collection/" method="post">
            <input type="hidden" id="dest" name="dest" value="Southern US" />
            <input type="hidden" id="search" name="search" value="1" />
            <button class="imgbtn" type="submit">
                <img src="/a/i/pe_southus_region.jpg" alt="Southern US" />
            </button>
        </form>                     
        <form action="/view-the-collection/" method="post" style="margin-right: 0px;">
            <input type="hidden" id="dest" name="dest" value="Mustique" />
            <input type="hidden" id="search" name="search" value="1" />
            <button class="imgbtn" type="submit">
                <img src="/a/i/pe_mustique_region.jpg" alt="Mustique" />
            </button>
        </form>
    </div>
</div><br style="clear: both;" />

CSS

#container #regions form {
    float: left;
    margin: 0px 14px 13px 0px;
    padding: 0px;
}

For most browsers, it renders like this:

Except in Firefox, which looks like:

I’ve made sure to remove padding and margins from every element in each of these forms, and it has no effect. I can’t for the life of me figure out what is causing this, whether it is a browser incompatibility, or whether what I’ve coded is completely out of line. Can anyone advise?

Thanks in advance.

Answer 1

Heres a fix. Instead of adding margins to the forms, just set their widths to 97px each, and align the buttons/images to the left!!