IE8 still doesn't respect certain basic CSS properties
Category rants
I'm currently working on a web application wherein hovering over certain portions of a background image cause a dojo tooltip to display in order to show more information about the portion that is hovered. Easy, no? The application data defines pixel offsets (i.e. top-left and bottom-right in editable fields, from which Notes computes the width, height, and center point), so the hover connect span is empty, but given an absolute position, width, and a height. Firefox of course renders this as expected. In contrast, IE notices that the span is empty and, therefore, assumes it couldn't possibly need to be the specified width and height, so it shrinks it to a single pixel. I figured that might be something they fixed in IE8, but have now confirmed that this silly behavior remains.
How did I fix the problem? By using the archaic (but, apparently, still necessary) shim hack: the span now contains an img tag pointing to /icons/ecblank.gif with the width and height set to what the span's dimensions should be. Problem solved, I suppose. But let me know if you have a preferred workaround for this behavior. As you can probably guess, this approach strikes me as less than elegant.
I'm currently working on a web application wherein hovering over certain portions of a background image cause a dojo tooltip to display in order to show more information about the portion that is hovered. Easy, no? The application data defines pixel offsets (i.e. top-left and bottom-right in editable fields, from which Notes computes the width, height, and center point), so the hover connect span is empty, but given an absolute position, width, and a height. Firefox of course renders this as expected. In contrast, IE notices that the span is empty and, therefore, assumes it couldn't possibly need to be the specified width and height, so it shrinks it to a single pixel. I figured that might be something they fixed in IE8, but have now confirmed that this silly behavior remains.
How did I fix the problem? By using the archaic (but, apparently, still necessary) shim hack: the span now contains an img tag pointing to /icons/ecblank.gif with the width and height set to what the span's dimensions should be. Problem solved, I suppose. But let me know if you have a preferred workaround for this behavior. As you can probably guess, this approach strikes me as less than elegant.
Comments
Posted by Erik Brooks At 03:35:23 PM On 02/24/2009 | - Website - |
Span is (which you might know) an inline ({ Link } element. Inline elements were meant to be used per line (highlight/format text). I don't think IE8 necessarily is doing anything wrong, according to W3C spec.
If you -need- to use a span, set "display: block" or "display: inline-block" in the CSS, to be able to set a certain width/height.
Posted by Tommy Valand At 03:28:04 AM On 02/25/2009 | - Website - |