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.
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
Related Posts
Tags
Adobe Apache Blog Blogging Books Canon Command Line CSS DSLR Firefox Google Hardware HTML IE7 Installation Internet Explorer JavaScript Linux Microsoft MySQL Opera Operating System Oracle Perl Photoshop Photoshop Elements PHP Safari SAS SQL Ubuntu UNIX VirtualBox Virtualisation Virtual Machine Vista VMware Web Browsers Windows Windows XP WordPress WordPress.com WordPress plugins XHTML XP
0 users responded to this post
1 Pingback & Trackback On This Post
Leave a Comment