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 23:11


Thanks to some quick feedback I've made these changes in an effort to become
better friends with IE:

* 'overflow:hidden' commented out from IE5/Mac (within 'base.css') - to try
and address missing banner image
* added 'zoom:1' (on #quotes div within 'iewin.css') to try and give
'layout' to sidebar which was being pushed down below other float

How do I look now ;-)

Some good accessbility / link issues were also pointed out that I should be
able to address shortly.

Thanks again for the help!
Clayton


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