jquery dialog button not showing until hovering over it ie7

encandola

New Member
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\[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'); } }] });\[/code\]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+ workIE7 has the following behaviour:with class = "confirmSession"[*]page loads[*]no javascript errors[*]dialog shows up without button[*]I hover over the spot where the button should be[*]The button magically shows up with the correct css style.without class = "confirmSession"[*]page loads[*]no javascript errors[*]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.\[code\].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; }\[/code\]
 
Back
Top