Forums
View unanswered posts | View active topics It is currently Wed Jul 30, 2014 9:22 pm



Reply to topic  [ 13 posts ]  Go to page 1, 2  Next
 No rounded corners on "PIEd" Divs, but flickering on hover 
Author Message

Joined: Mon Oct 25, 2010 2:36 pm
Posts: 8
Post No rounded corners on "PIEd" Divs, but flickering on hover
I have boxes styled like this:

.gradient_box{
behavior: url(/stylesheets/PIE.htc);
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
background-color:white;
padding:15px;
border: 1px solid #aaa;
overflow:hidden;
margin-bottom:15px;
}

With the htc applied, IE still doesnt show rounded corners. But when I hover over the box it shartly flickers and rounded corners shine through.
So they seem to be there, but not visible.

Could it be related to a gradient I'm applying to the box as well like so:

.gradient_box{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EDE8EE', endColorstr='white'); /* for IE */
background: -webkit-gradient(linear, 0% 0%, 30% 0%, from(#EDE8EE), to(white));
background: -moz-linear-gradient(left, #EDE8EE, white); /* for firefox 3.6+ */
}

Best Regards
Nico


Mon Oct 25, 2010 2:41 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: No rounded corners on "PIEd" Divs, but flickering on hov
Could be. Is there a reason you're using the gradient filter rather than letting PIE do it with linear-gradient?


Mon Oct 25, 2010 7:51 pm
Profile

Joined: Mon Oct 25, 2010 2:36 pm
Posts: 8
Post Re: No rounded corners on "PIEd" Divs, but flickering on hov
Ooops. Wasn't aware PIE does that as well... ;-) I'll try that!


Tue Oct 26, 2010 12:13 am
Profile

Joined: Mon Oct 25, 2010 2:36 pm
Posts: 8
Post Re: No rounded corners on "PIEd" Divs, but flickering on hov
Well, still doesn't work....

Now there is no gradient at all in IE and when I hover over the boxes the border disappears.
On one box I saw rounded corners for a second...

I wonder if i got the syntax right:

background: -webkit-gradient(linear, 0% 0%, 30% 0%, from(#EDE8EE), to(white));
background: -moz-linear-gradient(left, #EDE8EE, white); /* for firefox 3.6+ */
-pie-background: linear-gradient(left, #EDE8EE, white);

Any advice?


Tue Oct 26, 2010 12:33 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: No rounded corners on "PIEd" Divs, but flickering on hov
Disappearing backgrounds are usually a z-index issue. Read the top section on the Known Issues documentation page and see if that helps.


Tue Oct 26, 2010 11:01 am
Profile

Joined: Mon Oct 25, 2010 2:36 pm
Posts: 8
Post Re: No rounded corners on "PIEd" Divs, but flickering on hov
Hi, there is neither a z-index set on any of the boxes parents nor on the box itself.
Would adding position:relative to the target element (the box) help? Right now it doesn't have any position css.

Nico


Wed Oct 27, 2010 10:59 am
Profile

Joined: Tue Oct 19, 2010 10:40 am
Posts: 40
Post Re: No rounded corners on "PIEd" Divs, but flickering on hov
I had multiple problems with elements without relative positioning and PIE, so I would say yes.

But it wouldn't hurt to try it and see if it worked. I am a fan of the guess and check method.


Wed Oct 27, 2010 11:09 am
Profile

Joined: Mon Oct 25, 2010 2:36 pm
Posts: 8
Post Re: No rounded corners on "PIEd" Divs, but flickering on hov
Well, thanks for the answer, I will try then. It's just very much a pain to me to test anything IE related.
I am developing on a Mac, so I have to deploy to our staging server and reboot with Windows anytime I make an update.
It takes ages to test just simple things... ;-) I do have a virtual machine on my Mac OS but it only has IE6. And as IE6 can't
coexist with newer IE Versions I would have to add an additional virtual machine with those versions, but I don't have more windows licenses....
And even virtual machines are not ideal for testing as I still have to deploy to the web to test because my local webserver is not accessible
from within virtual machines.

Nico


Wed Oct 27, 2010 11:15 am
Profile

Joined: Tue Oct 19, 2010 10:40 am
Posts: 40
Post Re: No rounded corners on "PIEd" Divs, but flickering on hov
Ouch :( I feel bad for you. I haven't began testing for IE6 yet, but I have a feeling it's going to be terrible.

But I think it will fix your problem, though I am by no mean an expert with this stuff...


Wed Oct 27, 2010 11:19 am
Profile

Joined: Mon Oct 25, 2010 2:36 pm
Posts: 8
Post Re: No rounded corners on "PIEd" Divs, but flickering on hov
Okay, so indeed, adding position:relative did help! However, not fully.
In IE 7 everything works perfect. In IE 8 first I don't see the rounded corners.
Only when hovering with the mouse over the boxes they appear.
In IE 9 it looks okay (IE 9 can render css3 rounded corners), BUT when I hover over the boxes
the 1px border disappears. At least the IE9 thing I could handle with only conditionally
including PIE, for IE7 and 8.

Any suggestions what to do about IE8, where the borders only appear after hovering over the box?
How could I fix this?

Nico


Wed Oct 27, 2010 12:29 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 13 posts ]  Go to page 1, 2  Next

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.