Previous Message
Next Message

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

Sent by Clayton Farr on 30 March 2006 22:10


Hi Ingo,

Thank you for taking the time to look over the site. Your feedback is really
helpful.

* I'll trying commenting out the 'overflow' property
* I have never heard of the 'zoom' property; I'll plug this in as well
* regarding the gap on the inline images (in #sc2) do you mean the 1px of
white space above/below or is there white space showing between the left
side and the vertical rule? (the former is intentional)

Off to the code, keeping fingers crossed.

Thanks again!
Clayton


On 3/30/06, Ingo Chao [EMAIL-REMOVED]> wrote:
>
> 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: