I'm using jQuery 1.4.2 and UI 1.8.7. Have several dialog boxes that work just great in Firefox. But IE ... not so much.
I get a scroll bar on every dialog. Looking at it, the content height is apparently calculated by the UI. In FF, that is the size of the content, INSIDE the padding. IE seems to calculate the size PLUS the padding, so there is always a scrollbar for the amount of the padding.
I've tried setting the height, but IE calculates the height for the entire dialog div, and FF seems to calculate the set height for the content only ... so it's markedly off in one or the other.
To add to the problem, my dialog is a login box, which uses ajax. If the login is incorrect or incomplete, there is an alert that shows IN the dialog box. In FF the dialog just grows to accomodate the message. In IE, the dialog box stays the same size, there's just further to scroll to see everything.
(BTW, as a side RANT, I've spent hours and hours now trying to get my beautiful site to work in IE - not just the js, but also the css. What a pain.)
I'm at my wits end about this dialog size thing. Anyone have any suggestions??
I have discovered an apparent bug when using both Accordon and Tabs on the same page. It took some hours, but here's what I tracked down ...
My page was laid out in a two column table. Accordion in the left (narrow) <td>, tabs in the right <td>. It worked fine.
I converted the page to all divs. Float left div for the left column, float right for the other.
When the accordion div (within the primary left column div) and the tab div (in the primary right side div) are on the same horizontal plane, the <ul> of the tabs stretches to the bottom of the accordion div. The <li> tabs display correctly. (See screenshot1.jpg)
If I put text above the tab div to move it down the page so it starts lower than the bottom of the accordion div, the <ul> is the right height. (See screenshot3.jpg)
If text or breaks are put in above the tab div so it is lower, but still within the same horizontal plane as the accordion div, the <ul> of the tab div is smaller, but still goes to the bottom of the accordion div. (See screenshot2.jpg)
If I wrap everything in table cells, the tabs display correctly even within in horizontal plane of the accordion div. (I was going to attach a screenshot, but only 3 are allowed.)
I can keep everything in tables as a workaround, if anyone can give me a fix, I would greatly appreciate it.
I'm working with a UI theme and can't determine how the font sizes are set. I've created a button, but the font size is quite large. I've changed my site css file to have body {font-size: 62.5%;} as per an earlier post I read, and have removed all the other possible inheirited font-size tags. Checked in FireBug and there isn't a font size showing that would affect the button (or the accordion headers).
Can someone give some guidance on what is setting the font sizes for accordion headers and button text???
Recently downloaded jquery ui 1.8.2 customized via themroller.
Have placed Accordian on my page in a <td> styled with width: 200px.
Installed and working fine in Firefox. However, in IE there is an issue.
When page loads, all headers are correct width and the FIRST opened content div is correct width. Doesn't matter if it is activve on page open (default) or if active: false).
Subsequently opened content divs are first displayed at a smaller width, and then jump to the full width.
I'm not sure if this is a bug, and FOUC issue (if so, any suggestions on how to fix it?)