I have a widget with three tabs, each of which are simple links to three different sections/pages in my widget. They're not separate pages, but each link loads a different content dynamically into a container DIV. I'm having trouble trying to make the container DIV have a border width of 1px.
Just a simple DIV with the following CSS either randomly displays 2px borders or a 2px top border while the other borders stay 1px thin. Also other block elements and table cells behave this way.
There's absolutely no place in my code where I've used anything that's 2px thick.
I've also tried 'thin solid #fff' and thought for a while that it worked, but when I click a button in my widget the border transforms to 2px wide.
border: 1px solid #fff;
Also, when starting the widget in the emulator everything seems OK, but after visiting other tabs and then coming back some of the elements have inherited a 2px border from somewhere. If I do it again, they might suddenly be 1px thin again.
Sometimes removing the border from an element that's inside another element makes the outer element's borders 1px thin - except sometimes the top border stays 2px thick.
All this fails to work at all in the actual phone, where almost every 1px border has transformed to 2px thick.
A lot of heights and widths are given in percentages in my style.css.
Font sizes are given in 'em'.
Other than that, that's it. I'm really confused. It's like all other border widths greater than 1px work. And it's not like my code is terribly complicated or anything, and I have a quite solid experience in web developement.
Any of you experienced anything like this? What am I missing?