Blackberry doesn't display website correctly...
 

Hello!

I developed a website for my own usage and finally got most of the design and content finished. From my laptop (a Macintosh), it looks fine in Firefox and Safari.

However, if I use my Blackberry, and this is true for all three browsers it can encode in (Blackberry, Firefox, Internet Explorer) (you select one of these three from the Options on the Blackberry)... there is a particular web page element unacceptably out of place.

The out of place issue applies to pages where I've intentionally added a "margin-left="some value"" so the page element becomes more center (but not centered as would be the result of <center>.

These pages are the resume page and contact, which have their own CSS pages (resumecss.css and formcss.css)

I manipulated this through the page's CSS (two, one used for each page) as the website is written in XHTML and uses CSS for design properties.

Otherwise, without the margin-left property being defined, the text for the form and the resume would go completely to the left side which looks weird below the centered headings. This occurs only for the form and resume pages as these are the only pages with margin-left defined in a unique but necessary way.

However, I do not want the text to be centered for the form or for the resume, but I do not want it to be too far off to the left either. Hence, the reason I used "margin-left" to deal with this.

The result is text that still is aligned to the left but isn't placed too far to the left of the page which is what I want.

However, as above noted, the Blackberry has issues. What happens is that the left-margin seems to push the elements too far to the right of the page (for the resume and form/contact pages). This is probably due to the fact that a Blackberry screen is smaller in size and has a different resolution than a regular computer screen, so no matter what browser option is used, the margin-left "px"'s appear pushed too much on smaller devices.

Any suggestions?

Should I go the route of having an alternate page show up for smartphones (mobile pages) and have another CSS page for those smartphones that perhaps doesn't have a margin-left value at all?

I don't know how that would work. If I did go that route, I would assume I would either need separate pages (eg. formblackberry.css and resumeblackberry.css) or define something on the current formcss.css and resumecss.css pages to make changes for smartphones (eg. (and this is obviously made up coding!): IF SMARTPHONE DETECTED, IGNORE MARGIN-LEFT PROPERTY)

Thanks for any advice!

You're going to have differences on different platforms, even with a strictly optimized mobi site.
http://detectmobilebrowsers.mobi
That's a good tool for detection, and you can redirect as needed.
From their site. Looks nice.

• iPhone - Set to true to treat iPhones as mobiles, false to treat them like full browsers or set a URL (including http://) to redirect iPhones and iPods to.
• iPad - Set to true to treat iPads as mobiles, false to treat them like full browsers or set a URL (including http://) to redirect iPads to.
• Android - Set to true to treat Android handsets as mobiles, false to treat them like full browsers or set a URL (including http://) to redirect Android and Google mobile users to.
• Opera Mini - Set to true to treat Opera Mini like a mobile, false to treat it like full browser or set a URL (including http://) to redirect Opera Mini users to.
• Blackberry - Set to true to treat Blackberry like a mobile, false to treat it like full browser or set a URL (including http://) to redirect Blackberry users to.
• Palm - Set to true to treat Palm OS like a mobile, false to treat it like full browser or set a URL (including http://) to redirect Palm OS users to.
• Windows - Set to true to treat Windows Mobiles like a mobile, false to treat it like full browser or set a URL (including http://) to redirect Windows Mobile users to.
• Mobile Redirect URL - This should be full web address (including http://) of the site (or page) you want to send mobile visitors to. Leaving this blank will make the script return true when it detects a mobile.
• Desktop Redirect URL - This should be full web address (including http://) of the site (or page) you want to send non-mobile visitors to. Leaving this blank will make the script return false when it fails to detect a mobile.

Hi,
Thanks for the information.

I decided to do something a bit different since the stylesheets are what need to be optimized at this time for certain pages.

So, on the pages that require a change for handhelds I inserted this code (copying it if there was another stylesheet that needed an alternate):

<link href="/css/STYLESHEET1.css" rel="stylesheet" type="text/css" media="handheld" />


I have a site that has for example on the contact form:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/css/main.css" />
<link rel="stylesheet" type="text/css" href="/css/form.css" />
<link rel="stylesheet" type="text/css" href="/css/links.css" />


So I added this code for handhelds and retained the other stylesheets for regular computers:

<link href="/css/mainMobile.css" rel="stylesheet" type="text/css" media="handheld" />
<link href="/css/formMobile.css" rel="stylesheet" type="text/css" media="handheld" />


-

So, the result is:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/css/main.css" />
<link rel="stylesheet" type="text/css" href="/css/form.css" />
<link rel="stylesheet" type="text/css" href="/css/links.css" />

<link href="/css/mainMobile.css" rel="stylesheet" type="text/css" media="handheld" />
<link href="/css/formMobile.css" rel="stylesheet" type="text/css" media="handheld" />


I'm assuming handhelds will look at the "handheld" code and adjust accordingly, thus I can have two versions listed on the page.

Basically, the "handhelds" version makes the footer navigation text larger as it was way too small for handhelds and also it made the form/contact page not have any left-margin.

Darn!

I just tested it on my Blackberry and the same problems show up (too small footer and margin-left is still present).

I want to be able to use the same pages but different stylesheets IF a smartphone is detected; and I thought this code was the way to do it.

Is there a code that combines the stylesheets? Meaning, if on a regular computer: "main.css" will be used; but if a handheld is detected, the alternate stylesheet: "mainMobile.css" will be used instead of "main.css"?

You have to detect the device and have it use the css you wish for it. A conditional statement might do what you need.
Something like :

<!--#if expr="(${HTTP_USER_AGENT} = /Device/)"-->
<style type="text/css">
<!--
here's where you'd include special styles for the device
-->
</style>
<!--#else -->
<style type="text/css">
<!--
regular web browser style and CSS information goes here
-->
</style>
<!--#endif -->

Good luck ;)

@aerolite

I went through the pages with the coding; but made a separate document so that when it's ready I will be able to actually apply them to the files (cut/paste).

There's a website:

http://en.wikipedia.org/wiki/List_of..._mobile_phones

It lists endless useragents for Blackberry for example. But I'm wondering if I put Blackberry, if it would work for all Blackberry devices?

I assume it would work as I have seen people simply use IE for all IE browsers or use IE6 if referencing IE version 6 specifically.

Is there a way to have multiple useragents separated by a comma in the code? So that if I wanted the same user style to be applied to more than one user agent I could? eg. iPhone, Blackberry, Android, iPod, iPad. (I got these basic user agent strings from the website I listed)

Thanks!

try using the em unit for margin-left, however a better solution would be to use position:relative and left:15% for example.