CSS Right Side rounded corners fails border-radius

kimmoli · Post by **kimmoli** » January 23rd, 2013, 5:35 am

I have css created hover-popup, which to i have added border-radius -property, based on this http://www.scientificpsychic.com/etc/css-mouseover.html

This appears at least in FF 18.0 (I have no plans to support other than FF)

CSS Code for span shown when object is hovered on;

Code: Select all

.dropt span {position: absolute;  left: 33%; display:none;
  padding: 10px 10px 10px 10px;
  text-align: left;
  border-style:solid; border-color:black; border-width:1px; z-index: 6; border-radius: 10px;
  left: 33%; top: 133px; background: #eeeeff; }
.dropt:hover span { display: block; }

The basic "show-when-hovered" functionality works fine.

Left side corners of popup are working nice, rounded ok.
Right side corners are missing completely, there is reverse corner empty space.

The most strange thing is, that if i press F5, the right-side rounded corners appear there for a moment, then the whole page refreshes.

This picture is from Nokia N9, Maemo Firefox 15.0 and it shows correctly