Gebruiker:RonaldB/column1

Questions/remarks here

Bugs & Compatibility

This is a page about discovered bugs in browsers which are relevant for wiki pages. The text is in English on purpose, in order for the total community to benefit from this. Where appropriate, however, the less technical stuff may be in Dutch (as well).

Browsers that I have taken into account are:

• MS-IE: versions 5.0 (nowadays rarely used, but useful for some kind of testing), 5.5 (still frequently used) and 6 (most abundant), abbreviated IE.
• Mozilla (version 1.6) and Firefox (version 1.0), abbreviated MZ.
• Opera (version 7.54), abbreviated OP.

All browsers running on a Windows (98, 2000 or XP) platform.

Een inleiding tot compatibility issues

Zie hier voor een leken-uitleg over de problemen die bij verschillende browsers kunnen optreden.

QuirksMode.org

An excellent site with many examples, do's and don'ts about cross-browser webpage design.

Bugs in Webbrowsers

Headers within a table within another table (IE bug)

....

Test samples

• Example to demonstrate the bug in IE (Note: Shows correctly in MZ. OP does not have this bug, but does have another one, i.e. .....)
• Example of the work around
• Compare the two

Multiple right aligned thumbs (MZ bug)

MZ has a bug which is visible when one uses the following construct:

[[Image:<picture1>|right|thumb|<text1>]]
[[Image:<picture2>|right|thumb|<text2>]]
[[Image:<picture3>|right|thumb|<text3>]]
===<Header>===
<header text>

The purpose of this construct is to have more than one image right-aligned (with the float:right attribute) and to have the text (including the header) wrap around the column of images. The rendered HTML looks OK.
However, MZ moves the edit tag, which is right floating, but contrary to the floating images does not have a clear:right CSS property, to the top of the last image in the column of images.
IE and OP display the page correctly.

Workaround

Change the construct to:

===<Header>===
[[Image:<picture1>|right|thumb|<text1>]]
[[Image:<picture2>|right|thumb|<text2>]]
[[Image:<picture3>|right|thumb|<text3>]]
<header text>

Disadvantage: May result in superfluous white space in text, if the page is displayed in windows of a different size or with a different aspect ratio.

Test samples

• Example to demonstrate the bug in MZ (Note: Shows correctly in IE and OP)
• Example of the workaround

additional example

• Gebruiker:RonaldB/column1/sample3err