Fix Strange Layout Bugs On Smartphones with CSS and HTML!

Amazon If you are developing a mobile website you may be crushed with frustrations due to strange bugs you found on some smartphone but not on the other smartphones. Examples include broken layout and strange aligned HTML elements.

Read on to see a few such quirks and bugs and how to fix them with CSS styling and HTML tag attributes.

Bug #1
On Sharp 530U model I found a bug where a div element's width has some maximum value like 600px. If I set it to lower than that the layout does not break, but when I set the width to higher the layout breaks.

If this situation happens to you the div element may need any or all of the following CSS styles.

display: block;
background: #ffffff; /* by the way 'background: inherit;' does not work */
text-align: center;
Why would a background color or text alignment affect the HTML's elements' layout? I have no idea. I drilled down in the CSS and figured out the fixes myself.

Sharp 530U is not a common model; so you may not need to concern yourself with it.
Bug #2
My website, http://www.ChToEn.com/, has a text field in a form and one day I realized I could not type anything in it on my friend's Motorola smartphone which has Android 2.3 on it.

I figured out that this bug is due to the maximum length of the text input field being too small. It needs to be 25 or above.

<input maxlength='25'>
These bugs do not exist for any mainstream smartphones such as iPhone, HTC smartphones or Samsung smartphones. Go figure.

Questions? Let me know!