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 Style Sheets by Hakon Lie and Bert Bos (note there is a new version coming out soon). 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. A similar problem at High Five has been well-documented  by Jeffrey Zeldman and Andrew Zimmerman, which 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 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 know Netscape 4.x 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 (including into other tables). Screenshots below, notice how the darker image is above the lighter one in IE, but the images actually switch places (!) in Netscape 4 (load the page in your NS browser and then resize it to see the images move all over the place):

Correct positioning of elements...
A page viewed in IE4/Win98
Note one image above another, not positioned correctly at all
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.

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

Steve Champeon's Font styles in Table Cells problem
Steve pointed out a display problem that was a part of the Cool Site in a Day competition. As if the team wasn't strapped enough for time, they had to write a workaround hack to get any text within a table to show formatting. Steve said: "We found that <TD>s we were using to align images freaked out when you applied font styles to them, even if they contained no text other than the ALT attribute for the IMG. We had to define a special, 'font styles' CSS CLASS and apply it to <TD>s which contained text. Not a big deal, but ugly, boy!" 

The good
The correct page viewed in NS4.07/WinNT, with font formatting (leading) for the body copy
the bad...text is slammed together, follow the link to see
The "bad" page viewed in IE5b1/WinNT, but without the special TD CLASS attribute

CSS text padding within a table
I guess IE just doesn't do well with CSS applyed to text within a table. I was building a navigation bar with text links and noticed unformatted text started and ended right up against the sides of the table cells (as it should within a table cell with cell padding and spacing set to zero). I made a CSS class for the nav bar text, and added the attribute:
margin-left: 5px; margin-right:5px;
This was ignored by IE (screenshot of the menu below) but worked great in Netscape 4.7. The workaround was messy, I had to create a new class with the margin padding only, and remove the margin code from the menu link class. Then I had to code each of the table cell contents like this:
<div class="menupad"><a href="application.html" class="menu">Link here</a></div>
Great workaround, huh? Double the code just to get a simple margin to show. Thanks IE!


A closeup of the menu in IE 5/WinNT. Note how the text goes all the way to the edge of the table cell. Here's the page if you want to see it for yourself

The same menu, but in Netscape 4.7/WinNT. It works fine here.

Loose ends
The page you're viewing now is another example of CSS rendering problems, I've made section titles large, blue text using one class (set with the <SPAN CLASS="name"> element, and made this body copy another class (again, using SPAN). When they are separated 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. I've talked with other developers and it seems like the SPAN tag is prone to bugs, it's probably a better idea to set everything off with DIV tags (as I've done on more recent projects)

One note to developers: CSS is strict. 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? IE4/Win displays a mess, NS seems to do better. While creating this page, I previewed it once and saw what you see in that link, all because I accidentally dropped a quotation mark from the H1 style attribute. I'm not saying that the browsers should have more error-correction for CSS, because they are already chock-full of stuff that lets people write malformed javascripts and HTML, I'm saying to watch your syntax very carefully during debugging time.

Another problem on this page is the top "banner" made out of three CSS-positioned layers. It's supposed to look like this:

CSS Banner

The screenshot is from IE5b1 on my NT, and chances are it looks a lot different on your browser. I was playing with font style inheritances to see how each browser renders the type, and it seems like IE and NS on both Windows and Mac are interpreting the styles differently. It looks like Netscape is picking up the font face attributes over the CSS styles, while IE is ignoring the font face tags. On a Mac, everything seems to be in a different place, probably due to font size differences between Macs and PCs.

April 1999 Update: The banner now looks different in IE 5 final, the "CSS" is showing up in the Georgia font on my system. I'll continue playing with this page's stylesheet

June 1999 Update: It was my screwball stylesheet that's to blame for it, I had the font families declared like this: "Arial, Times New Roman", when it should have been: Arial, "Times New Roman". Watch where you put those quotes! It should probably look good now.

Another June 1999 Update: I downloaded the M7 build of Mozilla and checked some of these same error-prone pages. The first two highlighted problems (the image related ones) are ok now, the display is similar to IE 4/5. Unfortunately the second two problems still exist. Oh, and the title banner looks completely different.

Resources
Here's a list of links to other documented CSS display bugs:
A List Apart's Fear of Stylesheets Part 1 and Part 2.
The CSS Pointers Group
Todd Fahrner's CSS and typography page which includes his gif essay
David Baron's excellent (and systematic) W3C test results page
W3C's CSS pages

If you make web sites and don't want to deal with problems like the ones outlined above, join the Web Standards Project and help do something about it.

Fight for your right to standards!
Fight for your right to web standards!

matt@haughey.com 1998, 1999 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 Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text Normal text normal text