SimpleModal containerCSS not working in Firefox or Chrome

Question

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 code:

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

HTML code:

<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 this for a working demo and zip download of the code that you can test for yourself.

Answer 1

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!

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

I would have a look at jqModal instead.