X
Tap here to go to the mobile version of the site.
Your Firefox is out of date and may contain a security risk! Upgrade Firefox

Support Forum

cSS border-radius does not draw right-side corners

Posted

I have css created hover-popup, which to i have added border-radius -property.

CSS Code for span shown when object is hovered on;

.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; }

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

if i press F5, the rounded corners appear there for a moment, then the whole page refreshes.

Modified by cor-el

Additional System Details

Installed Plug-ins

  • Version 2.0.3 Twoflower, copyright 1996-2011 VideoLAN and Authorshttp://www.videolan.org/vlc/
  • Shockwave Flash 11.2 r202
  • This plug-in detects the presence of iTunes when opening iTunes Store URLs in a web page with Firefox.
  • The Totem 3.0.1 plugin handles video and audio streams.
  • DivX Web Player version 1.4.0.233
  • This plugin provides integration with Gnome Shell for live extension enabling and disabling. It can be used only by extensions.gnome.org

Application

  • User Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:18.0) Gecko/20100101 Firefox/18.0

More Information

Question owner

https://support.cdn.mozilla.net/media/uploads/images/2013-01-21-12-57-55-de4f78.png

The other picture shows how it should appear, this is taken from my Nokia N9 Maemo Firefox version 15.0

https://support.cdn.mozilla.net/media/uploads/images/2013-01-23-04-34-00-d04ec5.png

Modified by kimmoli

cor-el
  • Top 10 Contributor
  • Moderator
10756 solutions 96800 answers

A good place to ask advice about web development is at the MozillaZine "Web Development/Standards Evangelism" forum.

The helpers at that forum are more knowledgeable about web development issues.
You need to register at the MozillaZine forum site in order to post at that forum.

I see a display:none; rule in your CSS code. Maybe that is the cause.

Question owner

Ok, thanks, i will try through that channel.

Display:none is intentional, to hide the box when not hovering above my icon. The .dropt:hover says display:block, and this generally works nicely.