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:

> *  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 

In IE prior to IE7, percentage margins are often calculated with respect 
to the grandparent, not the parent.

#sc2 {zoom:1;} /* or width:100%*/


#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.



css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: