![[ladybug]](transpix.gif){kind=small}
Note: Internet Explorer is “discontinued” on the Mac platform; Netscape 4 is “discontinued” on all platforms.
I discovered this bug when using a Cascading Style Sheet with Internet Explorer 5.1.6 for Classic Macintosh and Internet Explorer 5.2.2 for Mac OS X. This occurs when using a separate style sheet, or when specifying a background image inline using the HTML STYLE attribute. (However, in the latter case, quotation marks must be properly nested for a background image to appear, as in <div style='background-image:url("ladybug.png");'>...</div>)
When I refer to an image file without quotation marks:
background-image: url(ladybug.png);
I get:
When I refer to an image file with straight double quotation marks:
background-image: url("ladybug.png");
I get:
When I refer to an image file with straight single quotation marks:
background-image: url('ladybug.png');
I get:
At least there is an easy workaround for this bug: avoid using straight single quotation marks to refer to image files in CSSs.
| Keywords: animal bird boat bottle compass crab diver dolphin duck frog galleon lighthouse lobster mermaid new octopus picture reverse sailboat seabird seagull seahorse seal sealion shark ship submarine swan symbol turtle walrus water whale yacht |
Links wrap in a paragraph too.
| Keywords: animal, bird, boat, bottle, compass, crab, diver, dolphin, duck, frog, galleon, lighthouse, lobster, mermaid, new, octopus, picture, reverse, sailboat, seabird, seagull, seahorse, seal, sealion, shark, ship, submarine, swan, symbol, turtle, walrus, water, whale, yacht |
Below is an example of the weird effect of including destination anchors (for example, <a name="LoR">Recipes List</a>) and <span> elements within <pre>formatted text when displayed by Internet Explorer 5 for the Macintosh. (BTW, this did not occur with version 4.5 of Internet Explorer for the Mac.) The two-line spaces between each recipe, and the single-line spaces between paragraphs within the recipes, disappear altogether. This does not happen when such markup is removed.
I found a workaround. I replaced the neighboring blank lines with non-breaking space plus carriage-return combinations:
&160;
Plain space plus carriage-return combinations did not work.
link to section with bug
link to section with workaround for this bug
HERBED ROAST CHICKEN LEGS (back to Recipes List)
ingredients
method
Serves 2
YELLOW PEPPER SAUTÉ (back to Recipes List)
ingredients
method
Serves 2
HERBED ROAST CHICKEN LEGS (back to Recipes List)
ingredients
method
Serves 2
YELLOW PEPPER SAUTÉ (back to Recipes List)
ingredients
method
Serves 2
While working on my bio page I unearthed this Mac Netscape 4 bug. I removed the bottom margin and padding of the bottom paragraphs in each table cell with the CSS:
.bottomless { margin-bottom: 0px; padding-bottom: 0px; }
This caused Netscape 4 to place one of the paragraphs in the table cell below the table cell where the paragraph is located.
|
Spouse: John S. Collins |
|
nicky02114@aol.com 13 July 2004 |
||
|
||||
After a lot of head scratching I came up with this workaround:
.bottomless { margin-bottom: 1px; padding-bottom: 0px; }
The 1-pixel bottom margin is barely noticeable and the paragraph no longer appears in the wrong table cell.
|
Spouse: John S. Collins |
|
nicky02114@aol.com 13 July 2004 |
||
|
||||
The authors of the table below wanted to increase the space between the check box and the little list below. They did an obvious thing: added a padding-top of 4 pixels to the contents of the table cells containing the list heading and its bullet, in their Cascading Style Sheet. But the difference in results among recent browsers was striking. Any attempts to create a consistent appearance among these browsers by modifying the CSS failed.
I added a red 1-pixel border around the items to see what was going on. Below you can see quite clearly (at any rate with Macintosh versions of most current browsers (except iCab and OmniWeb); and the various flavors of Mozilla, including Netscape 7, on other platforms) that the top padding of the words overlaps the cellpadding or cellspacing of the table. Netscape 4 does not do that great a job either, though it behaves more as one would expect. Not exactly what the authors had in mind.
I increased the padding-top to 5 pixels (7 pixels minus 1 pixel each for border-top and border-bottom) to illustrate my point more clearly.
In the end the best approach is to forget about cellpadding, and to consider the box model of the nested table itself. Then the solution becomes apparent. Specify a margin of 5 pixels for the top of the nested table which contains the Recent searches. (The table cell which contains the nested table has a background color of red.) This solution works even for older browsers such as Mac Netscape Communicator 4.77 and Windows Internet Explorer 6.
And here are two tables side-by-side (with their borders turned off), the left using the original CSS technique and the right using my workaround.