The issue here is not that the BrowserField does not recognise the css, it is that the BlackBerry does not find the css. It spends sometime looking for localhost as a resource, because BlackBerry devices do not recognise localhost as themselves, and in fact they don't really have an IP address, unless they are WiFi connected.
The 2 minutes delay you see is the BB device trying to find localhost.
So you need to use the "local:" 'protocol' so that the Browser knows to pick up the local files.
Here is some sample code that works for me. Try it, and then play round to get what you want:
body { color: green; }
.item {
color: blue;
background-color: red;
}
Above is my test "style-preferential.css" file.
<html>
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="/www/css/style-preferential.css">
</head>
<body id="welcome-page">
<div class="welcome-header"></div>
<div id="welcome-access-container">
<span>acceder mi cuenta</span>
</div>
<div id="owl-demo">
<div class="item">Contact1</div>
<div class="item"><span>Option 1</span></div>
<div class="item"><span>Option 2</span></div>
<div class="item"><span>Option 3</span></div>
<div class="item"><span>Option 4</span></div>
<div class="item"><span>Option 5</span></div>
</div>
<div class="banner"><img src="/img/icon.png"></div>
<div class="footer">
<div id="info-footer"><span>Lorem ipsum dolor sit amet</span></div>
</div>
</body>
</html>
The above is my cut down version of your test html.
And finally this is the change I made to your code:
contentField.displayContent(new String(html), "local:///");
My project looks like this:
and the output looks like this: