Yet another few hours wasted hacking workarounds for CSS flaws in Internet Explorer for Windows...
Yup. It was time again to review the behaviour of some new stuff in what the folks in the NGRF site-development team have come to call My Favourite Browser. And, of course, there were problems where glaring bugs in IE's implementation of CSS conflicted with our attempts to use terse semantic markup and pure-css layouts.
This time around, there were problems with the display of listed embedded discussion summaries, the default style of our weblogs, and with with the convenience pretty-floating images for teamtask decoration - in each case, clean semantic markup and straightforward styling ran across bizarre flaws in IE's rendering engine.
- listed embedded discussion summaries - disappearing text
- (These appear optionally in any indexFolder render; tersely showing the most recent discussion items from anywhere within the subcontent). This was another case of the weird 'disappearing text' bug, which can be worked around by setting a height:1% explicitly for content which has a clear implicit height of its own. Took us hour to hunt down that fix some time ago; thank heavens we remember it :O) There is still some odd behaviour in these lists - which are just a series of a's - because the links are given little icons as bg images, and IE for some reason behaves very badly with css bg images and hover's... some versions attempt to fetch the image repeatedly, for instance, so there is a noticable flicker when hovering even though the :hover styling does not change anything about the background-image... sigh.
- default style of our weblogs - h1 in the context message caused left-styled sidebar to clear beneath main content
- The default style for knotes weblogs - which I do know needs a lot of work and rationalising - places the sidebar div at the left of the main blog content with css. Somehow, the h1 in our context messages when viewing categories etc caused this to clear so that it appeared beneath the main blog content. Changing the h1 to an h3 worked around this. We also tuck the blog into a maximum width of about 900px in that style, so that a banner image runs across the top, and so that the main blog text stays within readable em-widths without having to hack 'p' etc tags to get readable widths in IE/win. Blinking 'eck, I forgot to apply the javascript expression workaround for max-width to the blog-content wrapper class... so it was displaying across the width of the page and looking very peculiar. Why-o-why can't a company the size of Microsoft manage to implement a simple and standard property like max-width? We also had to use an expresion hack to effect the centering of the wrapper div in the page...
- pretty-floating image for teamtask decoration - the dreaded float against dl bug
- For the main seed-content of team tasks, I have a few little utilit classes which give the decoration images nice frame-like borders and float them left or right. When these render next to the dl's for embedded discussion topics, they 'cut off' so that the area of the image which would have been shown from about 10px below the top of the next-door dl just disappears. The dl content and it border clearly appear to stop before they 'get to' the floated image... but something causes the image to disappear below that imaginary line :O( Ended up having to get the dl class to clear both in ie (again using the expression hack for branching)...
Why do developers have to waste time we could be spending on functionality fiddling to work around bugs in this notorious browser? Why can't MSoft at least offer some updates to fix these bugs and complete their implementation of css? Why don't users everywhere revolt and Get Firefox?