If you have an element that's 200px high, and you want to replace height with percentages in order to make it "liquid" (such as to accomodate different font sizes): Can you do that safely without losing placement precision?
(Because if you use pixels you can't resize the text without having it overflow the element, causing a mess of text all over the place) (but the element still needs to be an exact height, only "expandable", can you do that? Replace say 50px with an exact equivalent in percentages?
)That'll be a lot of math.
For example, if you have a div that is 200px in height with 10 padding on each side. For our purposes we would also say that the text is 8px and has a line-height of 10px. There are 18 lines of text.
So 18 lines x line-height of 10 is 180 plus the top padding of 10 and bottom padding of 10 = 200. Your ems would then be:
line-height: 1em;
font-size: .8em;
padding: 1em;
Just take the proportion of each item against your base. I hope this makes sense.Thanks. But isn't stuff like line-height and font-size relative from browser to browser?
I'm in the scenario where a div has a background-image that needs to line up with the body's background image. And the images are in pixels. But when you increase the text size the text breaks out of the containing div and becomes almost unreadable. Basically I need precision alignement, but yet flexible to suit a text size increase.generally, line-height is about 120% of the font-size across most browsers
if i remember correctly, IE (i can't remember if Opera does this as well) is the only one that will "truncate" the font if the line-height is smaller than the font-size, where as Mozilla overflows the line-height
(Because if you use pixels you can't resize the text without having it overflow the element, causing a mess of text all over the place) (but the element still needs to be an exact height, only "expandable", can you do that? Replace say 50px with an exact equivalent in percentages?
)That'll be a lot of math.For example, if you have a div that is 200px in height with 10 padding on each side. For our purposes we would also say that the text is 8px and has a line-height of 10px. There are 18 lines of text.
So 18 lines x line-height of 10 is 180 plus the top padding of 10 and bottom padding of 10 = 200. Your ems would then be:
line-height: 1em;
font-size: .8em;
padding: 1em;
Just take the proportion of each item against your base. I hope this makes sense.Thanks. But isn't stuff like line-height and font-size relative from browser to browser?
I'm in the scenario where a div has a background-image that needs to line up with the body's background image. And the images are in pixels. But when you increase the text size the text breaks out of the containing div and becomes almost unreadable. Basically I need precision alignement, but yet flexible to suit a text size increase.generally, line-height is about 120% of the font-size across most browsers
if i remember correctly, IE (i can't remember if Opera does this as well) is the only one that will "truncate" the font if the line-height is smaller than the font-size, where as Mozilla overflows the line-height