<p> style incorrect unless background color applied

Question

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.

Bangle

Don't use <p> for that, use <span> or <div> instead. <p> is for paragraphs and Android's built in browser takes over the width of paragraphs for easy reading. – Pennington

Answer 1

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.

Bangle

After some researching and testing I have also found this solution to be the best "fix" for now, ugly as it is. – Norsworthy

I also have searched the internet high and low and found no other reliable solution that did not involve waaaaay too much coding. This seems to be the least brittle solution, so thanks! – Determinism

Answer 2

It is the intended behavior of Android phones. It will enhance the readability of copy text, since you are not forced to scroll sideways if you pinch zoom the page.

It can be managed on your own phone maybe in the browser's settings, but that is not the solution you want.

It can be 'fixed' by the workaround of applying a background-image to the element you want.

This can be done with a base64 encoded data url:

background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);

Refection

Answer 3

In your mobile browser's settings, look for something called "Auto Fit Pages" and disable it. This setting (in Android) is ON by default. Turn it off and your text will flow as it should.

Recondition

I don't think asking every visitor to a site to adjust their browser's settings is a feasible solution. – Bangle

Answer 4

the div or any element above this

could be the issue.

if you give fixed width to the p element, does it work well ?

Ulcerous

I need the layout to be liquid, so I can't work with fixed widths. – Bangle