Skip to main content

Search and Top Navigation

#5075 closed enhancement (notabug)

Opened January 18, 2010 06:51PM UTC

Closed January 19, 2010 12:22AM UTC

ui.button.css -- several rules are in px, s/b em?

Reported by: StevenBlack Owned by:
Priority: minor Milestone: 1.8
Component: ui.css-framework Version: 1.7.2
Keywords: Cc:
Blocked by: Blocking:

This arises from the following question about scaling-up the jQuery-ui sprites so the icons display larger.

The sprite upsize process, which is a rather natural implementation case scenario, would be a lot cleaner with em metrics.

Looking at ui.button.css, three rules contain px measurement when em measurement is probably called-for.

The 3-rules extracted from ui.button.css:

.ui-button-icon-only .ui-icon, .ui-button-text-icon .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }

.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }

.ui-button-set { margin-right: 7px; }

Attachments (0)
Change History (2)

Changed January 18, 2010 08:00PM UTC by scottjehl comment:1

Hi Steven,

Thanks for commenting. We love flexible units and try to use them on everything we can in UI.

However, our icon sprite is a fixed-size image, so we need to use pixels for any positioning, dimensions, and background-position of elements that make use of the icons.

For example, we typically size a ui-icon span at 16px x 16px. If we used ems (1.6em x 1.6em) for this, any inherited font-size larger than 10px would cause other icons in the sprite to be revealed, and any smaller font size would begin to crop the icon out of view.

The negative margins you mentioned above offset the 16px x 16px span perfectly based on half its width or height. Changing the margin value to ems would cause the icon span to offset more or less than it should, depending on the font size.

These aren't values that we want to be flexible based on font-size. They're fixed to match the image dimensions.

For the same reasons, we have to use pixels to point to icon positions in the sprite, when using background-position. Ems wouldn't work there either because the position would change depending on font-size, when really, we are always trying to find an icon at an absolute pixel location in the sprite.

A larger icon sprite would require a full new set of

All that said, the last style you show above could safely use ems, but it's not really related to the ones before it. Using ems there would just add flexibly adjusted space to the right of the button set, which may or may not be desirable depending on the interface.

Anyway, do you agree/disagree with my comments?

I'd propose marking this ticket closed and possibly changing that button set margin to .7em if you think it helps.



Changed January 19, 2010 12:22AM UTC by scottgonzalez comment:2

resolution: → invalid
status: newclosed