Forums
View unanswered posts | View active topics It is currently Tue Sep 30, 2014 10:02 pm



Reply to topic  [ 5 posts ] 
 IE7 Zoom breaking my CSS3 PIE Gradient 
Author Message

Joined: Mon Aug 16, 2010 2:27 am
Posts: 4
Post IE7 Zoom breaking my CSS3 PIE Gradient
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

Attachment:
File comment: Normal
normal.jpg [55.79 KiB]
Downloaded 625 times

Attachment:
File comment: Partially Zoomed
zoomed.jpg [56.71 KiB]
Downloaded 625 times


Mon Nov 08, 2010 9:35 am
Profile

Joined: Tue Oct 19, 2010 10:40 am
Posts: 40
Post Re: IE7 Zoom breaking my CSS3 PIE Gradient
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.

~


Mon Nov 08, 2010 9:44 am
Profile

Joined: Mon Aug 16, 2010 2:27 am
Posts: 4
Post Re: IE7 Zoom breaking my CSS3 PIE Gradient
Anathema, thank you, do you think I should set my <li>'s to relative positions then?

basically the markup is:

Code:
<ol id="progressBar">
<li></li>
<li></li>...
</ol>


I'll give it a go! :)

EDIT:

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

Code:
#progressBar li {
   display: -moz-inline-stack;
   display: inline-block;
   zoom: 1;
   *display: inline;
   position: relative;
}


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,


Mon Nov 08, 2010 10:50 am
Profile

Joined: Tue Oct 19, 2010 10:40 am
Posts: 40
Post Re: IE7 Zoom breaking my CSS3 PIE Gradient
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 :D


Mon Nov 08, 2010 11:30 am
Profile

Joined: Tue Oct 19, 2010 10:40 am
Posts: 40
Post Re: IE7 Zoom breaking my CSS3 PIE Gradient
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 :D, 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!
~


Wed Nov 10, 2010 3:17 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 5 posts ] 

Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.