After further investigation, I discovered what was causing the title
bar not to fill the dialog in IE. I had some JQuery that was modifying
classes at runtime and a class was inadvertently being applied to the
dialog div. The offending style was a float: left. The themeRoller
adds a reset style to many ui-dialog classes. they begin with /
*resets*/ adding float: none will fix this if the float was applied
via class, but if it is done as an inline style then it needs to begin
with:
/*resets*/float: none !important; margin: 0; padding: 0; border:
0; ...
Hope this helps somebody.
Dom
On Oct 6, 5:05 pm, Domenic <[EMAIL PROTECTED]> wrote:
> Shelane,
>
> I had the same issue with the close button not showing. When I made my
> theme using ThemeRoller, I left my icon color the same as the default
> background color. I guess is was not clear to me how they interact in
> the various components, since they looked fine on the demo page. BTW,
> this was only happening in IE 6 and it would appear after you clicked
> into the content area of thedialog. This seems to indicate that the
> close icon is starting in active mode in IE.
>
> My fix was to copy the default background url for: .
>
> ui-dialog-titlebar-close
>
> to
>
> .ui-dialog-titlebar-close:active
>
> I also had the issue of the title bar being aligned left and not
> filling the full width. I fixed this by modifying .ui-dialog-titlebar.
> The big fix is to add a width of 100%, but that left some alignment/
> sizing issues. The best fix for this that I could come up with is to
> take the values that are assigned for padding top left and right and
> assigning them as negatives to the margin. This way they cancel out
> and the background gets applied uniformly.
>
> Original titlebar section:
>
> .ui-dialog-titlebar {
> /*resets*/margin: 0; padding: 0;border: 0; outline: 0; line-height:
> 1.3; text-decoration: none; font-size: 100%; list-style: none;
> padding: .5em 1.5em .5em 1em;
> ...
>
> Added to fix titlebar sizing:
> width: 100%;
> margin: -.5em -1.5em 0 -1em;
>
> I have 2 additional issues.
>
> First the button bar on the bottom was not filling the full width in
> IE 6. This can be fixed by adding a left: 0 to .ui-dialog-buttonpane.
> I'm not sure why this container was not anchor from 2 edges anyways.
> Centering this is still a bit of a problem. I got it pretty good with
> adding: padding: 0 1em 0 1em; but I'm not sure I like this solution.
>
> Second, the autoResize doesn't work right in IE. When resizing theDialog, the
> content grows at a faster rate and quickly goes off the
> right side. If I disable this and set the width to 100% for the div
> everything works fine.
>
> Not sure if this may have anything to do with this but our dynamic
> page declarations start with:
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> <html xmlns="http://www.w3.org/1999/xhtml";>
> <head>
> <meta content="text/html; charset=iso-8859-1" http-equiv="Content-
> Type"/>
>
> Regards,
> Dom
>
> On Sep 24, 11:30 am, Shelane Enos <[EMAIL PROTECTED]> wrote:
>
> > I just downloaded the 1.6rc2 to see if it fixed this issue. The work around
> > I found worked for resetting the content, but my title bar is still shifted
> > to the left. 1.6rc2 didn't fix it. Also, I tried to click on the
> > "Development" link and I got a 404 error.
>
> > On 9/15/08 8:47 AM, "Shelane Enos" <[EMAIL PROTECTED]> wrote:
>
> > > It's the latest jQuery, latestdialogdone from the configure your download,
> > > and a theme roller style sheet.
>
> > > On 9/12/08 4:44 PM, "Kevin" <[EMAIL PROTECTED]> wrote:
>
> > >> What css and js files are you using? I created both off of http://
> > >> ui.jquery.com
> > >> I only had to change the .ui-dialog-content.
>
> > >> I did have similar issues using the js from http:// latest.jquery.com
> > >> and a themeroller css file.
>
> > >> On Sep 12, 2008, at 2:29 PM, Shelane <[EMAIL PROTECTED]> wrote:
>
> > >>> My close button is not visible because it's where it should be and the
> > >>> color of mine is white - so white on white (where the background
> > >>> doesn't extend).
>
> > >>> On Sep 12, 11:18 am, Shelane <[EMAIL PROTECTED]> wrote:
> > >>>> It only partially fixed it for me.
>
> > >>>> It moved my content, but my title bar is skewed left and the close
> > >>>> button is not visible. When I tried that margin trick for the
> > >>>> titlebar, it only made the titlebar background shorter it didn't move
> > >>>> it at all.
>
> > >>>> On Sep 11, 8:16 am, "[EMAIL PROTECTED]" <[EMAIL PROTECTED]> wrote:
>
> > >>>>> Matt,
>
> > >>>>> Thank you for posting the fix to this issue. Looks great in IE6 now.
>
> > >>>>> Kevin
>
> > >>>>> On Aug 6, 10:11 am, Matt Hoskins <[EMAIL PROTECTED]> wrote:
>
> > >>>>>> I had a quick search on this group as I was having problems with
> > >>>>>> setting "overflow: auto" on adialogthat was themed using theme-
> > >>>>>> roller. The scroll bars didn't seem to appear under firefox when
> > >>>>>> they
> > >>>>>> should have done.
>
> > >>>>>> Using firebug I saw that actually the content div was ending up
> > >>>>>> bigger
> > >>>>>> than the containingdialogand was being clipped. Under IE 6 things
> > >>>>>> get even more confused with the content being shifted to the left
> > >>>>>> (I
> > >>>>>> see there's a recent thread about this).
>
> > >>>>>> Looking at the flora theme I see it uses margins on the content
> > >>>>>> div to
> > >>>>>> bring the content away from theborderrather than padding, so I'm
> > >>>>>> guessing that thedialogstuff doesn't support padding on the content
> > >>>>>> div but does support margins.
>
> > >>>>>> For those having problems with the theme builder themes and
> > >>>>>> dialogs as
> > >>>>>> a result of this padding, just edit the css file from the theme to
> > >>>>>> change the padding for the second .ui-dialog-content definition
> > >>>>>> to be
> > >>>>>> margin instead.
>
> > >>>>>> E.g.:
> > >>>>>> padding: 1.5em 1.7em;
>
> > >>>>>> Becomes:
> > >>>>>> margin: 1.5em 1.7em;
>
> > >>>>>> You can then apply overflow: auto to thedialogand you'll get scroll
> > >>>>>> bars appear if the content is oversized.
>
> > >>>>>> Regards,
>
> > Ma
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
