I recently changed the engine of my online photo gallery to a speedier PHP/MySQL based affair from its PHP/Perl/XML powered predecessor. On the server side, all was well but a peculiar display issue turned up in Internet Explorer (6, 7 & 8 were afflicted by this behaviour) where photo caption text on the thumbnail gallery pages was being displayed erratically. As far as I can gather, the trigger for the behaviour was that the thumbnail block was placed within a DIV floated using CSS that touched another DIV that cleared the floating behaviour. I use a table to hold the images and their associated captions in place. Furthermore, each caption was also a hyperlink nested within a set of P tags. The remedy was to set the CSS Display property for the affected XHTML tag to a value of "inline-block". With a cascade of DIV, TABLE, TR, TD, P and A tags, finding the right tag where the CSS property in question has the desired effect took some doing. As it happened, it was the tag set, that for the hyperlink, at the bottom of the stack that needed the fix. Of course, it’s all very fine fixing something for one browser but it’s worthless if it breaks the presentation in other browsers. In that vein, I did some testing in Opera, Firefox, Seamonkey and Safari to check if all was well and it was. There may be older browsers like versions of IE prior to 6 where things don’t appear as intended but I get the impression from my visitor statistics that the newer variants hold sway anyway. All in all, it was a useful lesson learnt and that’s never a bad thing.
Topics Discussed
Adobe Blog Blogging Canon Command Line CSS Debian Fedora Firefox GNOME Google hard drive Hardware HTML Installation Internet Explorer JavaScript Linux Microsoft MySQL openSUSE Opera Operating System Perl Photoshop Photoshop Elements PHP SAS Software Ubuntu UNIX upgrade VirtualBox Virtualisation Virtual Machine Vista VMware Web Browsers Windows Windows XP WordPress WordPress.com WordPress plugins XHTML XP
Twitter Updates
- Delicious: Avoid Appearing Out of Touch in Interviews by Emphasizing the New - Interviews - Lifehacker http://ow.ly/16MqAh 10 hrs ago
- Delicious: Debugging and Testing in Internet Explorer Made Easy | samuli.hakoniemi.net http://ow.ly/16Mdgd 17 hrs ago
- Delicious: Time to secure software | Security, Data and Privacy | Browse by subject area | Opinion, News, Analysis ... http://ow.ly/16M5hj 22 hrs ago
- GR Shared Items: Google Maps Adds Bike-Friendly Directions and Trails [Google Maps] http://ow.ly/16LE5o 1 day ago
- GR Shared Items: Guide: 8 ways to speed up Internet Explorer 8 http://ow.ly/16LE5p 1 day ago
- More updates...
Archive for July 1st, 2008
A case of “peekaboo” behaviour in Internet Explorer
Tuesday, July 1st 2008
Topics: Web Development
Tags: browsers, CSS, css property, Display, Firefox, hyperlink, Internet, Internet Explorer, MySQL, Opera, Perl, PHP, Safari, Seamonkey, visitor statistics, XHTML
Tags: browsers, CSS, css property, Display, Firefox, hyperlink, Internet, Internet Explorer, MySQL, Opera, Perl, PHP, Safari, Seamonkey, visitor statistics, XHTML