With the release of IE8 getting closer I took a moment to check out our web site and Benchmarks Online in the new browser. As I suspected, the incompatibilities on our web site were of the same ilk as when IE7 was released and required minor updates. The updates to Benchmarks were also fairly minor, though did require a bit of effort to track down. Luckily IE8 includes developer tools right in the browser, making debugging web content much easier.
While I was at it, I decided to see how the JS+CSS was working in Safari (latest version on Windows and Mac) and Opera (latest versions on Windows). There were some minor issues with these browsers that I fixed as well. Quickly, Safari and Opera both were having trouble displaying the bullets in my ordered list when the pseudo multi-column-styling was applied. The odd thing is that the numbers were there, just not visible until an element was forced on top of them.
Finally, I decided to update the multi-column list code on the web site to that used in Benchmarks (which is more robust). I did run across one problem in the update that I may have to investigate further. Essentially, the script was not correctly positioning the second+ columns if a margin was specified on the container OL/UL.
Float styling is a useful aspect of CSS … until it’s not. When a floated element occurs inside a container and you want it to be wholly in that container you have to resort to hacks to do so. Or do you? Never content to assume that a question has been resolved, I decided to see if anyone had come up with a new method of clearing a float. Lo and behold a solution has emerged, and the solution is so simple as to defy logic: apply overflow: auto to the container element. I’ll leave the full explanation (with examples, alternatives, and warnings) to the experts.
Of course, there can be advantages to the default float rendering. Most notably I found it useful for creating some nice formatting around blockquotes, such as in our textbook analysis report.
Elements with opacity styling are stacked independent of their containing object. As a result, any positioned elements that do not have a z-index declaration and that appear in the HTML code prior to an opacity-styled element will appear underneath the opacity-styled element (see example). This is the defined behavior in the CSS specification, though currently only gecko- and WebKit-based browsers (Firefox, Safari, Chrome) exhibit the “quirk” in question. From the CSS3 Working Draft:
… implementations must create a new stacking context for any element with opacity less than 1.
CSS Color Module Level 3: Working Draft 21 July 2008
Just another Blogs @ EclecticGeek site