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):
Android (Incorrect; not fully spreading; added more text than iOS version so you can see what I'm talking about):
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With