When zooming in/out in IE7 (using 'ctrl' and mouse scroll wheel), my inline list (which makes up a progress bar) starts to fall apart. When excluding the following line (just one of the gradients being used, as well as rounded corners):

-pie-background: linear-gradient(#FFFFFF, #C2E2F7);

The background returns to its natural position, with this line included, the background moves out of position when zooming in/out. Please see screen shots for examples.

IE8 and FF work.

Any ideas would be greatly appreciated.

Many thanks,
Jonathan

I had a very similar problem with zooming in IE7. The way I fixed it was wrapping the objects in a span or a div that set the position to relative.

Hard to correctly diagnose exactly what is going one with just a picture, but what I did may work, or at the very least, help you.

~

Anathema, thank you, do you think I should set my <li>'s to relative positions then?

basically the markup is:



I'll give it a go!

EDIT:

Tried the following CSS which didn't work...



Inline stack is allowing it to float properly and <li>'s sit next to each other in all browsers without problems so I'm reluctant to remove that,

Do you think you could post or send me an example that replicates the problem you are having? Perhaps chop out the code from your site. Helps when there is an example to go on and something to mess with

Jon,

In a thread I started up, there was talk about fixing the zoom issue with a heartbeat function Jason implemented.

Though he doesn't like it, as he shouldn't , I am curious if it would fix your problem.

In the uncompressed htc file, make the changes I made and let me know if it works.

Here is the topic: viewtopic.php?p=948#p948

Hope it helps!
~