Neatly Sliced

Otherwise titled, "Multiple background images + the bane that is IE6". This explanation is in reference to my July 2007 CSS Off code.

In coding the design for the Early Bird h1 overlay, I implemented two overlapping background images: the pretty bird, and a horizontal grey bar.

Whether I ought to have made it a CSS background-image or an HTML img is irrelevant at this point, as I found an annoying IE6 bug regarding multiple seemingly unrelated CSS background-images.

The bird background-image was hidden by the horizontal top bar. To resolve this, I used IE6 filters to hide the HTML img and display CSS background-image for modern browsers, but to display the HTML img in the case of IE6.

Why does IE6 present the background-image overlap issue? The Early Bird h1 required position:relative. Why? Because IE6 hates me with the fire of a thousand suns. If you discover a better reason, kindly let me know, as I find this animosity between IE6 and myself most unsettling.

Really, semantically, we should not be using a background-image if there was meaning associated with the image. I was torn in this case, as it really is subjective whether the item necessitates semantic meaning or not. The method I implemented in my example really displays how both methods can work: HTML img with the IE6 code, and background-image with modern browsers.

In conclusion: if your background-images are improperly overlapping in IE6, try adding a position declaration on the hidden element.

In search of the best Sudoku widget for Tiger OS 10.4, I stumbled across Handpicked Software's article on Playing Sudoku on Your Mac.

The article and I both agree that Sudoku Widget by bdb's world of fun is the best Sudoku widget for the Mac. Version 1.5 - formerly 2.0 Beta - features 4 difficulty levels, a timer, high scores, pencil markings for notes, and a "solve" feature in case you're stuck.

Other Sudoku widgets may offer different features, but this week's highlighted widget offers the best dashboard Sudoku-ing experience. The Sudoku iPod game offered by Apple's iTunes Music Store, which is one of the best implementations of a sudoku application that I have seen, highly mimics this widget. For a full-fledged application to mimic the functionality of a widget definitely adds merit to the widget. This dashboard sudoku will not bring you the frustration that many other present.

Additionally, version 1.5 features a pretty whale in the corner, yay, green earth.

Often I'll see a design with the list copy font the same color, typeface, and size as the normal body font. The design will highlight the items of this list by colorizing the bullet of each list-item. Using some creative HTML and CSS, this is possible with only a few lines of CSS.

• List Item 1
• List Item 2
• List Item 3
• List Item 4

The bullet follows the color of the list item (li), but unfortunately so does the text contained by the li. We get around this by wrapping the text in spans and setting the font color on the span. We get our desired effect without using a list-style-image and with minimal HTML markup additions.

If you find a better way, do share for the betterment of code.

Is it dinner-time? Having trouble deciding where you should eat? No Problem! Dine-O-Matic (by The Iconfactory) will decide for you.

Add restaurant name and type (Pizza, Deli, Mexican, etc.) on the info view of the widget.

Once your datasource is set up, click the plate to cycle through and have Dine-O-Matic choose your place of dining. Great for indecisive folk who still like to go out.

If you would like to share your Dine-O-Matic library between multiple users:

1. After installing the widget, Cut the Dine-O-Matic.wdgt file from ~\Users\YOUR USER NAME\Library\Widgets (where ~ signifies your root directory, which is the Hard Drive icon on your Desktop)
2. Paste it in ~\Library\Widgets
3. Add an instance of Dine-O-Matic to your Dashboard (Go to Dashboard, Click the Plus to view all installed widgets, and drag Dine-O-Matic to your Dashboard)
4. Enter your restaurants just this one time
5. Copy your preferences file (located ~\Users\YOUR USER NAME\Library\Preferences\widget-com.iconfactory.dine-o-matic.plist) into the corresponding directories for the other users
6. Now all the users on your machine will have the same restaurants. If you make a change to the restaurant list, repeat the step 5

NeatlySliced.com has been down for a couple of days. We switched hosts, and there was some rigmarole and miscommunications regarding the DNS, which led to massive problems with my site and CrankyBit.com.

My NeatlySliced.com email is still having problems, but otherwise everything is working as expected (hopefully!).

With this change in host, I have also made some changes to the blog. She is now upgraded to 2.1.3 (which is still old, but far better than the 2.0.* version I was running). With that, I have installed some plugins that my blog will now support.

From a user interface standpoint, the Archives have moved to their own page and I am utilizing the Clean Archives plugin first engineered by Shawn Grimes but now developed by Sean of Geek With Laptop.

From a Web 2.0 standpoint, you may now subscribe to email notifications of comments on a particular post. I don't have a high comment frequency on this site, but regardless, you may find it of interest. To accomplish this I implement the Subscribe to Comments plugin.

Earlier this week NeatlySliced.com was transferred to a new host. Before the DNS switched, I wanted to test the new site. The new host uses virtual hosting, which means that I have to change the hidden /etc/hosts OS X file to assign the IP to blog.neatlysliced.com.

Okay, so going to Go > Go To Folder from the finder to access the hidden /etc folder can get pretty redundant. Fortunately, there is a widget that allows editing of your /etc/hosts file with quite a number fewer keystrokes. It does require usage of your admin password, but you can easily delete the password after performing your business.

Download HostsWidget. It is freeware.

July's CSS Off! design presented quite a few more challenges than June's entry.

View my Early Bird WormSearch entry. (Yes, I know one of the headings is black. I would blame it on color-blindness, but it's a lie. It was just an oversight - I genuinely did not see it until posting today. Arg, I thought I had a fighting chance this time.)

For now, I am going to explain the semantics importance of utilizing HTML images versus CSS background-image.

Example 1:
Certain related worms feature a marker tag labeled "related" to the left of each related worm, as pictured here. Non-related worms lack such a marker tag. I initially coded this marker tag addition as a background image of a div.
View my initial markup of a normal bug versus related bug:

Note that the only thing really differentiating the two is the additional class "related" on the div. Initially, I applied a background image of the related marker on the .related.bug div. Now, suppose a user has CSS disabled: what meaning will they receive? For CSS disabled browsers, related bugs will be indistinguishable from normal bugs. This is terrible for accessibility - no bugs are related and an entire section of your site (and your effort coding) will now be overlooked.

I thus altered my copy to include an HTML image of the related marker, as follows:

This way, a browser with CSS disabled can still view the semantic meaning of the related bug. The markup for the image can be dished out on the server side when the page is requested.

Be friendly to people with different browsers - they may account for a greater percentage of your client base than you may realize!

Related articles to follow:

• Multiple background images and the bane that is IE6
• Selective 100% width divs
• Nested unordered lists for horizontal block navigation (a la google horizontal ads)
• Vertically growing accessible sections
• Sectioned heading text that is both flush left and flush right