Jefflog

I decided to play with my CSS chops a little more and redid the template for my photo albums. It’s got a spiffy new look!

Update: I added the ability to switch between HTML and XML/XSLT rendering. For those of you with browsers that support it (Mozilla/Firefox and IE 5+ do for certain, but Safari does not), click on the rendering switching link in the lower left corner of your screen. The appearance should be the same, but doing a “View Source” will show the raw XML code for the page rather than HTML.

Eric Meyer, the great CSS guru, has come out with an equally great standards-based HTML presentation software. Consisting of some snippets of Javascript for page navigation and CSS for presentation, it turns a simple page of markup into an elegant slideshow.

Demo of the system is here. Go ahead, load up the demo, then select “View Source” from the browser to see how clean the markup is.

This system has a few advantages over PowerPoint:

• It’s HTML, so you don’t have to buy the PowerPoint software to create or view the slides. This makes it easier to share your presentation with other users.
• If you’re already familiar with HTML, it makes it even easier to create presentations.
• It can display any information you can embed in a browser. Embed hyperlinks to escape out to other webpages instead of clumsily toggling between applications halfway through your presentation.
• It doesn’t (yet) support animated transitions from slide to slide. (That’s a feature because I find animations always distract from the presentation.)

It just occurred to me that this post would make a great S5 presentation.

IE6, while good, is still far from perfect, especially when you compare it to Mozilla. There are many CSS rules IE6 gets plain wrong. Today I found a hack that allows me to hide certain rules from IE. Example: let’s say we wanted items with classname “content” to have a right-margin of 20px in IE but 10px in Mozilla. We could say:

.content {
  margin-right: 20px;
  foo: ";
  foo: "";
  margin-right: 10px;
  /*";*/
}

The first rule sets the margin-right to 20px for all browsers. However, to IE6 (and presumably IE5, and maybe other browsers), the second margin-right is interpreted as being within quotes and is not parsed. Mozilla in this case ignores the “foo” and quotes and resets the margin-right to 10px.

No word on what happens in Safari/Konqueror or Opera.

Came across a couple of very nice tools for Mozilla/Netscape which should be very useful to me as a developer.

1. The pnhtoolbar adds a handy toolbar to your screen that offers inline W3C page tests, ability to show cookies used on the current page, toggle outlining of table cells, and more. This will make me more likely to validate my pages. This weblog does not currently pass the W3C tests. 8-(
2. Livehttpheaders adds a “Headers” tab to the “View Page Info” box, letting you see what information you’re sending to the server and what meta-information the server is sending back. I used to use Rex Swain’s HTTP Viewer to be able to sniff what web server sites were running on, but this tool makes that obsolete.

Believe me, I am very excited about these tools. Too excited, really.

I recently came across this problem with a project at work. Since several of my readers are fellow learners of HTML minutiae, I wanted to pass this pitfall along.
Read the rest of this entry »