This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Hierdie gesprek is in die argief. Vra asseblief 'n nuwe vraag as jy hulp nodig het.

cSS border-radius does not draw right-side corners

  • 3 antwoorde
  • 1 het hierdie probleem
  • 20 views
  • Laaste antwoord deur kimmoli

kimmoli
kimmoli
more options

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.

I have css created hover-popup, which to i have added border-radius -property. CSS Code for span shown when object is hovered on; <pre><nowiki>.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; }</nowiki></pre> Left side corners of popup are working nice, rounded ok.<br /> 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.

Gewysig op deur cor-el

All Replies (3)

kimmoli
kimmoli Vraag-eienaar
more options

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

Gewysig op deur kimmoli

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

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.

kimmoli
kimmoli Vraag-eienaar
more options

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.