Search code examples
androidcssandroid-emulatorandroid-browser

<p> style incorrect unless background color applied

I am developing a mobile site, so I'm using CSS to make things as liquid as possible.

I'm having an odd difficulty. Within a div container, I have a <p> that is supposed to fill the width of the div. I've tried width:auto, width:100%...nothing seems to work on Android Browser. Here are examples:

iOS (Correct):

Correct orientation

Android (Incorrect; not fully spreading; added more text than iOS version so you can see what I'm talking about):

enter image description here

Both screenshots taken from respective emulators.

Here is the odd thing, though... If I give the class applied to these <p>'s a background color, the Android browser then allows the <p> to fill the full width of its parent div (looks identical to iOS). The really odd part, though, is that if I make the background color transparent (I thought I had it tricked lol), then it goes back to doing as shown in the example.

So, I have a <p> only properly referencing its CSS if it has a background-color applied... am I stupidly overlooking something, or is this some issue with Android Browser? Any ideas how to fix it?

Thanks for your time.

Solution

  • While it may not be the best solution, I finally just made an "invisible" transparent png and set it as the <p>'s background, and that fixed the issue... if you can call it fixing. :) I have to assume it is some kind of error in Android's Browser, as I tried this in every browser, desktop and mobile.