Hello Everybody,
In the course of testing my site, I found a tiny bug in Internet Explorer 6 running in Windows (at least, while running under Win98SE.) When the text alignment is justified, the widths of the boxes seem to be defined in IE before the italics are applied. Then, the boxes containing the italics are made wider. This wouldn’t be too critical but it’s only those boxes that get larger, not all boxes on the screen. This bug only comes into effect when the containg DIV has a defined width and a segment of text in italics is large enough to be wrapped to the next line, where the wrap occurs within the italicized segment. If the line-wrap comes at the end of the italics, the box width does not increase. I suppose one could italicize each word individually, but that seems more than a bit annoying.
If you’re using IE (IE6 for sure, the others I haven’t tested), you’ll see what I mean in this example. If you’re not using IE, you should see perfectly aligned boxes.
However, since your browser cannot use cascading style sheets, so you may not see the example below at all. There is one large DIV with two smaller DIVs nested within, all with thin black borders.
These two boxes are identical using the identical code. The only difference is that the upper text is in italics while the lower text is not.
These two boxes are identical using the identical code. The only difference is that the upper text is in italics while the lower text is not.
Here’s a screen capture of the demo DIVs on my machine running Internet Explorer 6.0.2800.1106 under Windows98SE 4.10.2222 A.
As you can see, in IE6Win, the box with the italics is wider than the box without. This moves the right border to the right. This pushes the outer box as well, making its right edge move right. Now, this wouldn’t be that bad if all the inner boxes also extended—they should because they are all set to extend the full width of the outer box—but they don’t. In any other browser that supports HTML 4, the right and left borders of the inner boxes are all aligned, as they should be.
The funny thing is that the text itself isn’t any wider! Look at the screen cap and you can see that the right edges of the text all line up, but the container is still made four pixels wider.
While the this example uses the HTML <i> code (applied within the P in the first DIV) I also tested it with the HTML <em> and the style="font-style: italic;" codes and received identical results.
Please do me a favor and let me know what combinations of IE and Windows you are using and whether you get the same results I do. I’ll add a table to this page letting everyone know what combinations work or not.
By reducing the width of the paragraph elements, the containing DIV is no longer adjusted by italics. I set the P width at 98%, to avoid an DIV extension at even low screen resolutions. (But if the IE window is narrow enough, the upper DIV still ends up wider.) This next demo uses the same 98% width for both the upper and lower paragraphs. In Opera and Firefox, it looks nearly identical to the previous demo. But now IE has aligned borders too.
One odd thing: If you set the P width, IE loses the ability to set the top and bottom P margins (and it makes the bottom margin of the containing div larger.) See the below bug report for more details.
These two boxes are identical using the identical code. The only difference is that the upper text is in italics while the lower text is not. (P width: 98%)
These two boxes are identical using the identical code. The only difference is that the upper text is in italics while the lower text is not. (P width: 98%)
The other option is to use explicitly declared widths, but you lose dynamic resizing.
As you can see below, the top and bottom margins of the text don’t match the right and left ones by default, and they’re inconsistant between browsers. That’s why I had been expicitly setting the margins of the P elements. But when I was making the previous workaround, I learned that IE lost the top and bottom margins and the containing DIV’s bottom margin was altered when the P width was set. This bug occurs whether or not the containg DIV has an explicit width.
The two demo texts are bare P elements with no styling, letting the system defaults control all. The upper one has only the width set, no other changes to margins or padding.
These two boxes are identical using the identical code. The only difference is that the upper text has a width setting while the lower text does not.
These two boxes are identical using the identical code. The only difference is that the upper text has a width setting while the lower text does not.
Here’s a screen capture of the demo DIVs on my machine running Internet Explorer 6.0.2800.1106 under Windows98SE 4.10.2222 A.
The DIV elements are the same as the previous demo, so the gap between them should be identical. I’m not sure why changing the P width does that to the bottom margin of the containing DIV.
Use padding and not margins to control placement of the text. See previous workaround to see it in action.
Your bug reporter,
Howard Russell
P.S. Valid HTML 4.01 Transitional, before GeoCities altered the code. The GeoCities alterations force IE into quirks mode, but the bugs occur in strict mode too. Save this page locally and remove all the GeoCities additions to prove it for yourself. (And save my bandwidth.)