2008

Friday, April 25, 2008

Occasionally we get embarrassed. We all know that IE handles "windowed" controls like select boxes in a way that they are always on top of any other element. Well, what we know isn't necessarily so!

Today I was showing off my AJAX programming talents when the voice on the phone said, "the list is underneath the blue heading." They were using IE7 to test the sample on Lookup by Zipcode Example. The second field set let's you enter a city and state to find the zip code. Enter a city like Chicago, IL and a list box appears with all the zip codes. This is tall enough to cover the heading of the next section.

Now I believe this was tested in IE7 and worked just fine—sometime in the last year it must have been tested in IE7, but this time the list box was under the heading. My only guess is the Microsoft included a fix in an update that changed the rendering of the list box. Now instead of being on top of everything it will appear under elements coded after it. Changing the z-index value had no affect. In this case, the list box could be resized to fit, but a heads up would have been nice.

Thursday, January 24, 2008

Alpha transparency available in PNG images is necessary for realistic shadows. (GIF has binary transparency: all transparent or none.) PNG is supported in all non-IE browsers and IE 7, but not in IE6. IE 6, which is still in common use, requires an ActiveX control to render PNG images. The following CSS attribute and value does the job. 

#box {
    /*background*/
    width: 400px;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/root/images/image.png', sizingMethod='scale');
}

or 

<img src="transparent.gif" width="150" height="150" 
    style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/root/images/image.png', sizingMethod='scale');">

It's easy enough to find the filter line with a google search, but there are four additional required pieces of information that is often not mentioned.

  • The image used for other browsers has to be removed. For backgrounds, in can be replaced with a transparent gif or no image. For images, it must be replaced with a transparent image; otherwise the missing image icon and alt value is displayed.
  • A width is required for backgrounds. Both width and height must be specified in the HTML for images.
  • The path in the filter is absolute from the Web server's root
  • Image must have the filter specified in-line and not in a style sheet

With that done, and recognizing that background images neither repeat nor are positioned, the shadows work in IE 6

Monday, January 21, 2008

A client's site needed some eye candy to get the right look for its purpose. So I loaded up the GIMP and set off learning how to create image suitable images. I was able to provide the client with several eye catching options from which to choose

As a by-product, we got some new graphics for the site: buttons bubble, and shadowed page icons.

Tuesday, January 15, 2008

Hi, again there is a gap between entries. I'd never be good with a diary

Today I discovered what seems to be an undocumented bug in Firefox—where they are rare they standout. In the case of Firefox, there are a number of unexpected "permission denied...." errors thrown.

If the file name is not specified in the URL that loads a page in a frame, the new page will not be able to access the parent frame (window) or other frames in the frame set

Many of the pages on this site are of the type index.shtml, which load by default when the URL only has the directory. So a relative URL like ../journal would load www.mysite.com/site/journal/index.shtml.

But, if the former is used, then code like if (top.name == "winName")... on the new page will throw a "permission denied..." error. While using the later full URL doesn't throw the error.