Previous Message
Next Message

mixed-up on how to address layout and image issues in IE (PC / Mac)

Sent by Ingo Chao on 30 March 2006 20:08


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-REMOVED]]
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/
Previous Message
Next Message

Message thread: