Webkit browsers rendering CSS different than Mozilla Firefox...Why?

Question

I'm styling a form that was already marked up (made some markup changes), and I normally work in Firefox to style so I can use firebug and the web developer toolbar.

On this project, I noticed that my styles are displaying quite differently for one particular area (several elements) in webkit based browsers Chrome and Safari, than in Firefox (we won't even get into Internet Explorer, although it is siding with the Firefox display).

I can't figure out though why the styles are displaying so differently. Normally there is some rule that I'm neglecting that Firefox just takes for granted, and the others need it specified. But here I'm not getting why it's displaying this way. In particular I'm referring to the bottom area of the form where users can enter their contact info, then submit the form. I'll attach screen shots for reference as to the discrepancy.

Here's the URL so feel free to check it out on your own. Although be advised that this is a production page (already released) so if you try out the form, you WILL BE added to CURE's contact database.

http://www.helpcurenow.org/survey2010

Here's the screen shots:

Firefox (the way I intend it to look) alt text http://static.helpcurenow.org/images/test/firefox.jpg

Chrome, and then Safari - strange change to submit button alt text http://static.helpcurenow.org/images/test/chrome.jpg alt text http://static.helpcurenow.org/images/test/safari.jpg

As a bonus, if anybody wants to help me with figuring out why on earth IE7 wants to not show the background behind the questions only, and how to fix that I would be much obliged!

Thanks very much.

Answer 1

Your <ol> is not closed, which makes webkit place the submit button inside the <fieldset> in an attempt to fix up your code.

Answer 2

FF and Webkit browsers do have a few differences, I have encountered them as well, especially with forms!

I solved it by splitting my CSS to target the two browsers with the CSS Browser Selector script. Worked wonders, just set some things differently for Webkit and fixed the whole thing.

Do you have a live example or some source code to post up so we can help you more with your IE7 issues as well?

Hope that helps.

Edit:

<ol> 

            <li class="contact-info"> 
                <label class="field-required" for="first_name">First Name</label> 
                <input type="text" size="35" maxlength="250" name="first_name" value="" id="first_name" /> 
            </li> 

            <li class="contact-info"> 
                <label class="field-required" for="last_name">Last Name</label> 
                <input type="text" size="35" maxlength="250" name="last_name" value="" id="last_name" /> 
            </li> 

            <li class="contact-info"> 
                <label class="field-required" for="email_address">Email Address</label> 
                <input type="text" size="35" maxlength="100" name="email_address" value="" id="email_address" /> 
            </li> 

        </fieldset> 

        <!--TransactionFields section end--> 
        <script language="JavaScript" type="text/javascript"> 
        ...
        </script> 

        <div class="button-row"> 
            <input type="button" name="SubmitButton" id="SubmitButton"  value="Submit" onclick="SubmitForm425952(form);"  class='HtmlButton' /> 
        </div> 

    </form> 
    <!--form javascript--> 
    <script language="JavaScript"> 
    ...
    </script> 

NO OL


</div></td></tr> 
</table> 


    </div> 
    <!--End Featured Content--> 

Your <ol>hasn't been closed after the second script tag.

Answer 3

You may have forgotten -moz specific css rules.

For example - to use box-sizing you may have to specify -moz-box-sizing