[css-d] Trouble with line-height and div overflow:hidden
What I need to achieve: A CMS template provides a fix-sized div (height and width are px- based) in which I need to display arbitrary text entered by the user. Hence, if the full text doesn't fit into the div it needs to be cut off i.e. invisible. So, the div style will contain overflow:hidden. However, since the last line of visible text in the div must not be cut off horizontally I need to tinker with the line-attribute, right? The inherited font-size for the div is 1em. I played around with the line-height value in 'em' until I could make sure that no pixel of the last visible line of text in the div is cut off. Then I switched browser/OS and got totally different results - line-heigths are always different. Am I using the wrong approach here? Is it even possible to achieve in CSS what the design folks require in their Photoshop layouts? Regards, Marcel -- Marcel Stör, http://www.frightanic.com Blog: http://frightanic.wordpress.com Skype: marcelstoer __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trouble with line-height and div overflow:hidden
The issue (my opinion), isn't really one of CSS but of concept. The short answer to what CSS can achieve is yes it can do its part to get to a Photoshop design PROVIDED that design is really one for the web and not for print or some other fixed medium. Sounds like what you're up against is a design that isn't considering what the web really is - a flexible medium that has elements you'll never be able to control - user's resolution, preferred text size, etc. These variables pretty much dictate that if your content is important at all, then your containers for that content should grow and shrink with said content. Setting up a container that's fixed in BOTH height and width is failing to design for the web, in my opinion. It's design for print. So, to answer your question about approach: yes my opinion is it's the wrong approach since it's not taking into account the flexible nature of the web. Think as a web page first, then let your design beautify what the web is. As an example of my own struggles with a Photoshop design that I thought would be impossible see what I'm finishing right now: http://www.springfieldmo.gov/newSite/negMargin.html It has been difficult, but this is a CSS-only design - no tables for layout. It's probably not award winning, but it's reasonably complex for a CSS-only site. But it's nearly identical to the original Photoshop design. I, too, love exactness in my design, but I have learned that some things MUST allow for the variables inherent in what the web is. Good luck in the pursuit. :-) Christopher Web Coordinator City of Springfield, MO On Fri, Aug 22, 2008 at 3:41 PM, Marcel Stör [EMAIL PROTECTED] wrote: What I need to achieve: A CMS template provides a fix-sized div (height and width are px- based) in which I need to display arbitrary text entered by the user. Hence, if the full text doesn't fit into the div it needs to be cut off i.e. invisible. So, the div style will contain overflow:hidden. However, since the last line of visible text in the div must not be cut off horizontally I need to tinker with the line-attribute, right? The inherited font-size for the div is 1em. I played around with the line-height value in 'em' until I could make sure that no pixel of the last visible line of text in the div is cut off. Then I switched browser/OS and got totally different results - line-heigths are always different. Am I using the wrong approach here? Is it even possible to achieve in CSS what the design folks require in their Photoshop layouts? Regards, Marcel -- Marcel Stör, http://www.frightanic.com Blog: http://frightanic.wordpress.com Skype: marcelstoer __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trouble with line-height and div overflow:hidden
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Marcel Stör Sent: Friday, August 22, 2008 10:41 AM To: css-d@lists.css-discuss.org Subject: [css-d] Trouble with line-height and div overflow:hidden What I need to achieve: A CMS template provides a fix-sized div (height and width are px- based) in which I need to display arbitrary text entered by the user. Hence, if the full text doesn't fit into the div it needs to be cut off i.e. invisible. So, the div style will contain overflow:hidden. However, since the last line of visible text in the div must not be cut off horizontally I need to tinker with the line-attribute, right? The inherited font-size for the div is 1em. I played around with the line-height value in 'em' until I could make sure that no pixel of the last visible line of text in the div is cut off. Then I switched browser/OS and got totally different results - line-heigths are always different. Am I using the wrong approach here? Is it even possible to achieve in CSS what the design folks require in their Photoshop layouts? Suggest instead that you get them away from designing in Photoshop - because Photoshop is not dynamic about its presentation but is static - the opposite of the web. I'd set the box height in ems, because then you've got a measure that's connected with the font size used. You can set your line height indepently of units, so you can calculate a box height to hold X number of lines - I'd think that if you're using 1em font size and a line height of 1.4, a box to hold 10 lines of text would be 10x1.4 = 14 ems. I've not tested this, but I think that would make the 10th line of text be right at the bottom of the box, not partially cut off by falling outside the fixed height of the box. Plus the box height would still be usable for visitors who've increased or decreased their font size (another feature of the web that makes Photoshop a poor design choice). David Jones, Content Coordinator, Customer Relations Information and Technology Management - KL PS, (808) 948-5830 MMS hmsa.com made the following annotations. -- This electronic message is not an offer to contract, the acceptance of an offer to contract, or in any other way intended to contractually obligate HMSA; neither is it intended to change the terms of any existing contract unless specifically so stated. The information contained in this electronic message (or attached hereto) is intended only for the individual or entity to which it is addressed and may contain information that is confidential and protected by law. If you are not the intended recipient of this e-mail, you are cautioned that use of its contents in any way is prohibited and may be unlawful. If you have received this communication in error, please notify the sender immediately by e-mail or telephone and return the original message by e-mail to the sender or to [EMAIL PROTECTED] We will reimburse you for any cost you incur in notifying us of the errant e-mail. Thank you. · == __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trouble with line-height and div overflow:hidden
On 22.08.2008, at 23:04, Chris Akins wrote: Setting up a container that's fixed in BOTH height and width is failing to design for the web, in my opinion. It's design for print. I fully agree 100%. It's not my call however. The div height/width is given and I have to deal with it. etc. These variables pretty much dictate that if your content is important at all, then your containers for that content should grow and shrink with said content. Again, I agree. In this particular case, however, the content isn't _that_ important I guess. In the div there's an image and some teaser text describing the image - both rendered as a link to the content in full view (different page). Regards, Marcel -- Marcel Stör, http://www.frightanic.com Blog: http://frightanic.wordpress.com Skype: marcelstoer __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
