The following is a collection of screenshots and accompanying URLs for some strange display problems in Netscape and Microsoft's browsers. I also have a list of links to similar resources about the same subject. The best reference I've found on CSS is Cascading Stytle Sheets by Hakon Lie and Bert Bos. It's a great book, it presents CSS in a simple and clear way, but be warned that browsers won't always display what you specify.

An Image Float problem:
I've seen this occur on many sites, including my own: an image floats magically over the text, covering up words and sometimes images running off the edges of pages. As far as I can tell, it occurred to me when I tried to format all text on a page by declaring font properties for the P (paragraph) tag. If an image tag <img src="image.gif"> is aligned with a P tag, the image will float over the text below it. I've seen the occurrence of this problem in all 4.x versions of Netscape on both Mac and Windows. Screenshots are shown below:

the good
A page viewed in IE4/Win98
the bad
Same page viewed in NS 4.06/Win98

I've since taken the offending code off the site, but it's something to look out for. I've seen it pop up whenever I declare a style attribute to inside a P tag, like this: <P class=bodycopy>. A similar problem earlier this year at High Five has been well-documented  by Jeffrey Zeldman and Andrew Zimmerman. It displayed incorrectly in Netscape and all non-windows versions of Internet Explorer

The "Image Borders with CSS" freak out
I work in a university computer group and provide support to other campus developers. Recently, a person called me with some display problems they encountered with Netscape 4. I took a look at the page and couldn't believe what I saw. Viewed in IE4, the page's images all had a blue border around them and were in tables next to a text-timeline. In Netscape, the images were floating out of the tables, in random places, and did not have borders. Upon further investigation, I realized that the author had declared borders in Frontpage98 using CSS, and I knew Netscape has problems with them. I informed the author that the blue border suggested an active link, which none of the pictures were, so it was a poor design choice from a user-interface standpoint. We removed all the border CSS code and the problems were gone, but I still couldn't believe that Netscape 4 was taking images out of tables and moving them to other parts of the page. Screenshots below (note: resize your NS browser to see the images move all over the place):

black_lit_ie.jpg (21430 bytes)
A page viewed in IE4/Win98
black_lit_ns.jpg (19901 bytes)
Same page viewed in NS 4.06/Win98

Steve Champeon's Textarea Nightmare
As mentioned on Steve's excellent Web Design list, he discovered a strange display of textarea fields that had styles declared with CSS. It's subtle, but can cut off text within the field, not to mention blow a form design. Screen caps are below, follow the link if you'd like to see the page for yourself. 

goodtextarea.gif (8200 bytes)
A page viewed in IE4/Win98
badtextarea.gif (7562 bytes)
A page viewed in NS 4.06/Win98

Loose ends
This page is another example of CSS rendering problems, I've made section titles large, blue text using one class, and made this body copy another class. When they are seperated by a <BR> tag, the body copy doesn't seem to justify in IE4 for Windows. If you're viewing this right now in IE4, you can see the top paragraph's text is justified, but this text is not. In Netscape, the text is all fully justified to both margins at every section of the page. Strange, eh?

One last thing to note to developers, CSS is very finicky! Forget to close a curly bracket ( } ), or leave off a quotation mark (") and your CSS will look like hell. You want to see this page with a single forgotten character?

Resources
Here's a list of links to other documented CSS display bugs:
The CSS Pointers Group
Todd Fahrner's CSS implementation problems page
David Baron's excellent (and systematic) W3C test results page
W3C's CSS pages

 

matt@haughey.com 1998 Matthew Haughey

 

The little shop of horrors

CSS

  a    l o o k   a t    t h e     d a r k e r    s i d e    o f     C S S    r e n d e r i n g

Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text  Normal text normal text  Normal text normal text   Normal text normal text