My friend, Dan, who for some reason is incapable of inviting me to lunch (though that has nothing to do with this particular story), recently got a T-Mobile Sidekick.

The Sidekick is an OEM version of Danger’s hiptop communicator, a funky PDA/phone combo with a full QWERTY keyboard. (It’s also available in Canada as the Fido hiptop.)

Soon after he got it, he called to tell me that when he viewed the Tiny Pineapple web site with the Sidekick’s web browser it was all messed up.

“Well, if by ‘all messed up’ you mean that it looks kind of plain, it’s designed that way. I hide the CSS stylesheet from brain-dead browsers, so what you’re seeing is the bare-bones HTML.”

“No,” he countered. “It’s not that. Everything in the first column is squished and the second column runs completely off the side of the screen. The same thing’s happening on my site, too.”

Well, so much for relying entirely on the @import restriction hack to hide CSS stylesheets from brain-dead browsers. It seems the Danger’s browser is smart enough to understand the @import directive, but not smart enough to know how dumb it is at handling layouts with fixed-width columns.

There was a bit of discussion about this problem back in October when the Sidekick was first introduced (Messrs. Dash and Lepera provided some good insights at the time), but there still doesn’t seem to be a decent, standards-based solution to the problem.

So, as painful as it is, I’ve had to resort to sniffing for the User Agent string so
Dan
can
view
the
site
without
it
looking
like
this
.

Just in case anyone’s interested, here’s the snippet of PHP code I’m using to hide the stylesheet from hiptop devices:

<?php if (strpos($_SERVER['HTTP_USER_AGENT'],’hiptop’) === false) { ?>
  <style type=”text/css” media=”all”>
    @import url(/style/tinypineapple.css);
  </style>
<?php } ?>