Kroll Design
Needham, Massachusetts


Web Development

« Return

Here are some challenges and solutions for some of my client's web sites:
Client: DIVERSANT. A page that should look like this:

Looked fine in all browsers except IE 9. In IE 9 some of the text was not visible:

This is a bug in IE9, that sometimes places text behind the background image. Normally, browsers are competent at placing text in front of the background, but if you Google IE9 z-index bug you'll see that problems have been reported by others as well. So, to workaround this bug in IE9, I gave the div and paragraph tag for this text a z-index of 1000, to force it into a higher layer than the background image.
Client: High5 Ballooning: I received a call from the client, that none of the Flash banners were appearing. Where the banners should be, the screen is blank. I went to the site and encountered the same problem.
Cause of problem: for some reason, the hosting provider had rolled back the "js" (javascript) folder to an earlier point in time about 1 year earlier. Therefore, more recent JavaScript files were missing from this folder, such as swfobject.js and jquery-1.7.1.min.js. The swfobject.js file is need in order to display the Flash banners, so because it was missing, the Flash banners did not appear. When I uploaded the missing javascript files to the hosting plan, this immediately fixed the problem. We've encountered several other problems with the hosting of this site, and the plan is to transfer the hosting to my hosting plan on GoDaddy.
Client: High5 Ballooning. I inherited a site that contains tables and legacy code. One page had a font that was too small at the bottom of the page, but the other pages had the correct size font:
The page with the incorrect font needed the following code change for the first line in the center section body content area, to be like the other pages:
<td valign="top" bgcolor="white" width="649">
<td class="bodytext" valign="top" bgcolor="white" width="649">
If the site is at some point re-written, a template should be used, so that code for sections such as this is consistent across all pages, and only needs to be maintained in one place.
Client: High5 Ballooning. The solid white background of a table-based page was broken, with the blue background showing through:
The cause was white space after an img tag but before the end td tag. It wasn't obvious that this white space was there, because word wrap was putting the end td tag on the next line. In this illustration I turned off word wrap so that you can easily see the white space:
Client: High5 Ballooning. The alignment of an item in the bottom section was too far too the left, and not centered like I wanted. This was only happening in IE, not Firefox, Safari, or Chrome.
A photo immediately before the bottom section, that was floated right, was affecting the alignment, because the float had not been correctly cleared in the bottom section:
Back to top

©2012 Kroll Design    781.910.3694
Last modified: 10/3/2012 7:30 PM