Super wierd FireFox problem/Bug ? Please help

[davecph]

I'm constructing a website with a layout created with div-tags. They have a fixed width, float left, and display inline. When one of the div's contain a select-element the right-most div floats down for no apparent reason, but when the select-elements are gone they all align as expected. No css apply to the select-elements.
image of prob.: http://sdc.novasol.com/site/nov/TMP/withSelectBoxes.gif
image of expected: http://sdc.novasol.com/site/nov/TMP/noSelectBoxes.gif

<div id="mainArea">
    <!-- left moduleArea -->
    <div class="leftModuleArea sideModuleArea width190" style="background-color:#999999">
        <!-- modules goes here -->
        <div class="type01 module"> Her er et modul </div>
        <div class="type01 module"> Her er et modul </div>
        <!-- end - modules goes here -->
    </div>
    <!-- end - left moduleArea -->
    <!-- contentArea -->
    <div class="contentArea">
        <div class="content width530" style="display:inline;">
            <!-- module -->
            <div class="module type10Module">
                <!-- module header area -->
                <div class="clickable headerArea" onClick="showHideLayers('contentID09','imgID09','buttonDown','buttonUp' )">
                    <!-- ugly firefox fix -->
                    <img src="images/transDot.gif" class="FF_Fix" />
                    <!-- end - ugly firefox fix -->
                    <div class="buttonDown" id="imgID09"></div>
                    <h2>Lyns&oslash;gning</h2>
                    <h3>V&aelig;lg land, antal, periode og klik s&oslash;g, for at finde ledige sommerhuse </h3>
                </div>
                <!-- end - module header area -->
                <!-- module content are -->
                <div class="moduleContentArea">
                    <div class="moduleContentTop"><spacer width="1px" height="1px"></spacer></div>
                    <div class="moduleContent" style="height:400px;">
                        <!-- module content -->
                        <!-- end - module content -->
                        <form>
                            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td align="right">
                                        <h4>Omr&aring;de</h4>
                                    </td>
                                    <td>
                                        <select name="C" class="size100w" onChange="setAction(this.options[selectedIndex].value)">
                                            <option value="xx" selected >V&aelig;lg</option>
                                            <option value=208>Danmark</option>
                                            <option value=578>Norge</option>
                                            <option value=752>Sverige</option>
 
                                        </select>
                                    </td>
                                    <td rowspan="6">
                                        <div class="browseMapArea mapXXXxXXX" style="width:200px; height:250px; background-color:#CCCCCC;"></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <h4>Antal</h4>
                                    </td>
                                    <td>
                                        <select name="PE" class="size100w" id="select">
                                            <option value="yy" selected >V&aelig;lg</option>
                                            <option value=1>1 Person</option>
 
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <h4>Ankomst</h4>
                                    </td>
                                    <td>
                                        <input type="text" class="size100w" name="SD" value="" onFocus="validateStartDate( this.form ); this.blur();return true;" onClick="makeLink('search','SD',document.search.C.options[document.search.C.options.selectedIndex].value)">
                                        <a href="javascript:makeLink('search','SD',document.search.C.options[document.search.C.options.selectedIndex].value)"> <img src="http://sdc.novasol.com/pic/nov/images/transDot.gif" class="calendar" alt="V&aelig;lg dato"/></a><a href="javascript:makeLink('search','SD',document.search.C.options[document.search.C.options.selectedIndex].value)"></a></td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <h4>Afrejse</h4>
                                    </td>
                                    <td>
                                        <input name="ED" value="" class="size100w" onFocus="this.blur(); return true;" onClick="makeLink('search','ED',document.search.C.options[document.search.C.options.selectedIndex].value)">
                                        <a href="javascript:makeLink('search','ED',document.search.C.options[document.search.C.options.selectedIndex].value)"> <img src="http://sdc.novasol.com/pic/nov/images/transDot.gif" class="calendar" alt="V&aelig;lg dato"/> </a></td>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                    <td align="right">
                                        <div class="button type01_h30px" style="float:right;">
                                            <div class="arrow">
                                                <div class="buttonL"></div>
                                                <div class="buttonMain"> <a href="#" onClick="doSubmit(document.search.name);"> S&oslash;g</a> </div>
                                                <div class="buttonR"></div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                    <td align="right">
                                        <p id="moreSearchCriteria"><a href="#" class="lookLikeLink" onClick="javascript:doAdvSearch()"> Flere s&oslash;gekriterier</a> </p>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <div class="moduleContentBottom"><spacer width="1px" height="1px"></spacer></div>
                </div>
                <!-- end - module content area -->
                <div class="moduleBottom"><spacer width="1px" height="1px"></spacer></div>
            </div>
            <!-- end - module -->
        </div>
    </div>
    <!-- end - contentArea -->
    <!-- right moduleArea -->
    <div class="rightModuleArea sideModuleArea width190" style=" background-color:#3399FF;">
        <!-- modules goes here -->
        <div class="module type08Module">
            <!-- module header area -->
            <div class="headerArea" >
                <!-- ugly firefox fix -->
                <img src="images/transDot.gif" class="FF_Fix" />
                <!-- end - ugly firefox fix -->
                <div class="buttonDown" id="imgID02"></div>
                <h2>Newsletter</h2>
                <h3>- sign up now </h3>
            </div>
            <!-- end - module header area -->
            <!-- module content are -->
            <div class="moduleContentArea" id="contentID02">
                <div class="moduleContentTop"><spacer width="1px" height="1px"></spacer></div>
                <div class="moduleContent" >
                    <!-- module content -->
                    <p>great deals and good news straight to your inbox </p>
                    <form name="form2" method="post" action="">
                        <input name="textfield" type="text" class="size150w">
                    </form>
                    <div class="button type02_h24px">
                        <div class="v">
                            <div class="buttonL"></div>
                            <div class="buttonMain"><a href="#">knap text</a></div>
                            <div class="buttonR"></div>
                        </div>
                    </div>
                    <!-- end - module content -->
                </div>
                <div class="moduleContentBottom"><spacer width="1px" height="1px"></spacer></div>
            </div>
            <!-- end - module content area -->
            <div class="moduleBottom"><spacer width="1px" height="1px"></spacer></div>
        </div>
        <div class="module type08Module">
            <!-- module header area -->
            <div class="headerArea" >
                <!-- ugly firefox fix -->
                <img src="images/transDot.gif" class="FF_Fix" />
                <!-- end - ugly firefox fix -->
                <div class="buttonDown" id="imgID02"></div>
                <h2>Newsletter</h2>
                <h3>- sign up now </h3>
            </div>
            <!-- end - module header area -->
            <!-- module content are -->
            <div class="moduleContentArea" id="contentID02">
                <div class="moduleContentTop"><spacer width="1px" height="1px"></spacer></div>
                <div class="moduleContent" >
                    <!-- module content -->
                    <p>great deals and good news straight to your inbox </p>
                    <form name="form2" method="post" action="">
                        <input name="textfield" type="text" class="size150w">
                    </form>
                    <div class="button type02_h24px">
                        <div class="v">
                            <div class="buttonL"></div>
                            <div class="buttonMain"><a href="#">knap text</a></div>
                            <div class="buttonR"></div>
                        </div>
                    </div>
                    <!-- end - module content -->
                </div>
                <div class="moduleContentBottom"><spacer width="1px" height="1px"></spacer></div>
            </div>
            <!-- end - module content area -->
            <div class="moduleBottom"><spacer width="1px" height="1px"></spacer></div>
        </div>
        <div class="module type08Module">
            <!-- module header area -->
            <div class="headerArea" >
                <!-- ugly firefox fix -->
                <img src="images/transDot.gif" class="FF_Fix" />
                <!-- end - ugly firefox fix -->
                <div class="buttonDown" id="imgID02"></div>
                <h2>Newsletter</h2>
                <h3>- sign up now </h3>
            </div>
            <!-- end - module header area -->
            <!-- module content are -->
            <div class="moduleContentArea" id="contentID02">
                <div class="moduleContentTop"><spacer width="1px" height="1px"></spacer></div>
                <div class="moduleContent" >
                    <!-- module content -->
                    <p>great deals and good news straight to your inbox </p>
                    <form name="form2" method="post" action="">
                        <input name="textfield" type="text" class="size150w">
                    </form>
                    <div class="button type02_h24px">
                        <div class="v">
                            <div class="buttonL"></div>
                            <div class="buttonMain"><a href="#">knap text</a></div>
                            <div class="buttonR"></div>
                        </div>
                    </div>
                    <!-- end - module content -->
                </div>
                <div class="moduleContentBottom"><spacer width="1px" height="1px"></spacer></div>
            </div>
            <!-- end - module content area -->
            <div class="moduleBottom"><spacer width="1px" height="1px"></spacer></div>
        </div>
        <!-- end - modules goes here -->
    </div>
    <!-- end - right moduleArea -->
</div>

[drhowarddrfine]

Your links don't work.

[drhowarddrfine]

Things like this will never work if width is supposed to be a html or css style:
class="leftModuleArea sideModuleArea width190"

There is no such thing as this:
<spacer width="1px" height="1px"></spacer>

I don't know if you misunderstand how to apply css styling or not. In addition, you have 30 html errors.

You also have a lot of comments about Firefox fixes which is unusual. It is usually IE that needs hacking and not FF.

Which doctype are you using?

[davecph]

Links work now - some server syncro error.

I'm sorry but yes - it's a perfectly good and valid way to apply css. As long as I ensure that the different class declarations don't have overlapping properties there is no problems - for instance the width190 class does not affect the div directly, but the contents of it. each of the three classes fullfill different purposes. regarding:<spacer width="1px" height="1px"></spacer> - it's a hack and it prevents an undesired behavior in IE - completly unrelated to the problem I'm describing.

Regarding my html errors - neither are related to the problem and are merly formal not practical.

I'm using

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Things like this will never work if width is supposed to be a html or css style:
class="leftModuleArea sideModuleArea width190"

There is no such thing as this:
<spacer width="1px" height="1px"></spacer>

I don't know if you misunderstand how to apply css styling or not. In addition, you have 30 html errors.

You also have a lot of comments about Firefox fixes which is unusual. It is usually IE that needs hacking and not FF.

Which doctype are you using?

[davecph]

Well, ... Success at last. After a great number of hours I finaly managed to eliminate the problem. instead of using display: inline I used display: table, and that did the trick. (I still consider it a FF bug though)

[drhowarddrfine]

Debugging valid code is difficult enough without having to debug invalid code. I am not aware of any such issues with Firefox so it can only be attributed to your code.

I was confused with your class of width530 or whatever. It gave me the impression you were trying to style the width as that but, as you said, you can have multiple classes.

I recommend you use the strict doctype. New pages have no need for transitional.

[campbeln]

I'm having the same issue as the original poster with Firefox v2.0.0.3!

I have setup my code so that the specific error is easy to see. I have also tested my code to ensure that it's valid HTML (save the 1 intentional error in example 3, where a SELECT has no defined OPTIONs, yet the layout is correctly rendered by FF!?).

Any insights are greatly appreciated!

BTW... the original posters purposed "display: table;" fix didn't work for me, in fact example 4 shows that it's just the opposite for my example!?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
<head>
    <title>FF Flow Error</title>
 
<style type='text/css'>
.inputform {
    border: solid 1px #660000;
    width: 790px;
    display: table;
}
.displayblock {
    display: block;
}
 
 
.aform label,
.aform select,
.aform input {
    width: 150px;
    float: left;
    margin-bottom: 5px;
border: solid 1px blue;
}
 
.aform select {
    display: table;
}
 
    .aform label {
        text-align: right;
        padding-right: 20px;
        clear: left;
    }
    .aform h1 {
        clear: left;
        padding: 0px;
        margin: 0px;
        font-weight: bold;
        font-size: 14pt;
        padding-top: 5px;
    }
 
.RowBR,
.ColumnBR {
    float: left;
    padding-right: 20px;
border: solid 1px red;
}
    .RowBR {
        clear: left;
    }
 
</style>
</head>
 
<body>
<form action=''>
 
 
<p>1) Errored Version:</p>
    <div class='inputform'>
        <div class='aform RowBR'>
            <h1>Personal Information:</h1>
 
            <label for="FirstName1">Name</label>
            <input id="FirstName1" name="FirstName1" type='text' value='Joe'>
        </div>
        <div class='aform ColumnBR'>
            <h1>Contact Information:</h1>
 
            <label for="EMail1">EMail Address</label>
            <input id="EMail1" name="EMail1" type='text' value='[e-mail]'>
        </div>
 
        <div class='aform RowBR'>
            <h1>Physical Address:</h1>
 
            <label for="Address1">Address</label>
            <input id="Address1" name="Address1" type='text' value=''>
 
            <label for="Country1">Country</label>
            <select name='Country1' id='Country1'>
                <option>Australia</option>
            </select>
        </div>
        <div class='aform ColumnBR'>
            <h1>Mailing Address:</h1>
 
            <label for="MailingAddress1">Mailing Address</label>
            <input id="MailingAddress1" name="MailingAddress1" type='text' value=''>
 
            <label for="MailingCountry1">Mailing Country</label>
            <select name='MailingCountry1' id='MailingCountry1'>
                <option>Australia</option>
            </select>
        </div>
    </div>
 
 
<p>2) Working Version, without SELECT in first 'column':</p>
    <div class='inputform'>
        <div class='aform RowBR'>
            <h1>Personal Information:</h1>
 
            <label for="FirstName2">Name</label>
            <input id="FirstName2" name="FirstName2" type='text' value='Joe'>
        </div>
        <div class='aform ColumnBR'>
            <h1>Contact Information:</h1>
 
            <label for="EMail2">EMail Address</label>
            <input id="EMail2" name="EMail2" type='text' value='[e-mail]'>
        </div>
 
        <div class='aform RowBR'>
            <h1>Physical Address:</h1>
 
            <label for="Address2">Address</label>
            <input id="Address2" name="Address2" type='text' value=''>
 
            <label for="Country2">Country</label>
            <input id="Country2" name="Country2" type='text' value=''>
        </div>
        <div class='aform ColumnBR'>
            <h1>Mailing Address:</h1>
 
            <label for="MailingAddress2">Mailing Address</label>
            <input id="MailingAddress2" name="MailingAddress2" type='text' value=''>
 
            <label for="MailingCountry2">Mailing Country</label>
            <select name='MailingCountry2' id='MailingCountry2'>
                <option>Australia</option>
            </select>
        </div>
    </div>
 
 
<p>3) Weird Working Version, SELECT in first column without any defined OPTIONs:</p>
    <div class='inputform'>
        <div class='aform RowBR'>
            <h1>Personal Information:</h1>
 
            <label for="FirstName3">Name</label>
            <input id="FirstName3" name="FirstName" type='text' value='Joe'>
        </div>
        <div class='aform ColumnBR'>
            <h1>Contact Information:</h1>
 
            <label for="EMail3">EMail Address</label>
            <input id="EMail3" name="EMail3" type='text' value='[e-mail]'>
        </div>
 
        <div class='aform RowBR'>
            <h1>Physical Address:</h1>
 
            <label for="Address3">Address</label>
            <input id="Address3" name="Address3" type='text' value=''>
 
            <label for="Country3">Country</label>
            <select name='Country3' id='Country3'>
            </select>
        </div>
        <div class='aform ColumnBR'>
            <h1>Mailing Address:</h1>
 
            <label for="MailingAddress3">Mailing Address</label>
            <input id="MailingAddress3" name="MailingAddress3" type='text' value=''>
 
            <label for="MailingCountry3">Mailing Country</label>
            <select name='MailingCountry3' id='MailingCountry3'>
                <option>Australia</option>
            </select>
        </div>
    </div>
 
 
 
<p>4) Working Version, with outer DIV 'display: block;' rather then 'display: table;' (but note the 0px height outer DIV):</p>
    <div class='inputform displayblock'>
        <div class='aform RowBR'>
            <h1>Personal Information:</h1>
 
            <label for="FirstName4">Name</label>
            <input id="FirstName4" name="FirstName4" type='text' value='Joe'>
        </div>
        <div class='aform ColumnBR'>
            <h1>Contact Information:</h1>
 
            <label for="EMail4">EMail Address</label>
            <input id="EMail4" name="EMail4" type='text' value='[e-mail]'>
        </div>
 
        <div class='aform RowBR'>
            <h1>Physical Address:</h1>
 
            <label for="Address4">Address</label>
            <input id="Address4" name="Address4" type='text' value=''>
 
            <label for="Country4">Country</label>
            <select name='Country4' id='Country4'>
                <option>Australia</option>
            </select>
        </div>
        <div class='aform ColumnBR'>
            <h1>Mailing Address:</h1>
 
            <label for="MailingAddress4">Mailing Address</label>
            <input id="MailingAddress4" name="MailingAddress4" type='text' value=''>
 
            <label for="MailingCountry4">Mailing Country</label>
            <select name='MailingCountry4' id='MailingCountry4'>
                <option>Australia</option>
            </select>
        </div>
    </div>
 
 
</form>
</body>
</html>
 
 

[drhowarddrfine]

A quick response after having just gotten back into town.

Your doctype is incomplete. See the sticky at the top of this board. Haven't looked at the code but ALL new pages should use strict. I'll look at this more later.

[drhowarddrfine]

It may have been better to start a new thread. I'm not sure of the problem so can you please state it.

[campbeln]

It may have been better to start a new thread. I'm not sure of the problem so can you please state it.

I found this thread researching this problem, and I believe it is indeed the same issue the original poster encountered. I figured that if I found it via Google and a solution was not found then I should contribute to the current thread, as opposed to starting a new one. As for a description of the issue...

All 4 examples should be positioned the same, but Example #1's "Mailing Address" DIV incorrectly wraps below the "Physical Address" DIV. This does not occur in Examples #2-4 (nor does it happen to Example #1's "Personal Information" and "Contact Information" DIVs) even though the same CSS is used across all the DIVs. Example #1 has the intended markup, but the CSS renders it incorrectly. Examples #2-4 have modified markup (read: not what I need it to be) to show that the CSS is properly applied in at least 3 differing cases.

It seems that under FireFox SELECTs (or their child OPTIONs) have some mystery CSS attribute applied to them that causes them to have an implicit "clear: right;" or "clear: both;"!? At least that seems to be the effect that is happening in this example.

I greatly appreciate your input on this problem, it's a real noodle-scratcher =)

[campbeln]

Agh, ha... well there you have it I guess... this is either a FireFox bug or there is simply no solution to the weird (and relativity basic) question.

Back to Google you go!

I found this thread researching this problem, and I believe it is indeed the same issue the original poster encountered. I figured that if I found it via Google and a solution was not found then I should contribute to the current thread, as opposed to starting a new one. As for a description of the issue...

All 4 examples should be positioned the same, but Example #1's "Mailing Address" DIV incorrectly wraps below the "Physical Address" DIV. This does not occur in Examples #2-4 (nor does it happen to Example #1's "Personal Information" and "Contact Information" DIVs) even though the same CSS is used across all the DIVs. Example #1 has the intended markup, but the CSS renders it incorrectly. Examples #2-4 have modified markup (read: not what I need it to be) to show that the CSS is properly applied in at least 3 differing cases.

It seems that under FireFox SELECTs (or their child OPTIONs) have some mystery CSS attribute applied to them that causes them to have an implicit "clear: right;" or "clear: both;"!? At least that seems to be the effect that is happening in this example.

I greatly appreciate your input on this problem, it's a real noodle-scratcher =)

[drhowarddrfine]

I looked at it briefly but went out of town. Now I've got some problems that need taking care of so just haven't had the time. Yes, the solution isn't obvious to me.