the evenings out here - Thoughts, rants and musings about absolutely everything except photography. Or cats.

Internet Explorer negative margin bug

filters are not your friends

in web design , Friday, December 17, 2010

I think this is worth mentioning: I spent the better part of today trying to fix a layout bug in Internet Explorer 7, where a negative margin was applied to a floated image container. The image was cut off at the edge of the containing element.


This is actually a well known-bug - in theory - and a reliable fix is to add a “position: relative” CSS rule to the floated container.  But it didn’t work.

After a lot of research and tearing out of hair, followed by careful debugging (aka “wildly flailing about”), I discovered the reason.  The containing element had a Internet Explorer proprietary filter applied to it, to give a semi-transparent fill:

  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#59000000, endColorstr=#59000000);
/* For IE 8*/
  -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#59000000, endColorstr=#59000000)”;
border: none;

On removing this, everything worked perfectly.  So I just used a semi-transparent PNG as a fill image instead.  Probably more efficient anyway.



Nasty bug squashed

in web design , Monday, May 22, 2006

I finally managed to track down a very elusive bug which was affecting the photo pages on this site. Basically, if a thumbnails page was called directly, from say a link in a gallery update blog post, or a link I sent to someone, the first time it loaded, the gallery was blank. The second time, it was fine. This seemed to be a PHP session issue: if I discarded all the session code, it worked fine - although obviously everything else that depended on sessions was broken. But when I tried to home in on a specific setting, I got nowhere. Finally, I worked out what was happening - I guess if I'd been using a browser which was less "user-friendly" about JavaScript syntax errors I would have got there quicker, but maybe not. I finally discovered that there was a small difference between the page code generated on first and subsequent entries - it is pretty hard to spot: BEFORE before.jpg AFTER after.jpg One extra double-quote was breaking the JavaScript syntax, killing the onLoad event handler. So where did this come from ? Well it seems that if PHP session_start does not find a current session, it rewrites any links it finds in the page to include the new session ID. The problem is, it isn't so clever about what is and isn't a link, and since I am actually writing a JavaScript function on the fly, various escaped quotes and things were confusing it. First, I realised it was doing this elsewhere, although in those cases it was actually harmless. I managed to stop it by using single quotes instead of double quotes. But the line above - where for some reason, no session ID was written, just a superfluous extra " inserted - was harder to fix. Finally, I had to break one string concatenation into several steps, and finally I got the code I was trying to get the page to write, instead of what the PHP interpreter thought I wanted. That has got to be one of the most obscure bugs I've ever had to track down on a web site...