Charles and Roger, Thanks for thinking along. Javascript is of course an option, but I would prefer to avoid it for something like this. Anyway, all ideas seemed to solve part of the problem, and with a little experimentation I succeeded to combine most of it to a very reasonable result. And I found out several new (at least new for me) nitty gritty details about CSS rendering in general and the $*&%^IE6 in particular. I have yet to install IE7 to see what it will do, but for what I read it will probably behave somewhere in between FF and IE6 in this case. I guess I may have to modify a few of the hacks to not apply for IE7.
See the latest results at http://www.altereco.nl/inlinepadding.html To start with, I discovered the reason why IE rendered Example 6 so well: vertical padding on inline elements are supposed to ignore the borders of a surrounding box. But if that box is floated, IE6 cuts off the parts outside the box, as if you had overflow:hidden there. This overflow:hidden only seems to have effect when the element 'hasLayout'. To set the hasLayout property in IE, I added zoom:1 (which doesn't do anything else in this case). Now the nice thing is that when you set hasLayout, IE6 will add a space behind most text lines, so it extends the background color a bit - exactly what I wanted. I can't tune it, but well, much better then nothing. I also haven't discovered the full logic behind it yet, it seems it adds this space when the last character is no interpunction. The last line never gets this space, but this can easily be added by setting padding-right: .3em on the inline text element. Now I took Charles second suggestion (example 8) which worked very well in FF, and added the above findings to improve the rendering in IE. The result in Example 10. It takes yet another div (4 in total now!) but this is still the cleanest solution which renders reasonably cross-browser (haven't tested beyond FF2 and IE6 yet, but well, IE is usually the biggest hurdle, we'll see!). Interesting excersise. A little time-consuming though. I hope some people find this information useful. In the midst of it all I discovered a small rendering bug in FF2.0: if you set padding-right to an inline element, it will set both padding-right on the inline element, but also adds the same amount of margin-right to the virtual box that is surrounding the inline element (you could also call this padding-right on the surrounding box). As a result, all lines of text get extra spacing on the right, but the background color on the inline element only gets padding on the last line. The proper behaviour, I suppose, is to only add padding to the last line (as much as I regret that for this particular problem I was dealing with). Is it a bug, or is it a feature? There is no such problem with padding-left. See http://www.altereco.nl/paddingbug-ff2.html Loek ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
