Wednesday, May 10, 2006

Updating Firefox's Live Bookmarks

If you're creating a new XML feed for your web site (which I'll explain in the new edition of my HTML book), you'll want to check that the new feed is working properly. You can go to the site in Firefox, click the orange RSS icon

Sites with an XML feed sport an orange RSS icon

to add the feed to your bookmarks toolbar:

Add the live bookmark to our Bookmarks Toolbar folder

Then test the Live Bookmark by choosing it from the Bookmarks Toolbar:

Test the Live Bookmark by choosing it

OK, so far so good. But once you change the XML feed, how do you get Firefox to update the bookmark? I found a rather complicated way to change Firefox's refresh rate, through the about:config page (and the "browser.bookmarks.livemark_refresh_seconds" preference, but it didn't seem to work very well.

The easiest way was hidden in the contextual menu: right-click the live bookmark and then choose Reload Live Bookmark

ReloadLiveBookmark

I'm the kind of person who forgets this as soon as I don't need it anymore (like when I've finished updating the XML feed). I post this here in the hope that I'll be able to quickly find this information the next time I am testing my XML feed... or for the next time you are testing your XML feed.

(Another option for updating live bookmarks is to quit Firefox and restart.)

Wednesday, May 03, 2006

Add Flickr photos to web pages

When you go to see your Flickr photos, the address is up in the Address bar as usual. This address won't work as the source for an img tag, however. Instead, select the photo, and then click the All Sizes button up above the image.

allsizes button

Then choose the size you'd like to have appear on your web page. It will appear in the new window. Below the image you'll find the URL of the image itself as well as a premade chunk of HTML code for the image linked to its home on Flickr.

flickr html code

I dunno, maybe this is obvious, but I couldn't remember where it was and it took me a few minutes to find it again.

Monday, May 01, 2006

Pixels, Font Size, and Internet Explorer

I've been fussing with Internet Explorer* 7 beta and trying to figure out why it matters that IE won't resize pixel-sized elements and how this affects using relative font sizing in CSS.

Let's recap. If you set a relative font size, it has to be relative to something. Indeed, a font size set in ems or percentages is calculated with respect to the element's parent. So, a p element set to 100% would be 100% of its parent, which is usually the body.

What is the size of the body? If none has been set, the browser uses its default--usually 16 pixels (though Firefox lets users adjust this value). If a relative size has been set, it is calculated with respect to this default and then this number is used to find the size of the p and any other descendants.

The tricky part comes when visitors use the Text Size option (called Text Increase in Firefox). What an average visitor might expect, and what happens in Firefox and others, is that when they choose a new Text Size, the size of all the text in the Web page changes in proportion to their original sizes.

But in Internet Explorer, the Text Size option seems to affect only the default size of the body element, and any other elements that are relative to the body. Any element whose font size is set to a fixed size (e.g., in pixels) is not changed when a visitor chooses a new setting for Text Size. This kind of makes sense. If the designer sets a pixel size for an element, why should changing the default size of the body have any effect on it?

But there's one very weird thing. If you set a pixel size for the body, thinking that you can then have control over all the elements contained in that body, for some reason Internet Explorer decides that header elements are not children of the body element and do not inherit its size. This has a further consequence: when the visitor uses the Text Size option, the headers grow and shrink but other elements, like p (rightly treated as children of body), do not.

No matter that h1 and p are both children of body.

One more point. If you decide to set a pixel size for the body and then give the header elements a relative size, all of a sudden Internet Explorer recognizes the parent-child relationship between the body and the header and immediately applies the calculation (and stops affecting headers with the Text Size option).

It's just not quite right.

The solution is probably to continue to follow Owen Briggs' proposal to use both percentages and ems to size text.

(*Note, Internet Explorer's unwillingness to resize pixel-specified font sizes is not peculiar to version 7. Earlier versions have the same characteristic.)

My Books