CSS & layout errors with CDFv2

See the attached image, which was made in Firefox 2. The arrows, red outline, and purple outlines were added by me for the purpose of illustration.

1/ Note how the purple boxes overlap with the red box. The red box is the containing block for the Google ad. The purple boxes are the containing boxes for the prev. and next buttons. The result of this overlap is that the previous and next links are unclickable. This overlap is not supposed to be happening, but it is, and it most likely indicates problematic CSS code. (I drew the outlines using the DOM Inspector, so the representation of this error is 100% correct). This CSS problem does not show in IE6 because of IE’s buggy handling of CSS, but this is a problem for those browsers with compliant CSS like Firefox.

2/ Note the misalignment of the prev/next arrows. This shows in all browsers.

3/ Note the two instances of cut-off text.

4/ Note the unknown character icon between “Color” and “Green”. The problem is that the page is being rendered in UTF-8, but the text stored in the reviews are stored in the Western European character set. One solution would be to re-encode the review text (BTW, this affects multiple parts of multiple reviews) in UTF-8. Another solution would be to stop using “fancy” MS-Word quotes and instead use normal ASCII-compliant quotes since ASCII is a subset of both the UTF-8 character set and the Western European character set and thus anything within ASCII is safe. A search-and-replace of all the fancy single-and-double quotes would do the trick.

Thanks for the report kliu0x52. Firefox compatibility is certainly what we really want! We need to test the page more with firefox, since I can confirm that most bugs also appear in firefox 1.5. The issues are on our todo list, and we will get back to you asap!

Speaking of browser compatability, has anyone tried to print the main page lately? Doesn’t matter what browser I use, the results are pretty funny.

That’s because the designer used a separate style sheet for print (vs. using the same for screen and print), and as a result, what is rendered in print is not necessarily what you see on the screen. Using a separate CSS for print is the correct and right thing to do. Whether or not there are errors in the print CSS is another issue, though.

Looks awful in Firefox 2 on Linux. Despite my specific rig I very seldom encounter a site that looks this bad. See attachment.