Saturday, 20 February 2010

Trying to get Amazon Machine Tags Wordpress Plugin working

This morning I was doing more work on my photo website blog, trying to get the Amazon Machine tags plugin working okay.

I was having trouble with the Amazon ads being totally squashed in IE6 (1% height for IE6 is specified in the CSS that comes with the Amazon machine tags plugin). If I removed removed this line, then the text following the ad wouldn't clear, and would instead float left against the image in the Amazon ad.

This problem is not with the Amazon machine tags plugin, but rather something some other rule in my CSS was causing or interacting with the amtap CSS to cause the problem. So I spent most of the morning trying to debug what CSS rule(s) was causing the problem.

Eventually I found the problem was that I'd set a 400px height on my #content div, and this was making the 1% height clearing trick for IE6 to not work, but instead make it 1% of the height of the 400px #content div. A fix for this was obviously to set the height of the #content div to auto. However, this then caused problems on short pages as it would mean that the page would be too small to fit in the height of the sidebar (which is absolutely positioned in IE6).

So instead I decided to edit the XSLT used for generating the Amazon ads, and add a clearing div after the advert. However, I now had a problem in that in all versions of IE, the content before and after the Amazon ad was wrapping tightly to the top and bottom (respectively) of the Amazon ad. It took me quite a while, but eventually I worked out that the XSLT was outputting my clearing div I'd added as <div class="clear" />, and IE was interpreting this as an opening div tag instead of a self closing tag.

So for the small portion of the morning I had left and also quite a bit of the afternoon, I tried different ways to try and get the div to process as a starting tag and an ending tag instead of just a self closing tag. Unfortunately my efforts were confounded by the XSL being cached by Amazon, so I couldn't tell whether my changes were having any effect or not.

I did find one change I made, when I left it for about an hour, then refreshed the page, I now got an XML error, despite my XSLT being valid (validated it in the W3Schools XML validator, and I only added in a couple of tags anyway, so you could see it was valid). Weirdly, the last end div tag in the XSLT wasn't being processed for some reason.

In the evening I watched an episode of The Equalizer, and also added some metadata to some blurry photos I took on the plane before we left for Korea, back in October. I carried on trying different methods to get an empty clearing div at the end of the amazon ad, but they all seemed to end up with a missing </div> tag, so being invalid XML and breaking the page.

Eventually I found the problem was not with my XSL rules, but rather with the way the Amazon Machine tags plugin extracts the Amazon ads created by the XSLT to put in the post. I had assumed that since the method of the XSLT that comes with the Amazon Machine Tags Plugin was XML rather than HTML, that the plugin was using XML parsing methods to extract the ads from the XML document generated by the XSLT. But actually, it just uses a regex to extract the contents of the divs:
// Match anything within a division
preg_match_all( '/]*>(.*?)<\/div>/ix', $sItems, $aItems, null );
So of course, this regex was extracting from the start div tag of the Amazon ad to the end div tag of my clearing div, thus resulting in the end div tag of the Amazon ad being missed out. To fix this, I tried using a clearing span instead of a clearing div, I haven't tested whether this works yet though.

In the evening I also watched a bit of The 39 Steps with Mauser, Clare, and L, and went on Civ IV for a bit in Mauser's bedroom.

The weather was a mixture of cloud and sun. There was an okay sunset, there was a large cloud above the horizon, but for some reason (probably it was too far forward), it didn't get lit up underneath by the sunset.

Food
Breakfast: Orange Marmalade Toast Sandwich; Cup o' Tea.
Lunch: Grated Mature Cheddar Cheese Sandwich made with Fresh Bread-Maker-made Bread; A few Flamin' Hot Chilli Sauce Flavour Pringles; Crust of Fresh Bread-Maker-made Bread with Strawberry Jam; Piece of Tiramisu; Caramel Rocky; Cup o' tea.
Dinner: 2x Posh Sausages; Mashed Potato; Baked Beans; Tinned Plum Tomatoes. Pudding was Rice Pudding with Strawberry Jam. Coffee; Piece of Lemon Flavoured Turkish Delight; Loads of Turkish Delight Icing Sugar.
Supper: Hobnob; 2x Wafer Biscuits; Cup o' Tea.

No comments: