Zev Broke It

So far this blog is an overflow for my Twitter bits.

rel="apple-touch-icon" No Longer Validates

Using the new doctype, <!DOCTYPE HTML>, the large-icon format and former best-practice rel="apple-touch-icon" no longer validates.

I searched the HTML5 spec for a recommendation and it appears you can call, rel="icon" and declare the sizes property. Fine, then.

My limited testing so far indicates that the last icon link called is the one that's used. Not good.

<link rel="shortcut icon" href="favicon.ico" sizes="16x16" type="image/x-icon" />
<link rel="icon" href="apple-touch-icon.png" sizes="165x165" type="image/png" />

I tested in XP/FX4 and XP/Chrome(stable) and also the default Android web browser (Froyo) so far. They all ignore the favicon.

<link rel="icon" href="apple-touch-icon.png" sizes="165x165" type="image/png" />
<link rel="shortcut icon" href="favicon.ico" sizes="16x16" type="image/x-icon" />

Reversing the order works for the favicon but shows no special treatment for the apple-touch-icon on Android. Which I'm not sure worked so well, anyway.

I'm still in the initial stages of testing and looking for the new "best practice" for browser icons on a website. If this interests you or you have experience with this problem, please reach out. Thanks!

Nubs Problem

I have a problem with my CSS "nubs" (a.k.a. balloon arrows, triangles, slants). I've been using this technique and this has been working fine until my recent upgrade to Firefox 4 (and now 5).

Firefox 4 & 5 renders borders between my borders. This happens when one side is a light color and the neighboring side is transparent.

I haven't figured out how to insert an empty DIV with custom CSS in Posterous, so please see the demo at http://zrgmedia.com/transparent_border_test.html .

 

Transparent_borders_screenshot_ff41

Firefox 4,5 (XP) screenshot

 

Transparent_borders_screenshot_chrome1
Screenshot from everywhere else in XP: Chrome, IE, Safari, Opera, FF<4.

 

UPDATE:

Jon Rrohan, author of this technique, found no problem in Mac FF4 (screenshot here: http://cl.ly/5STC) and I've found no problem in Windows 7 FF4, either. It appears to be only Firefox 4 on Windows XP.