Accordion CSS

[Scott González]

Can someone take a look at this proposed change: http://dev.jqueryui.com/ticket/4319

[ScottJehl]

Hmm... tough one.
The proposed solution is alright for this particular person's theme,
but I see a couple areas where this won't fit with our current
patterns for positioning elements to scale and position alongside
text.

Positioning the icon with this CSS means it won't vertically align
next to text of varying sizes. Currently, the icon is vertically
centered using position:abs, and negatively offset by half its width,
meaning no matter what font-size you choose in your theme, the icon
will sit just right next to the text. The difference in the proposed
CSS begins to be noticeable after an increase in 1-2px (.1 - .2 em) in
font size, where the icon stays locked to the top.

The following works well at various font-sizes, but it requires that
the icon be relatively positioned, which probably opens up a new yet
similar problem for IE.
.ui-accordion .ui-accordion-header { cursor: pointer; margin-top: 1px;
zoom: 1; } /*removed position: rel */
.ui-accordion .ui-accordion-header .ui-icon { position: relative;
float: left; left: .5em; top: 1.1em; margin-top: -8px; } /* floated,
positioned relatively instead of absolute, top value is in ems*/


So that's no good either.

[Scott Jehl]

The end of my message got cut off somehow...

Could it be that the dialog's content area needs position: relative
instead? I seem to remember this helping out in this situation in the
past...

Thoughts?