Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Fer

Scaling images in IE7/8

Recommended Posts

Hi,

 

I'm having troubles when resizing images inside a div on IE7/8, working fine on other browsers.

 

I've got a wrapper div with a background and containing several images, you can zoom the wrapper and all the images inside will scale accordingly. Well, this zoom effect when in IE7/8 is not working properly, when I zoom the wrapper the content is not scaling (always 100%) but the background is zooming in and out correctly.

 

This is the structure:

 

<div id="wrapper"> 

   <a href="">image1</div>

   <a href="">image2</div>

   <a href="">image3</div>

...

</div>

 

 

Thanks in advance.

 

post-10229-0-82502900-1372617815_thumb.png

post-10229-0-60329700-1372617818_thumb.png

Link to comment
Share on other sites

Rodrigo,

 

yep, I've read that post before posting, the initial css  wrapper size is the "natural size" and position is set to absolute.

 

Nothing changed.

Link to comment
Share on other sites

Hi Fer,

 

Sorry to hear that the problem remains.

 

As you might have notice IE8 is a tremendous thorn in the side in terms of animating. One possible solution is adding filter:inherit in the CSS of the child elements, in this case the images, like this:

/*THIS IS THE MAIN CONTAINER*/
.wrapper{
    /*styles*/
}
/*THIS ARE THE IMAGES THAT RESIDE INSIDE THE CONTAINER*/
.wrapper img{
    /*styles*/
    filter:inherit;
}

Carl created a great sample of this, you can see it here:

http://jsfiddle.net/geekambassador/QGJ6c/

 

And more info regarding this issues in the following posts:

http://forums.greensock.com/topic/6934-animation-in-ie8/

 

Also you could try exploring another choices in order to animate the content, try using modernizr or another feature detection tool in order to create a fallback code for this particular browser, that represents a very small percentage of the visitors.

 

Cheers,

Rodrigo.

Link to comment
Share on other sites

Hey Rodrigo,

 

thanks for the tip.

 

I changed the images holders from <a href=""> to <div> and its working now over IE7, not IE8. I'm considering seriously deactivating zoom stuff when IE8.

Link to comment
Share on other sites

  • 3 months later...

Hi Donna,

 

Not really sure what your image processing tool is or how it works. Tought to make a recommendation. It would help to see an example of the problem.

Link to comment
Share on other sites

oh regarding your changing the images holders from an anchor tag to a div.. making it to work in iE7.. that is because an anchor tag has its display property set to display:inline.. a div tags display property is set to display:block.. so if you needed to put back your anchor tags you can just add the display:block to that image holder css

 

also have you tried setting your images css to this

#wrapper a img {
     max-width:100%
     height:auto;
}

if your using css background-image instead of an actual image tag than try those styles on that element you have the background-image or background shorthand property on

  • also when you are viewing this in IE8 .. what is the Document Mode and Browser Mode set to?

if you press F12 in IE the inspector will come up and you can let us know the Document Mode and Browser Mode

 

if you are viewing in iE8 .. make sure that the Browser Mode is IE8 and the Document Mode is IE8 Standards

  • is this IE8 standalone or is it IE9 or IE10 rendering the different Browser mode?
     
  • also what is the OS you are using Windows version ? .. or a iOS version??

an example of your code either a codepen or jsfiddle example will help alot :)

  • Like 1
Link to comment
Share on other sites

Hi Donna,

 

Not really sure what your image processing tool is or how it works. Tought to make a recommendation. It would help to see an example of the problem.

The problem disappeared .Thanks a lot.I installed a new image processing tool.Thanks for your help.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×