SimpleModal containerCSS not working in Firefox or Chrome

Question

Good Afternoon,

I tried to override the settings in the default stlyesheet that comes with the simplemodal jquery plugin with containerCSS which is working fine in IE7 but not Firefox or Chrome. Not sure if this is a bug or I am doing something wrong.

jQuery:
    $(document).ready(function() {
        $("#ButtonPopup").click(function() {
            $("#addEditTask").modal({
                onOpen: modalOpen,
                persist: true,
                containerCss: ({ width: "300", height: "200", marginLeft: "-150" })
            });
            return false;
        });
    });

HTML:
        <button id="ButtonPopup">Popup</button>
        <div id="addEditTask" style="display:none;">
             <p>Aliquam nonummy adipiscing augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
             Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada
             libero, sit amet commodo magna eros quis urna.</p>
            <button id="ButtonSave">Save</button>
            <button id="ButtonCancel">Cancel</button>
        </div>

Please see http://beckelman.net/issues/simplemodalfirefoxproblem/default.aspx for a working demo and zip download of the code that you can test for yourself.

Thanks for the help in advance.

Bill

Answer 1

I would have a look at jqModal instead.

Answer 2

Eric Martin answered this via the jquery mailing list.

http://groups.google.com/group/jquery-en/browse_thread/thread/90e58bb317002361

I left out the units which worked find in IE but not in firefox.

Answer 3

Gecko and WebKit based browsers really like their units. Make sure you always tell it how to measure your values.

Also as a note, if you want to override inline styles from a css file, you can do so by adding !important to the end of the value.

height: 300px !important;

will override the inline styles.

Cheers!