jquerycssjquery-uithemerollerjquery-ui-theme

Has anyone fixed the jQuery dialog button format in IE6 while using a Themeroller'ed theme?

I used Themeroller to generate an app theme and I am using jQuery and jQuery UI to create some modal dialog alerts.

They work fine (and look great) on Firefox 2 and 3, but the buttons are shifted to the right on IE 6 and 7.

It looks like it's being bitten by the IE margin bugs, but I wanted to see if there was an easy fix before digging into the Themeroller CSS, or worse, the jQuery generation code, to find a workaround.

Here is what the box looks like in both Firefoxen:

alt text

And here is what the same box looks like in IE6/7:

alt text

The jQuery UI demo page's buttons look a little better under IE, but they are semi-obscured under the resize bar. If no one here says "Oh yeah, here's how you fix it..." I'm going to have to put both of the CSS files side by side and figure out the difference.

I see a semi-related issue, but the answer there doesn't apply to my problem (because my dialog container does have the ui-dialog class.

Solution

  • I've found what seems to work by a little bit of trial and error. I would still be interested in a better comprehensive solution (and/or I need to point this out to the ThemeRoller team).

    I made this change to the 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 doing some testing, but it seems to work on IE6/7 and FF2/3.