I had an issue with an application I was writing recently that positions a lightbox based on the height and with of the image inside it. I was using Javascript to get the height and width of the image, then adjust the CSS on the lightbox accordingly before displaying it. However, Internet Explorer kept returning 0 for the height and width image, causing the lightbox to display improperly.

The Problem:
Part of the application I was writing involved displaying a table with a list of image information. When a row of the table was clicked, the image itself is displayed in a lightbox positioned in the center of the screen based on the height and width of the image. I was using jQuery and the jqModal plugin to do this. I set the click event of the table row to change the ‘src’ attribute on the image tag inside the lightbox, and binded a load event to the image tag inside the lightbox that repositioned the lightbox then displayed it. That way, I was sure that the code to grab the dimensions of the image wouldn’t execute until the image was loaded. At least, that’s what I thought. For some reason, Internet Explorer was not getting the dimensions of the image, causing the upper-left corner of the lightbox to always be in the middle of the screen, despite the size of the image.

I discovered that the source of the problem was that because the lightbox was set to “display: none” when the src attribute was changed, the image wasn’t actually being loaded despite triggering the load event. Internet Explorer does not load images unless they are actually being displayed. Because of this, I kept getting 0 as the height and width of the image.

The Solution:
It turns out that the images will load properly if the containing element is set to “visibility: hidden”. However, since jQuery and the plugin I was using hides elements by setting them to “display: none” by default, I merely implemented a workaround for IE which looks something like this:

if ( navigator.appName == "Microsoft Internet Explorer" ) {

$('#lightbox-image-container').css('visibility', 'hidden');

$('#lightbox-image-container').css('display', 'block');


var image = document.getElementById("lightbox-image");

var imgWidth = image.width;

var imgHeight = image.height;

if ( navigator.appname == "Microsoft Internet Explorer" ) {

$('#lightbox-image-container').css('display', 'none');

$('#lightbox-image-container').css('visibility', 'visible');


Note I used document.getElememtById to reference the image rather than using the jQuery width and height methods because the former is more compatible cross-browser.


Coding HTML Emails

April 29, 2009

Any developer who’s ever put together an HTML email, felt good about it, then looked at it in an email client such as Outlook (or Outlook, Outlook, and even Outlook) knows exactly why I feel compelled to write this post.  The way HTML renders in web browser and the way it renders in an email client are 2 completely different animals, and having done my fair share of emails I think I can provide some insight.


If you don’t feel like reading this entire post, then remember what I think is the golden rule of HTML email coding:  Use the oldest possible techniques when creating an email.  That’s right, pretend you’re a developer in the early 90’s and you’ve never heard of background images, floating divs, z-indicies and all that good stuff that makes the internet fun.


To be a little more specific, here’s a list of some do’s and dont’s for creating HTML emails:


  • Use div tags.  Ever. (The only time I think I’ll ever say that in my life)
  • Use IDs or classes on any element.
  • Use relative or absolute positioning.
  • Use margins or padding for spacing.
  • Use background images on anything.
  • Even think about using Javascript under any circumstances.



  • Use tables and nothing but tables to layout your email.
  • Keep use of rowspan and colspan to a minimum.
  • Use HTML attributes in lieu of inline styles whenever possible (for example, width=”50″ instead of style=”width: 50px;”)
  • Use spacer gifs in their own cell for dead space (in lieu of margins and padding)
  • Apply all text styles inline.
  • Specify line-height on all text.
  • Keep use of CSS as basic as possible (just stuff like color, font-family, font-size, line-height, nothing too fancy)


If you’re in doubt about what CSS styles are supported in what browser, here’s a really good resource:
 Guide to CSS Support in Email Clients (2008)


Also, I would recommend checking out the Email Standards Project.  It’s definitely a worthwhile cause.


While combing some forums, I came across a rather common problem that had honestly never even considered until now: How do you set up a page that is called via AJAX so that it can properly handle non-AJAX requests? For example, if a page makes an AJAX call to a page called ‘get-products.php’ how should someone just typing in ‘get-products.php’ in their browser be handled?

The solution is to look for a server variable called HTTP_X_REQUESTED_WITH

When a page is called via an AJAX request, the value of this should be set to “XMLHttpRequest” but if the page is simply called manually through the browser, this variable will not even be in the server variable collection.