Welcome to WebmasterWorld Guest from 54.227.72.69

Forum Moderators: bakedjake

Message Too Old, No Replies

Android: Heading overlapping floated content when enlarged

Android CSS support

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

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 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>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)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members