jquery dialog button not showing until hovering over it ie7

Question

As the title suggests I'm having some IE7 problems. the problem I have right now is that my dialog doesn't work correctly. Well, the dialog itself works, but the button on it doesn't show up. that is, until I hover on where it is actually placed.

Here's the jquery code

$('#sessionTimeout-dialog').dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            closeOnEscape: false,
            open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); },
            buttons: [{

                // Button one - closes dialog and makes call to keep-alive URL
                text: o.stayConnected,
                "class": "confirmSession",
                click: function () {
                    $(this).dialog('close');
                    $('#sessionTimeout-dialog div div button').addClass('confirm');

                    $.ajax({
                        type: 'POST',
                        url: o.keepAliveUrl
                    });
                    $('.formOverlay').find('*').attr('disabled', false);

                    // Stop redirect timer and restart warning timer
                    controlRedirTimer('stop');
                    controlDialogTimer('start');
                }
            }]
        });

As this does work correctly with IE8 and up, FF and Chrome, I'm starting to think this is an issue that IE7 has with the control generated by the dialog.

So just to sumarize again:

IE8+ work

IE7 has the following behaviour:

with class = "confirmSession"

1. page loads
2. no javascript errors
3. dialog shows up without button
4. I hover over the spot where the button should be
5. The button magically shows up with the correct css style.

without class = "confirmSession"

1. page loads
2. no javascript errors
3. dialog shows up with button (no css since it doesn't have a css class)

As I'm baffled by this behaviour, I hope we can work it out together.

EDIT:

As requested: my css style for the confirmSession class; It's taken from out .less file.

.confirmSession {
            width:45%; font-size: 1em; background: #4c8cb4 !IMPORTANT; border: #427594 1px solid; padding: 0px;  color: #fff; text-decoration: none; .box-sizing(border-box); white-space: normal; cursor: pointer; float: none; font-weight: 400; margin: 10px 2%; display: block; float: left;
            -webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4), 2px 2px 3px -2px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4),2px 2px 3px -2px rgba(0, 0, 0, 0.4);
            box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4), 2px 2px 3px -2px rgba(0, 0, 0, 0.4);
            text-align: center; position: absolute; bottom: 1em; left: 10px; right: 10px; 
        }

Answer 1

Whatever the styles you are used in confirmSession class are overriden by the jQuery styles.

So use !important before your styles.

Remove all the css properties and then try to add one by one.Then we can find out the problem