5

I have been asked to take a look at a strange issue and cant figure it out. Basically

elements would typically span full width as they are block elements, but on certain pages they don't seem to want to. I have tested this on the default ICS Android and Dolphin and it is playing up on both. This question sums up the issue, only the answer does not work: Why won't the Android browser span this paragraph over the full browser width?

UPDATE: A strange solution? If I set the following CSS p{ background:#fff; } it resolves the problem, what could cause some a strange issue. The issue is, I need the background to be transparent.

Community
  • 1
  • 1
Jucks
  • 400
  • 4
  • 10
  • This is indeed a strange issue. Can't attribute it to specificity, order of styles. In fact, background should not affect width in any way. I think you've just hit upon a strange bug and since most layouts are much more complicated, others just haven't seen it. – Fuzzical Logic Mar 23 '12 at 02:42
  • possible duplicate of [Why won't the Android browser span this paragraph over the full browser width?](http://stackoverflow.com/questions/9418333/why-wont-the-android-browser-span-this-paragraph-over-the-full-browser-width) – Jukka K. Korpela Mar 23 '12 at 04:31
  • If you think your question sums up your issue, contribute to making its answer better instead of posting a duplicate. – Jukka K. Korpela Mar 23 '12 at 04:32

8 Answers8

10

It's a hack, but my solution was setting background: url(''); on my paragraph and heading tags. I need my background to be transparent so I can't set a colour.

Oddly setting background: rgba(0,0,0,0); doesn't work either for some reason?

If you want to be safe and actually supply a valid image url you can use:

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII=);

This is a base64 100% transparent single pixel background.

I will note that this situation only started occurring for me when I set my viewport to 640 so that the mobile site would scale fine for any mobile browser.

This seems to be a bug with viewport scaling not functioning correctly from what I can tell.

user1830605
  • 129
  • 1
  • 2
  • I'd up-vote this twice if I could. I had accidently discovered that a background colour fixed the issue when I applied a colour to visually verify that the width of the div was correct, using a transparent image background then saved the day! – GreatSeaSpider Oct 22 '13 at 16:02
  • Thank you so much! `background:url('');` on my label tag really worked and made the label on android get a proper width. What a nasty bug on android! – Chris Oct 08 '14 at 12:18
  • 1
    the `url('')` one caused issues for me with grey, but I found at least two other ways: purposely malformed `background: url(data:)` works without render delay on ancient tablet and should make other browsers skip the rule and there is also `background: rgba(255,255,255,0.01)` if you are desperate – ck_ Oct 18 '14 at 10:53
4

This one is a trip alright.
I set my Android to not auto fit pages, fixed the problem.
I then set my phone to auto fit pages, added to my <p> in my css background: black; and it is fixed.
Another odd thing is that in my stylesheet, if I set p{ text-align: center}, the <p> spans all the way across like I expect, with my phone set to auto fit pages and no background setting. I also did text-align: right, works as expected. I then changed text-align: left, now it is broken again. Very, very odd issue here....

Lea Cohen
  • 7,990
  • 18
  • 73
  • 99
cookie_monster_az
  • 41
  • 2
2

This is also true for the <li> tag. Same problem. I fixed both issues by adding p, li {background: url('');} to my css stylesheet.

2

Instead of using <p>, <div> or other tags inside <td>, you can simply use <span> and will do the trick. It seems that starting with android 4, the default internet browser has some interpretation problems. I tested before on android 2 and it work just fine without any "adjustments".

Lucas
  • 21
  • 1
1

Based on this question and your previous question, there seems to be no obvious reason why it shouldn't work. However, something that happened WAY back in the day was if you didn't declare (in some unnamed browsers) specific attributes, the properties would not inherit like they were supposed to.

Because there is no reason that the <p> should render that way, AND the previous used to be a known issue, I would recommend setting the width of the <body> to 100% as it may be a case of lost inheritance.

EDIT: Alternative

Another popular solution to the previously mentioned issue was to wrap the offending elements in a <div> of class container that had the specified width. Both are typically viable solutions that significantly improve cross browser consistency.

Hope this helps, FuzzicalLogic

Fuzzical Logic
  • 12,947
  • 2
  • 30
  • 58
  • 1
    Thanks for the response, I have tried both of those solutions already, with no effect. – Jucks Mar 23 '12 at 02:35
  • I just added width:100% to the body, width:100% to the container div and width:inherit all as hard-coded style attributes in the markup, and it had no effect. Scratching my head over this one. – Jucks Mar 23 '12 at 02:44
  • How strange. I'm sorry, bub. You got me... and I think everyone else too. I'm going to toy around with it and see if I can't find a solution, but I'm an avid CSS coder and this is the oddest thing I've seen since disappearing `floats` – Fuzzical Logic Mar 23 '12 at 02:47
  • I SUPPOSE you could declare them both with `display:block` but that would be ridiculous. – Fuzzical Logic Mar 23 '12 at 02:48
  • Tried that too, could get it going with that. I even checked that it wasn't something stupid like a caching issue, and its not. I still cant get over the fact that if I add a background color to the element it works... so weird. – Jucks Mar 23 '12 at 02:56
0

I have the same issue on 2 different sites. I had to work around this by setting a transparent png background-image.

In my case the p elements had exactly the width of the device's screen width - so rotating the device changed the width of the p elements.

Even setting a fixed width with !important on the p was ignored!

Daniel Boehme
  • 1
0

This may not be the answer you need, but I found it works if you give is a CSS display:inline; property instead of the display:block; default, it will not span the whole screen any longer. I'm not completely sure if this works on Android (I don't have one), but I had a similar problem on my laptop and this fixed it.

Jchabin
  • 103
  • 3
-1

I've found a solution to this issue that actually works!! This is actually a setting in the android browser "Auto-Fit Pages". Turning that off will resolve this issue with certainty.

Mike

mcottingham
  • 1,926
  • 2
  • 18
  • 28