Blog sidebar displayed in Opera before fix was applied

A while back, I reported a baffling problem with Opera managing to miss out an entry in the calendar widget on my hillwalking blog. After a bit of fiddling, I managed to track down the problem: setting position:relative in the CSS for hyperlink tags on my theme. Commenting out CSS declarations may seem a low technology way of finding problems like this but it still retains its place as this little episode proves. Changing it to position:static for the hyperlinked numbers in the table fixed the issue while I left the defaults as they were in case they had an adverse impact elsewhere. If all of this sounds rather too empirical in its approach, then I can only agree with you but a fix is a fix nonetheless. However, display:block is also set for the table entries so that may have a part to play too. Regardless of the trial and error feel to the solution, I could not find the problem documented anywhere so I am sharing it here to help any others who encounter the same sort of weirdness.

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.