Div width increases slighty in IE due to internal text

Is IE miscalculating the point where text should wrap?

[HarryM]

I have a page which renders perfectly OK with Netscape 7.0 and Opera 7.20 but not IE6.

There is a div with a fixed width full of a considerable amount of text. There is no left or right padding or border specified. With a slow connection I can see that the div is initially correctly sized, but as more and more text gets loaded the div suddenly widens by a few pixels - probably no more than 2 or 3.

From experimenting with other pages, I know this is due to a line of text fitting exactly within the width of the div before wrapping to the next line. If I change the word order so that the line wraps before it reaches the right-hand side of the div, the div does not expand.

Presume this is due to a miscalculation in IE6. Has anyone seen this before? And can anything be done about it?

[tedster]

Yes, IE calculates font widths slightly differently, and sometimes adds a little extra width to a div or a table cell -- and this is permissable according to the W3C. In fact, it's a necessity to allow browsers this kind of latitude, or else you could write valid mark-up that would tie their rendering engine in knots and crash the application.

IE also will sometimes add an extra line break, even if the next line doesn't print even one letter.

It's generally not a good idea to try for such tight control of a layout, cross-browser headaches are almost guaranteed. This kind of control is a print ideal, but not very well suited to the web. Line breaks simply will occur in different spots at times, even with the same browser but a different OS.

[HarryM]

tedster,

Thanks for the reply. My question was really an academic one because I always leave room for divs to expand or contract, mainly because of the different ways padding is handled. Nor am I trying to force any kind of layout. I merely provide a div with some text inside it and I expect it to wrap in different places depending on browser or how the user has set the font sizes. However I would expect the width of the div to stay stable, and the height (which is unspecified) to expand according to the amount of text. What I didn't expect to see is the width of the div changing.

I am interested that you say that expanding divs is permissable according to the W3C, but I always thought that was so they could accomodate contents larger than expected. In this case I don't see why any browser needs to increase the width, and in fact it is only IE that does.

Presumably when rendering text a browser has to calculate ahead to see if the next word will fit in the line, and if not wrap to the next line. It appears to me that IE's calculations are inaccurate. It renders the width of the div, then it starts rendering the text within that width,
but when it comes to a word that is a few pixels too wide for the remaining space, IE forces it in rather than wrapping it, and therefore resizes the div.

Sounds like a bug to me.

Harry

[tedster]

Harry, I'm with you on this one. I think the coders for IE may have taken the lazy way out, somewhere down inside the spaghetti code for their rendering engine. I haven't tested the phenomenon very thoroughy, just banged into it once in a while.

I think I've only seen it in quirks mode - are you using a full DTD and looking at the issue in standards mode when you run into it?

[HarryM]

The doctype is XHTML 1.0 Transitional, although I can't be certain IE is actually applying it.

[HarryM]

Just in case I ran the page through the W3C validator. There were a couple of errors that had crept in (don't they always?), but I fixed those and the page now validates. But the IE problem is exactly the same as before.

My guess is that in calculating font widths, small errors have a cumulative effect at the end of the line making IE think there is more space left than their actually is. But that's just a guess.

If you like I could sticky you the page. The effect is quite noticeable.