| <HTML> |
| <HEAD> |
| <TITLE>Safari 1.0 PRE width bug</TITLE> |
| <STYLE TYPE="text/css"> |
| <!-- |
| .box { background: #cc9; border: black solid 1px ; padding:0.5em; } |
| .dow { border-top: solid black 1px; border-bottom: solid black 2px; } |
| --> |
| </STYLE> |
| </HEAD> |
| <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> |
| |
| <H1>Safari 1.0 PRE width bug</H1> |
| |
| As noted in my <A HREF="/1/blog/permalink/2003.0920">blog</A>, |
| in certain cases Safari will miscalculate the width of a PRE element. |
| I think I've found the trigger. If a nested container element is preceded by |
| uncontained text and a blank line, and there are "too many" characters |
| contained in the nested element, the PRE width will be too wide. |
| In the examples below, the nested element is a SPAN whose content |
| is the days-of-week line, as follows: |
| <PRE> |
| <SPAN CLASS=dow> D M T W J F S</SPAN> |
| </PRE> |
| |
| <H2>Example 1</H2> |
| |
| <table valign=top width="100%"><tr><td width="1%"> |
| <PRE CLASS=box> 2003 |
| |
| <SPAN CLASS=dow> D M T W J F S</SPAN> |
| |
| September |
| 1 2 3 4 5 6 |
| 7 8 9 10 11 12 13 |
| 14 15 16 17 18 19 20 |
| 21 22 23 24 25 26 27 |
| 28 29 30</PRE> |
| </td> |
| <td valign=top width="99%">The blank line between '2003' and the nested element |
| triggers the width bug. |
| </td> |
| </tr></table><BR CLEAR=all> |
| |
| <H2>Example 2</H2> |
| |
| <table valign=top width="100%"><tr><td width="1%"> |
| <PRE CLASS=box> 2003 |
| |
| <SPAN CLASS=dow> D M TWJFS</SPAN> |
| |
| September |
| 1 2 3 4 5 6 |
| 7 8 9 10 11 12 13 |
| 14 15 16 17 18 19 20 |
| 21 22 23 24 25 26 27 |
| 28 29 30</PRE> |
| </td> |
| <td valign=top width="99%">The blank line between '2003' and the nested element |
| triggers the width bug. |
| <P>Here, the excess whitespace is reduced by reducing the |
| number of characters contained by the nested element.</P> |
| </td> |
| </tr></table><BR CLEAR=all> |
| |
| <H2>Example 3</H2> |
| |
| <table valign=top width="100%"><tr><td width="1%"> |
| <PRE CLASS=box> 2003 |
| <SPAN CLASS=dow> D M T W J F S</SPAN> |
| |
| September |
| 1 2 3 4 5 6 |
| 7 8 9 10 11 12 13 |
| 14 15 16 17 18 19 20 |
| 21 22 23 24 25 26 27 |
| 28 29 30</PRE> |
| </td> |
| <td valign=top width="99%">The blank line between '2003' and the nested element |
| has been removed, so the bug is not triggered. |
| </td> |
| </tr></table><BR CLEAR=all> |
| |
| <H2>Example 4</H2> |
| |
| <table valign=top width="100%"><tr><td width="1%"> |
| <PRE CLASS=box><SPAN> 2003</SPAN> |
| |
| <SPAN CLASS=dow> D M T W J F S</SPAN> |
| |
| September |
| 1 2 3 4 5 6 |
| 7 8 9 10 11 12 13 |
| 14 15 16 17 18 19 20 |
| 21 22 23 24 25 26 27 |
| 28 29 30</PRE> |
| </td> |
| <td valign=top width="99%">The blank line between '2003' and the nested element |
| no longer triggers the width bug, because now the '2003' is itself contained by |
| a nested element (in this case, another SPAN). |
| </td> |
| </tr></table><BR CLEAR=all> |
| |
| |
| </BODY> |
| </HTML> |
