[plum] CSS, Plum, and portability

[Dan]

Hi y’all,   As some of you on the PlumDiscussList (PDL) may know from a previous post of mine, I was having an initial struggle going ALL CSS with my layouts and styling for my first Plum project.  I bought a couple of books and Google’d a lot and learned a lot in the process.  My CSS-learning velocity is up par finally and I hope to keep delving into the mysteries and machinations of best-practice CSS.   And to that concept “best-practice in CSS” I learned something that I’d like to share since it required a few minor but key changes in all the Plum stlyesheets.  Has to do with the type of length unit specified for fonts in particular.   Goes like this:   - using px as in font-size: 11px; sets the font size relative to the resolution of the viewing device. Such as what screen resolution is your monitor set to.   - using em as in font-size: 1em; sets the font size relative to the parent element.   The distinction is critical and can be a blessing and a curse.  The biggest advantage to using em units is that the user-agent (the browser of the person viewing your website) can change the viewable font size on his/her screen. In IE browser, click on View/Text Size/ and pick from smallest to largest. Medium is the default.   BUT px units do not resize in IE. So your site visitor is out to lunch if you’ve used a too-small pixel size –for their eyes, not necessarily for your “design layout”.   The biggest problem in using em units is when your text elements, such as menu/nav items in a horizontal nav bar, are laid out relative to a “graphical box”.  If your user upsizes his/her viewable text size it can blow up your cool design.   But what if your user is looking at your website on their PalmPilot, or cell phone? With px units they are out to lunch. Try viewing a website laid out to 800 x 600 pixel resolution with everything scaled in px units on your cell phone’s browser.    So, what I found was a very workable solution, being re-sizable fonts for everyone who needs or wants a larger type face AND everyone viewing your website through a device other than a 21” flat-screen monitor, is to MIX AND MATCH the length units.   What I did was for any and all text elements on my layout where the containing div box was enabled to re-size relative to its content—and this is a key point for dynamic content developers (vs. WYSIWYG HTML static layouts) I use em units.  Then for areas of my layout where I needed the text to remain sized relative to the “graphical” layout of its box I used px units.   In my site this works perfectly. My horizontal nav bar has an image background that the site designer provided (wants) and there is only so much horizontal room for a limited number of menu items. So here I used px units to size the menu items.   Then in the content area, which is really most important since this is what the view is there to read anyway, I used em units.  I can specify the “medium” size –how I really want the screen/layout to look—in em units, and if the visitor needs a larger type size due to squinty eyes they can simply “upsize” the screen and EVERYTHING scales up or down appropriately.  Just like ZOOMING in or out in maps.google.com.     Hope this makes sense.  Here’s a more complete (and probably better) explanation: http://www.bigbaer.com/css_tutorials/css_font_size.htm   And by the way, you can ALSO use em units to size/re-size images so they too scale up and down WITH the text.  The link above has a tutorial on CSS Image scaling. !!!       Happy coding,     Dan Kaufman       An Elephant Never Forgets [EMAIL PROTECTED]