Not terribly exciting, but I was happy to think of it.
I needed a div with a fixed height that could vary depending on page
content.
So I did this:
Whee!
–Al Evans
On Sun, Apr 02, 2006 at 06:32:58PM +0200, Al Evans wrote:
} Not terribly exciting, but I was happy to think of it.
}
} I needed a div with a fixed height that could vary depending on page
} content.
}
} So I did this:
}
}
Very nice, but I have a recommendation. It’s best to give heights and
widths (and occasionally margins and paddings, though not usually) in
exes
and/or ems. If your user has set a larger (or smaller) font, or uses
Firefox’s ctrl-plus and ctrl-minus to change the font size, a
pixel-sized
box will truncate things or scroll or otherwise look wrong, whereas an
ex-
or em-sized box will adjust to fit the text.
} Whee!
} --Al Evans
–Greg
I’m curious – if the height is determined by page content, couldn’t
you just let the contents of the page determine the height?
Al Evans wrote:
Not terribly exciting, but I was happy to think of it.
I needed a div with a fixed height that could vary depending on page
content.So I did this:
Whee!
That’s cute. If you want to do that sort of thing in the CSS file, you
can make an ERb template to generate the CSS too:
http://blog.hasmanythrough.com/articles/2006/03/23/dirt-simple-rcss-templates
Though your particular example probably isn’t a great one to generate
CSS for a view where the div height will change each time you look at
it.
–
Josh S.
http://blog.hasmanythrough.com
Gregory S. wrote:
Very nice, but I have a recommendation. It’s best to give heights and
widths (and occasionally margins and paddings, though not usually) in
exes
and/or ems. If your user has set a larger (or smaller) font, or uses
Firefox’s ctrl-plus and ctrl-minus to change the font size, a
pixel-sized
box will truncate things or scroll or otherwise look wrong, whereas an
ex-
or em-sized box will adjust to fit the text.
In general, I agree. In this case, the height of the individual element
is determined by the (fixed) height of a picture.
gravy face wrote:
I’m curious – if the height is determined by page content, couldn’t
you just let the contents of the page determine the height?
This is a display: hidden; container for an arbitrary number 1…10 of
float: left; elements. According to my tests (FireFox only so far), the
container thinks they’re all on the same line. But I’m no CSS guru.
–Al Evans
Do you have any documentation references on this? Methinks this is an
urban legend. I have
been using em as my primary unit for years and have seen no ill effects.
My general rule of thumb – and I’ve seen it recommended elsewhere – is
to a) set the
body font size with ems and then use percentages for font-size on all
child elements and
b) use em for all margin/padding/widths that need to expand to
accomodate font size
changes and use px for those that should not expand with font size.
b
Agreed–but it depends on your priorities.
Browser support for ems (e.g. IE) is much sketchier.