Last week, I gave a couple of Netscape/IE quirks that could affect you page in a major way! If you missed last week’s article, click here to check it out:
www.DesignNewz.com/2001/0521.html
Using Style Sheets
Using Cascading Style Sheets can greatly decrease the risk of website foul-ups, for obvious reasons. You can control text sizes and text spacing precisely, colors and backgrounds can be easily modified, and your page can take on a new look without changing the HTML at all. But it’s important to remember style sheets behave differently in different browsers, and on different platforms.
I design on a PC, but I know that there are a lot of Mac designers on the web. I also have an iMac that I test some of my designs on. The only browser I run on the iMac is IE 5, though, so these observations are only pertinent to that faction of web designers. One things I’ve noticed between platforms is that text spacing, specifically line spacing, is drastically different when using form elements or other kinds of text alignment methods.
Go to eZined.com. If you’re on a PC, you’ll see a decent looking design with a long column of newsletters on the left side of the page. Scroll all the way down to the bottom. Things line up pretty good, don’t they? The left column ends pretty even with the end of the content.
If you’re running a Mac, however, you’ll see that things aren’t lining up quite the same. The space between left column links is far greater than on PC, but the style sheet clearly sets the font at 10px verdana. Clearly, there is a difference in line spacing between platforms.
The solution is to alter the line-height of the left column text. The CSS for that alteration would be something like this:
p.newlineheight { line-height: 40px }
A precise calculation of pixel height, using the line-height style would correct the problem in Mac IE 5, but create a problem in PC IE 5, so you would need a Javascript to determine which OS you are running, and then write the appropriate style. Simple!
While we’re talking about eZined.com, there’s another method of text formatting I used that will clear up a lot of problems, cross-browser, cross-platform. I’m not sure about you, but I HATE cell padding!! When you’re designing a precise page, that relies on everything fitting perfectly with graphic elements split across table cells and rows, the last thing you need is a big fat cell padding declaration in your table!!!
The method for justification and padding I used on eZined.com was the margin style. There are also four separate sub-declarations of the margin style: margin-top, margin-bottom, margin-right, and margin-left. For eZined, I used the margin-right style on the long column article. The margin style gave me the same whitespace between the feature boxes and the column text that cell padding would’ve given me, but using the margin style allows for easy editing of the actual margin. Plus my title graphics are the width of the full cell, so the margin style doesn’t affect those, whereas a cell padding on the entire cell would’ve caused major problems with the graphics.
I’m sure there are tons of cross-browser, cross-platform issues that you readers have encountered. Feel free to mail me and I’ll try to address them.
Murdok provides free highly informative newsletters for web developers, IT professionals and small business owners. We deliver 50 million email newsletters per month and have over 4,000,000 unique opt-in subscribers. From our extensive range of email newsletters we can provide you with a selection of newsletters that best meet your interests.
