MozillaZine

CSS Right Side rounded corners fails border-radius

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
kimmoli
 
Posts: 1
Joined: January 23rd, 2013, 5:17 am

Post Posted 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.

Image

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
Image

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 4 guests