Welcome to WebmasterWorld Guest from 54.204.92.234

Forum Moderators: bakedjake

Android: Heading overlapping floated content when enlarged

Android CSS support

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

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



(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>address</li>
<li>city, state, zip</li>
<li><strong>phone</strong></li>
</ul>
</div>
<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>
</ul>
</div>
</div>
</div>

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)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month