Tagged CSS

A Gran Paradiso of Second Acid Test compatibility

Acid2Firefox3Firefox 3 (Gecko 1.9) alpha 2 came out a couple of weeks back, and word on the virtual street is that all of the compatibility bugs with the Second Acid Test (aka Acid2) have been worked out. For all intents and purposes, Alpha 1 was announced as being Acid 2 compliant back in December, but apparently the development team felt that there were a couple more things to be fixed. Other than that, all the changes seem to be on the Gecko side of things, with the visual appearance of the browser being quite similar to Firefox 2.

On a side note, if you’re running IE7, take the test. Hilarious, huh?

Bonus Esoterica: A side-by-side comparison with Opera 9.10 shows that Firefox renders the test just as well, with the minor exception that scroll wheels on mice do not seem to work, although ‘clicking’ with the scroll wheel and then scrolling does work. In Opera, the scroll function works normally without the click. I definitely don’t have the knowledge to determine whether or not the lack of scrolling is a result of a problem with Firefox not interpreting the scrolling action correctly according to the CSS, or if Windows XP just sucks at life, but I’m leaning toward the latter. If anyone knows for sure, or is experiencing similar behavior in Gran Paradiso, I’d love to find out.

acid 2 test, acid browser test, css, firefox, firefox 3, firefox passes acid test, gecko, gecko 1.9, internet explorer, mozilla, opera 9.10, second acid test, web standards

WordPress blogging software administration on the Blackberry

The Blackberry: Sweet, juicy….Internet.
Blackberries

As PDAs and similar handheld devices continue to advance, it becomes more and more realistic to consider them in one’s site design, in order to reach the widest audience possible. Since I happen to have a Blackberry right now, I’ve been trying various sites in order to see what’s compatible and what fails miserably.

The usual suspects, such as Google and Gmail, performed flawlessly, as expected. The folks over at Google seem to a have a special little spot in their hearts for the mobile user, and their most popular offerings don’t disappoint in this regard.

Once I was sure that I’d maxed out my PDA’s capability to process client-side markup and scripting (you have to manually add JavaScript, Cascading Style Sheets (CSS), and XML support, otherwise you’re basically running Internet Explorer 4.0 on a teeny-tiny screen–a browsing experience that would make even the most desperate bsuite-hound run for the nearest Mennonite community), I headed over to this blog.

The front page loaded flawlessly, though it takes quite a while, and the Blackberry’s status bar indicates a laborious process of running scripts and proccessing CSS at what is, relatively, a snail’s pace. What surprised me the most was the appearance of a photo that went with one of the stories, nicely formatted and filling the screen. It’s easy to scroll through and read posts, click on related articles, and do pretty much anything else you’d want.

With the front page test complete, I tried logging in to the admin section. Navigating to /wp-admin yielded a standard userID/password dialog, and within 30 seconds, I was on the admin dashboard, free to click on any tab, change any options I wanted, and even post an article. As far as I can tell, WP works with the Blackberry, or rather, the Blackberry has no problems handling WordPress. It’s a far cry from the cell-phone internet I’m used to.

I plan to continue trying out sites to see where the Blackberry might get stuck. I’ll post if I find anything, and update this entry if I find any more significant sites or webapps that work.

UPDATE: I found a page with a really nice intro to CSS and web development on the Blackberry. Read about it here.

Editing WordPress QuickTags to automatically create captioned images

Filler Bunny: He takes up space
Filler Bunny

One of the best ways to add life to your blog posts is to include images with the text–your reader’s eye is naturally drawn to the large visual well before the text itself, and the addition of a picture can bring an element or realism to your post that would normally be missed. Many templates available on the web, however, fail to include a simple way to add captions to your images, limiting what you can do with them. For example, anyone posting a picture of, say, two dogs would be hard-pressed to indicate which was Rover and which Fido without the aid of a caption. The easiest solution is to place the image in a table with a caption, of course, but this adds several ungainly lines of code which you must type in by hand in order to add a single captioned image. Even copying and pasting, this method of posting captioned images is a serious pain at best.

Thanks to WordPressQuickTags (the row of buttons directly above the post content itself on the Write page), however, it’s relatively simple to edit the ‘img’ button to create custom captioned images.

First, replace the function edInsertImage in /wp-includes/js/quicktags.js with the following javascript:

function edInsertImage(myField) {
var myValue = prompt(‘Enter the URL of the image’, ‘http://’);
if (myValue) {
myValue = ‘<img src="’
+ myValue
+ ‘" alt="’ + prompt(‘Enter a description of the image’, ”)
+ ‘" />’;
myValue = ‘<table class="alignright" width="’
+ prompt(‘Enter the image width’, ‘250’)
+ ‘" border="’
+ prompt(‘Border size:’, ‘0’)
+ ‘" cellspacing="0" cellpadding="0">’
+ ‘<caption align="bottom"><b>’
+ prompt(‘Caption:’, ”)
+ ‘</b></caption><tr><td>’
+ myValue
+ ‘</tr></td></table>’;
edInsertContent(myField, myValue);
}
}

Now, at this point, once you’ve replaced your current quicktags.js, the ‘img’ button on the write page may or may not do what you want it to do. Chances are that you’ll have to add to your CSS as well before you can reap the benefits of the modified ‘img’ button, though. If so, place the following in your template’s CSS sheet:

table.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

table.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

That should do it. Now whenever you go to add an image with the quicktags img button, it will prompt you for all the appropriate parameters to create a nicely captioned image like the one above. Should you wish, you can add other elements to the javascript, such as the ability to choose the color of the photo’s border.

UPDATE: Make sure you refresh the ‘Write Post’ page of WordPress after you modifiy your quicktags.js file. Otherwise, the cached (unmodified) version will continue to be used.