homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Hardware and OS Related Technologies / Smartphone, Wireless, and Mobile Technologies
Forum Library, Charter, Moderators: bakedjake

Smartphone, Wireless, and Mobile Technologies Forum

Android: Heading overlapping floated content when enlarged
Android CSS support

 8:28 pm on Dec 29, 2011 (gmt 0)

(Does this belong in the CSS forum?)

Simplified: a heading over two floated divs works fine in both orientations, but when zoomed it overlaps the text of the floated divs. Ideas?

Details: On the Android with this user agent

Mozilla/5.0 (Linux; U; Android 2.2.2; en-us; SCH-M828C[5414507677] Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

... and "auto fit pages" set, which I believe is the default, this page works fine in both landscape and portrait orientations, but when user-scaled (zoomed) the heading overlaps the floated content. I looked at supported selectors, they mostly cover what selectors are supported, not the rules themselves. Is "clear:both" not supported?

When enlarged it should push the floated div's down with the clearing div. But it doesn't. :-)

The simple XHTML (using strict XHTML doctype: )

<div id="content-outer">
<div id="content-inner">
<h1>Main Title</h1>
<div class="clear-div"></div>
<div class="locations-half">
<ul id="location-address">
<li>city, state, zip</li>
<div class="locations-half">
<h3>Hours of Operation</h3>
<ul id="location-hours">
<li><strong>M-F:</strong>8 a.m. - 9 p.m.</li>
<li><strong>Saturday:</strong>9 a.m. - 7 p.m.</li>
<li><strong>Sunday:</strong>10 a.m. - 7 p.m.</li>

Relevant CSS:

.clear-div { clear: both; width: 100%; height:1px; } /* w/h added as last resort */
#content-outer { width: 100%; background:#fff; }
#content-inner { width: 87%; margin: 3% auto; padding: 3%; background:#FCF6ED; border: 1px solid #D0D0D0; }
.locations-half { width: 47%; float: left; margin-right: 2%; }
.locations-half ul, .locations-half ul,.locations-half p { float: left; } /* added as a last resort */
.locations-half li { font-size: 0.8em; list-style: none; }
#location-address,#location-hours { margin-top: 1em; }
#location-hours strong { display: inline-block; width: 5em; }



 9:24 pm on Dec 29, 2011 (gmt 0)

Solved . . . and of course, "information not provided." There is a height set on the h1 because it has an icon to the left. Remove the height, works as expected.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Hardware and OS Related Technologies / Smartphone, Wireless, and Mobile Technologies
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved