border-radius.htc

Hello experts,

I hope someone can help me find the problem as I tried mostly everything I can;

I am using CSS with border-radius.htc (rounded corners) for IE. The htc found in http://code.google.com/p/curved-corner/downloads/detail?name=border-radius.htc
I am using the htc for the thumbnails and for the mouseover tooltip.

Here is my page (css inline): http://projects.exceptional-freelancer.com/border-radius/border-radius.html

All other browsers of course works great but IE (7, 8). Something very funny happens when you mouse over the thumbnails.

Some of tooltips appear with rounded corners but without the text and some appears without the rounded corners but with the text.

I would be happy if this would work in IE 7 and 8. I know that in IE 6 I can forget that it will work, that’s ok.

thank you!
RefaelAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.Commented:
I think it may have to do with applying the script in a ":hover" rule. Try this:
div.box a {
	text-decoration:none;
	border:0;
	outline:none;
  display: block;
  position: relative;
}

/* ... */

div.box a span {

	display:block;	
	margin:0;
	padding:10px;
	position:absolute;
	width:50%;
	bottom:-19px;
	left:-9999px;
	z-index:2;	
	background:#000;
	color:#fff;
	border:1px #000 solid;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	behavior: url(border-radius.htc);
	font-family:Tahoma,sans-serif;
    font-size:11px;
    line-height:20px
}
div.box a:hover span {
	left:30px;
}

Open in new window

0
RefaelAuthor Commented:
Hello Kravimir,

made a copy of the page and rename it "kravimir".

http://projects.exceptional-freelancer.com/border-radius/kravimir.html

when i faced this problem my initial css was in the "div.box a span" it did not work. as you can see also your solution does not work. look what happens in IE 8 and IE 7 so funny.
0
David S.Commented:
You didn't make all of the changes I suggested?

Anyway, it seems that that script isn't compatible with what you're trying to do. This other script seems to work though: http://www.dillerdesign.com/experiment/DD_roundies/
<script type="text/javascript" src="DD_roundies.js"></script>
<script type="text/javascript">
  DD_roundies.addRule('div.box a:hover span', '4px');
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RefaelAuthor Commented:
hi Kravimir

again, thank you!

your solution works great in ie 8 but not in ie 7. i downloaded the "DD_roundies_0.0.2a.js" and i have applied it with your css directions. what did work fine in IE 7 and 8 is actually another script i have found called curvycorners it just work fine but of course with your suggested css changes.

thank you for the great help.

PS. if you think DD_roundies.js script should work and i did something wrong... learning is always great and i would be happy if you can show an online example :-)
0
RefaelAuthor Commented:
read my last comment posting.... thank you!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.