I am designing a website and testing it on my LG VX8360 cell phone running Openwave Mobile Browser 6.2.3.2. Many things didn't look right on my site, and I noticed that the browser is not properly handling CSS child selectors or descendant selectors. I made a page like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Mobile test</title>
<style type="text/css">
div div {
background: yellow}
</style>
</head>
<body>
<div>test 1 - this div should have no background</div>
<br>
<div><div>test2 - this div should have a yellow background</div></div>
</body></html>
I would only expect the 2nd div to have a yellow background, but on my phone, both divs were yellow. What can I do about this? Does anyone know of some kind of workaround? I looked on Google and was unable to find anything useful.
EDIT: I would like to add that I am serving the page with a "Cache-Control: no-transform" header, so I doubt that anything is getting changed around by a proxy or transcoder.
I did some of the tests suggested by Felipe. I see the same thing, regardless of whether I have the semicolon after the declaration. I tried getting rid of the style element and putting the yellow background in a style attribute in the inner test 2 div and everything worked as expected. I tried adding "div {background: red;}" and both divs were still yellow. I switched around the test 1 and test 2 divs and both were still yellow.
Also, I tried accessing this code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Mobile test</title>
<style type="text/css">
div {
background: red;}
.foo div {
background: yellow;}
</style>
</head>
<body>
<div>test 1 - this div should be red.</div>
<br>
<div class="foo"><div>test 2 - this div should be yellow.</div></div>
</body></html>
and both divs were red. I did something similar with an id instead of a class and both divs were red.
I then tried putting the class on the inner div and selecting it with a selector of "div.foo" or just ".foo" and it worked fine, presumably because that does not involve child or descendant selectors. Same thing if I use ids instead.
I tried setting the charset to ISO-8859-1 and everything happened the same so I think that has nothing to do with the problem. I removed the meta tag and everything was still the same.
I tried putting the CSS in an external file. When I include it using a link element, I see the same results as before. If I try to include it using @import, I don't see any styles. My phone appears unable to access CSS files referenced using @import.
Needless to say, this is driving me crazy. The more tests I do, the stranger the situation seems to get. What can I do about it?
EDIT 2: Of course I can buy a new phone, but I am trying to make a site that works on any sort of internet-enabled device.
EDIT 3: I looked at this guide to mobile CSS compatibility and was unable to find anything regarding my browser. I am about to check out the blog posts.
EDIT 4: I am unable to find any sort of comprehensive, objective information about what sort of CSS features this browser does or doesn't support, and how to work around problems. If this was an obscure, outdated, unpopular browser, I would just forget about this issue. However, I walked into a Verizon store a few days ago to test my site on some of their phones,and I found quite a few brand new phones that appeared to have the same version of this browser, with its bugs.