Microsoft’s AjaxToolKit is a very handy thing to have for any ASP.NET developer.  However, one of my biggest problems with it is that I have encountered problems in IE6.  The position of the modal appears way off center.  After doing a little research, I’ve found the best way to solve this is to wrap the panel that you’re using for the modal in a div with a style of “position:relative;_z-index:1” (it’s important to note the underscore in front of z-index. This targets IE6 specifically).  You can also give the div a class and set the z-index in a separate IE6 stylesheet if you want to still keep your CSS valid.  Here is an example of this fix in action:

<asp:HyperLink ID="lnkModalTrigger" runat="server" NavigateUrl="#" Text="Click Me!" />

<div style="position:relative;_z-index:1;">
<asp:Panel ID="pnlModalContent" runat="server">
     <asp:HyperLink ID="lnkModalClose" runat="server" NavigateUrl="#" Text="Close" />
     <p>Here is some text that will appear inside the modal window</p>
</asp:Panel>
</div>
<ajaxToolKit:ModalPopupExtender ID="Modal" runat="server" PopupControlID="pnlModalContent" TargetControlID="lnkModalTrigger" CancelControlID="lnkModalClose" BackgroundCssClass="act-modal-blackout" />

This should fix any positioning problems that you may be having in IE6.

Advertisements


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:

DON’T:

  • 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.

 

DO:

  • 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.