Clayton Farr wrote:
> http://www.filmtreks.com/
> * Internet Explorer 6 / PC
> - right hand side-bar (floated:right) breaks and goes below other float
> on resize of browser window
The reason for this float drop is the quirky percentages bug [1],
In short: IE6 has problems with percentages margins.
.left-margin-50p { margin-left: 50%; }
is not calculated correctly in relation to #side_content when the text
zoom is switched.
<div id="side_content">
<div id="sc2">
<div id="quotes">
<img src="interviewing.jpg" alt="photo" class="left-margin-50p
width-50p">
</div>
</div>
</div>
In IE prior to IE7, percentage margins are often calculated with respect
to the grandparent, not the parent.
#sc2 {zoom:1;} /* or width:100%*/
alternatively
#quotes{zoom:1;} /* or width:100% */
fixes it, because by giving "layout" [2] to this container, it gets the
same width information as #side_content, therefore, parent and
grandparent have the same width for IE's math (= side_content has become
the grandparent for the calculation)
The inline images show a gap, display:block should solve this.
Ingo
[1] http://positioniseverything.net/explorer/percentages.html
[2] http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.satzansatz.de/css.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
