Reading through this forum, I have seen a lot of people have had problems getting CSS working with the embedded browser. Given that I struggled with these issues myself over the last week, I thought that I would share what I have learned.
- The embedded browser uses a different and more primitive source code base than
the external browser. Because of this, html pages may display differently between
the two browsers. See the following forum message for details on browser differences:
- It seems that CSS does not work at all for embedded browsers running on the
simulator. More exactly, it did not work for me for OS versions 4.2.1, 4.3, and 4.7
of the simulator. This includes external CSS, inline CSS, and style tags.
CSS does work for embedded browsers on the phone, so it is just a simulator issue.
- CSS does not seem to be supported for version 4.2.1 of the embedded browser.
External CSS, inline CSS and style tags do not work. Even the most basic of
CSS tags, such as 'color', do not work. Simple CSS does work for version 4.5.0
of the embedded browser.
- For OS 4.6 or later, there is a hidden option that you can use to force the embedded
browser to use the newer browser code used by the external browser:
RenderingOptions.CORE_OPTIONS_GUID, 17000, true);
This option is not officially supported so use at your own risk. I did find that the
4.7 embedded browser acted oddly with this option on the simulator. I can't tell
you how well it works on a real device since I don't have access to one.
However, some open-source projects, such as phonegap, swear by it.
All my testing was done using code based upon the sample BrowserField code provided by BlackBerry. I did set the ENABLE_CSS option. My test html pages were XHTML-MP pages designed specifically to render well on mobile devices, so I do not think my issues were due to esoteric html or CSS. The pages display fine using the standalone browser on OS 4.2, and using the embedded browser on a real phone using OS 4.5.0.