Firefox not displaying rounded borders

Firefox not displaying rounded borders

由~ Longbarrow ~發表於
Number of replies: 9

Hi

Firefox is displaying the rounded borders on most boxes correctly except for the category box and course boxes. This is my css:

.categorybox, .categoryboxcontent,
.coursebox, .courseboxcontent {
  -moz-border-radius:20px;
  }

I have also tried:

.categorybox, .categoryboxcontent,
.coursebox, .courseboxcontent {-moz-border-radius-topleft:20px;
  -moz-border-radius-topright:20px;
  -moz-border-radius-bottomleft:20px;
  -moz-border-radius-bottomright:20px; }

But that doesn't work either. It isn't overridden anywhere else in the css that I can see. Any thoughts?

Thanks

Longbarrow

評比平均分數： -
In reply to ~ Longbarrow ~

Re: Firefox not displaying rounded borders

由~ Longbarrow ~發表於

Thought I'd show you the problem with a pic:

I have made .categoryboxcontent with 3px black border and the background red so that you can see the problem more clearly. The rounded shape is there, but it has a square border.

Please help! What could have I missed?

Longbarrow

附件 rounded_corners.gif
評比平均分數： -
In reply to ~ Longbarrow ~

Re: Firefox not displaying rounded borders

由Tim Hunt發表於
Core developers的相片 Documentation writers的相片 Particularly helpful Moodlers的相片 Peer reviewers的相片 Plugin developers的相片
Try using the DOM Inspector in Firefox to check which element has the red background with rounded corner, and which has the black border. I suspect that the black border is coming from a different element.

If you don't know about DOM Inspector yet, and trying to diagnose CSS problems, then you are really missing out.

http://www.mozilla.org/projects/inspector/
http://www.brownhen.com/DI.html#use

Tim.

評比平均分數： -
In reply to Tim Hunt

Re: Firefox not displaying rounded borders

由~ Longbarrow ~發表於
Yes, well, I've been using the web developer's extension in firefox ... still no luck though sad
評比平均分數： -
In reply to ~ Longbarrow ~

Re: Firefox not displaying rounded borders

由Helen Foster發表於
Core developers的相片 Documentation writers的相片 Moodle HQ的相片 Particularly helpful Moodlers的相片 Plugin developers的相片 Testers的相片 Translators的相片
Hi,

Perhaps you could try using Andy Walker's CSS inspector - the latest version is very cool! cool
評比平均分數： -
In reply to Helen Foster

Re: Firefox not displaying rounded borders

由~ Longbarrow ~發表於
I'll give that a go - thanks! 
評比平均分數： -
In reply to ~ Longbarrow ~

Re: Firefox not displaying rounded borders

由Julian Whitehead發表於
Did you manage to fix this? I have just successfully upgraded to 1.7+ (hurray), when I fist logged in I had all the nice lovely curves.

I added my old theme from my old 1.6 installation, and I still had the curves, it was only when I updated the frontpage. I lost the rounded corners.

I realise that I probably need to give you some more information, my installation is pretty standard on a Cpanel Server. Its not a disaster to lose the corners as we only have IE in school, but those at home use FF (or those in the know).

Any thoughts - I am a CSS novice.

Ta
Julian
評比平均分數： -
In reply to ~ Longbarrow ~

Re: Firefox not displaying rounded borders

由Joseph Rézeau發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片 Testers的相片 Translators的相片
Hello,
Which theme are you using? Which Moodle version? Anyway, adding border-style:none; to your CSS declaration gives the result shown in attached screen shot:
td.categoryboxcontent {
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
background-color: #FF0000;
border-style:none;
}
Joseph
附件 image000.jpg
評比平均分數： -
In reply to Joseph Rézeau

Re: Firefox not displaying rounded borders

由Julian Whitehead發表於

I am using Clouds theme (slightly modified) and just upgraded to 1.7+

Where should I add the above code, in styles-layout.css or the moz version?

What I don't understand is the fact that it did work, then it stopped.

I am not going to lose any sleep over it, its just the only thing I have lost on the upgrade.

Thanks for the help

評比平均分數： -
In reply to Julian Whitehead

Re: Firefox not displaying rounded borders

由Joseph Rézeau發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片 Testers的相片 Translators的相片
Where should I add the above code, in styles-layout.css or the moz version?

If you have this in your theme's config.php file:

$THEME->sheets = array('styles_layout', 'styles_fonts', 'styles_color', 'styles_moz');

then you could simply add the line in red to your styles_moz.css file (around line 85):

.categorybox, .categoryboxcontent,
.coursebox, .courseboxcontent {
-moz-border-radius:20px;
border-style:none;
}

Joseph

附件 image000.jpg
評比平均分數： -