• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1267
  • Last Modified:

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!
0
Refael
Asked:
Refael
  • 3
  • 2
1 Solution
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now