I’m sure this is basic web developer stuff, but I have zero web developer training. Anything I know, I’ve gleaned on my own by reading and modifying source code. Yesterday, I figured out a little (but important!) detail regarding the use of PNG image files for displaying icons on a web page. I’m jotting it down here as a reference for myself.
First- some background. A number of the smaller images floating around the site, such as the little RSS icon on the feed button in the sidebar, the comment bubble icon in the post comment link, the little green tag icon next to the list of post tags, along with several other small icons are all contained in a single PNG file called icons.png. The mystery for me was: how does the browser pull out only the icon it’s interested in from a file filled with 7 or 8 of them?
The answer lies in the CSS rules. Here’s an example:
#sidebar .button{padding:4px 8px 4px 8px;color:#fff;background-color:#666;text-decoration:none;text-transform:uppercase;font-weight:bold;}
#sidebar a.button.rss-subscribe{background:#666 url(images/icons.png) no-repeat 2px -666px;padding-left: 25px;}
Basically, the above 2 rules define a rss-subscribe button class that can be used in a sidebar HTML division (div tags). It is used for an anchor tag (the leading a. following the sidebar). Basically, these rules define a rectangular region to be placed around text using a specific background color. Within that region, an image is located using the url(images/icons.png) rule.
Now, I spent basically all day trying to divine the secret for how only the RSS icon was used from the icons.png file. I looked at the transparency layers in the PNG file; I looked for metadata that allowed for indexing into the PNG file; I looked for special layers; basically, anything I could think of that would explain how only that RSS icon was pictured, instead of every blessed icon contained in that file.
Causing me more frustration was the fact that the above example code worked like expected, but the following additional rule did not:
#sidebar a.button.home{background:#666 url(images/home.png) no-repeat 2px -666px;padding-left: 25px;}
For those curious about how I was able to get the above rule to work in the first place, I cobbled it together from a known-working portion of CSS code.
The above rule is basically identical to the rss-subscribe rule, except for the PNG file specified. I was careful to make sure that the PNG file existed in the correct location on the server, so I knew it wasn’t a file access issue. So surely the problem is with the PNG file and not the rule, right? Even more flummoxing was that, if I changed the PNG file to the icons.png file, the RSS icon popped right up. When I changed it back to home.png and no image appears in the button.
Finally, after having tried all manners of regenerating the PNG file, I was just staring at the CSS rule when I attained enlightenment. In the rule, I finally took note of the number immediately preceding the padding-left text. Turns out that number is the key, literally. That number represents an offset into the PNG file specifying where the icon is. I quickly verified this by noting that particular number was different for all the other invocations of the icons.png file in the CSS code where the different icons were being used.
Finally, with a firm theory in place, I changed my new CSS rule to the following:
#sidebar a.button.home{background:#666 url(images/home.png) no-repeat 2px;padding-left: 25px;}
I eliminated the offset specification. And then my image finally appeared as desired in the button.