asked on

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!

David S.

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

Refael

ASKER

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.

ASKER CERTIFIED SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Refael

ASKER

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 :-)

Refael

ASKER

read my last comment posting.... thank you!