Control Click in Textmate “Drifting back over to work” when you work from home.
Jul 13

Blackberry: No support for display: none??

Tech Add comments

I am working on an application that has a lot of Blackberry users (which meant that I had to get a Blackberry, but that is another story).

We are working on a full mobile version of the application, but we get 70% there by having CSS specific for the mobile via either:

  • Separate style sheet via media=”": <link rel=”stylesheet” href=”…/style-handheld.css” type=”text/css” media=”handheld” />
  • Within the main stylesheet: @media handheld { }

Great. Simple. We have been doing this already for print-friendly versions of the site.

Most of the work to make the site handheld friendly is just getting rid of stuff. Stuff as in navigation and extra crud. We have a lot of:

#rightbar, #xnav, .bubbles, … {
display: none;
}

Then we found out that the BB doesn’t support display. It has a pretty poor support for CSS (as seen in the dev guide).

So, there goes the simple short term solution.

Of course, we want a mobile specific site because:

  • We don’t want to force the mobile to download everything (JS etc), especially with the US download speeds ;)
  • We want a mobile specific UI (a la bbc.co.uk/mobile)

It will be fun to see if responds_to { … } will be enough (having a mobile setting). Then the same controller/actions can be used for HTML, Mobile site, and our XML representations.

10 Responses to “Blackberry: No support for display: none??”

  1. Peter Backlund Says:

    Hi,

    you could try visibility:hidden, and set width and height to zero, as the elements will still take up space.

  2. Benjamin Judson Says:

    I have a similar issue, it seems handheld devices don’t think they are handhelds (including a myriad of mobile phones, blackberry’s and Palm Treos), and render the screen media type. One fix for this with my Blackberry 7130e (as I discuss http://benjudson.com/article.php?story=20060908112254395) is using Opera Mini to render the page. It realizes it is a handheld and renders the correct media type.

    So to force the companies to get compliant buy phones with opera pre-installed or download opera mini.

  3. Michael Newton Says:

    You’re right up there in search results for “blackberry browser css support”, so I’ll take the trouble to correct the outdated link for RIM’s developer’s guide for future visitors:
    http://www.blackberry.com/btsc/search.do?cmd=displayKC&docType=kc&externalId=SWDXCDK-002002&sliceId=&dialogID=57088505&stateId=0%200%2031265160

  4. jake Says:

    I thought it was a simple code to make a website scale to specs for an iphone or blackberry,
    thats what im trying to do, but my codes not doing anything,
    I have the meta tag code
    if you could help that would be awesome thanks!

  5. James Says:

    Jake: There is no secret code to magically make your site mobile-friendly. Rather, you can develop two versions of the style sheets and then link to the stylesheets using the (versus media=”screen”) syntax mentioned above. As mentioned, the problem is that some mobile devices will grab the “screen” version of the CSS, which wastes the user’s bandwidth and makes the site look like crap on the tiny screen.

  6. James Says:

    Hmm, the HTML was chomped. It should say you use <link … media=”handheld”> (versus media=”screen”).

  7. wholesale replica handbags Says:

    thanks for your share.

  8. Hardik Says:

    Hi,

    I tried with visibility hidden and media=”handheld”. It worked fine for hiding a text content. But While trying to hide a Text box, it does not work. Is there any other solution to hide a text box ???

    your positive reply will be of great help. Thanks.

  9. nick germano Says:

    New to web design. did a site for saint paul yellow taxi. http://www.saintpaulyellowtaxi.com shows up on a blackberry just fine. doing one for http://www.gophertaxi.com and it will not show up on a his blackberry. I used the same code as yellows why does it not display?

  10. m1m1k Says:

    Both links above for “RIM’s developer’s guide”
    seem to be broken…

    so for future visitors: heres a link to CSS for blackberries

    http://docs.blackberry.com/en/developers/deliverables/11844/Feature_CSS_512751_11.jsp

Leave a Reply

Spam is a pain, I am sorry to have to do this to you, but can you answer the question below?

Q: What are the first four letters in the word British?