Has anyone fixed the jQuery dialog button format in IE6 using Themeroller'ed theme?
I used Themeroller
to create the theme app and I use jQuery
and jQuery UI
to create some modal dialog
alerts.
They work fine (and look great) on Firefox 2 and 3, but the buttons shift to the right on IE 6 and 7.
It looks like it's bitten by IE marker bugs, but I wanted to see if there was an easy fix before digging into CSS Themeroller, or worse, jQuery generation code to find a workaround.
This is what the window looks like in Firefoxen:
And this is what the same window looks like in IE6 / 7:
The jQuery UI demo buttons look slightly better under IE, but they are shaded below the resize bar. If no one here says "Oh yeah, here's how you fix it ..." I'll need to put both CSS files side by side and figure out the difference.
I see a semi- problem problem , but the answer there doesn't apply to my problem (because my dialog container has a ui-dialog class.
source to share
I found that a bit of trial and error seems to work. I would still be interested in a more complete end-to-end solution (and / or I need to point that to the ThemeRoller command).
I made this change to jquery-ui-themeroller.css
:
.ui-dialog-buttonpane {
position: absolute;
bottom: 0;
left:0; /* Added this line and it makes the button pane anchor to the left */
width: 100%;
text-align: left;
border-top: 1px solid #707c5a;
background: #faf7eb;
}
I'm still testing but seems to work on IE6 / 7 and FF2 / 3.
source to share