| Android: Heading overlapping floated content when enlarged
Android CSS support |
rocknbil
msg:4402254 | 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>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; }
|
rocknbil
msg:4402265 | 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.
|
|
|
