HWG-News Tips Early May 2000

Solutions for CSS Compatibility Problems

HWG-News features member-submitted "tips" in each issue, in the space between articles and announcements. These were the tips submitted for the 6 May 2000 newsletter, for the following category:

Solutions for CSS Compatibility Problems

Everyone knows that every version of every browser handles CSS differently. How do you design your pages to make sure that the CSS you see is the CSS your viewers get?

This issue's winner!

I use the following backwards-compatibility declarations in my style sheet to force the correct display of bold and italic text in browsers that only partially support CSS (e.g. Netscape 4.x):

B, STRONG { font-weight: bold; }
I, EM { font-style: italic; }

-- Submitted by Michael O'Rourke <cosmicat@cosmicat.com>

Other Tips for Solutions for CSS Compatibility Problems

What I'd suggest is that the author go to the following web site and then to one of the test pages offered by Toby Brown, Jan Roland Eriksson and Sue Sims. Why try to reinvent the wheel when these folks have done such an outstanding job at helping us all with the CSS problems we've encountered?

http://css.nu/pointers/

-- Submitted by Don Davis <ddavis@tulsa-ok.net>

Jeff Wilkinson submitted a plethora of tips this month! All of his tips follow:

A Debug Tip: If you're trying to debug CSS/HTML and having trouble figuring out what is being affected by particular CSS definitions, add color settings to those definitions. Seeing slight differences in font sizes is often difficult, but setting color:red; in your CSS will make sections that are and aren't affected stand out. Here's a quick example:

.sm80 { font-size: 80%; color:maroon; }
.sm80c FONT { font-size: 80%; color:green; }

This is especially helpful in debugging differences in inheritance.

---

Tool Tip: Use a CSS editor tool like Nick Bradbury's TopStyle (www.bradsoft.com) that has CSS checking and validation built-in. The style checker in TS shows you problems or issues with your code by browser type.

---

Avoid using fixed CSS font sizing: Using fixed font sizes in CSS will prevent users from adjusting the look of the page in their browsers. Considering how very many different browser, screen sizes, and vision problems there are, it's better to give up a little control to the user. Use relative font sizing such as percentages.

---

Relative Font Sizing: When using percentages to size fonts in CSS, be careful that you don't set up code that applies a reduction several times due to inheritance. The size can get very small or can vary between browsers depending on their inheritance. Avoid any size less than 80% and use classes to apply smaller sizes.

---

Be very careful to close any block elements where you are using CSS font size controls. If you leave <P class="someclass"> unclosed (no </P>), you can have hard to find inheritance bugs. It's a good idea to close block elements anyway and it'll be required in XML and future versions of HTML and XHTML.

-- Submitted by Jeff Wilkinson <jwilkinson@mail.com>