Hi,

I understood that IE7 and IE8 do not support border radius. Is there another solution for getting rounded corners eg for my modules? Besides images.

Regards, Maurice

Hi
You can use jquery.
css-tricks.com/video-screencasts/24-rounded-corners/
Or
jonraasch.com/blog/css-rounded-corners-in-all-browsers
There is a hack for IE but I have never used it.
code.google.com/p/curved-corner/
Regards

Hi Maurice,

Or you can create rounded corner images:
docs.joomla.org/Creating_rounded_corners

Hopefully one of these methods will work well for you.

Kind regards,
Nick

Hi Mark and Nick,

Thanks for your suggestions. I think for me the code.google.com/p/curved-corner/ probably the easiest way. I have some questions to check if I am understanding it right.
1. I have downloaded this border-radius.htc. In wich folder should I upload it?
2. Then the site says:
The CSS:
.curved {
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior:url(border-radius.htc);
}
So I make a .curved class; correct?

The HTML:
div class="curved">Curvd div</div>
And I apply this class to my buttons; correct?

And then this htc-file should make it work; correct?
Is there a chance that it interfers with the rounded corners in firefox or IE9?

Regards, Maurice

Hi Mark and Nick,

Thanks for your suggestions. I think for me the code.google.com/p/curved-corner/ probably the easiest way. I have some questions to check if I am understanding it right.
1. I have downloaded this border-radius.htc. In wich folder should I upload it?
2. Then the site says:
The CSS:
.curved {
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior:url(border-radius.htc);
}
So I make a .curved class; correct?

The HTML:
div class="curved">Curvd div</div>
And I apply this class to my buttons; correct?

And then this htc-file should make it work; correct?
Is there a chance that it interfers with the rounded corners in firefox or IE9?

Regards, Maurice

Hi Maurice,

Are you pasting HTML or PHP code into the text area? If so, the forum software is likely preventing it for security reasons. What you can do is strip the first character of statements.

For example, if you had PHP code you'd just use:
Note the missing "<" before the first "?".

If you still can't get it, could you please email me at This email address is being protected from spambots. You need JavaScript enabled to view it. with what you're pasting?

Kind regards,
Nick

Hope it works now...

Hi Mark and Nick,

Thanks for your suggestions. I think for me the code.google.com/p/curved-corner/ probably the easiest way. I have some questions to check if I am understanding it right.
1. I have downloaded this border-radius.htc. In wich folder should I upload it?
2. Then the site says:
The CSS:
CODE
curved {
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior:url(border-radius.htc);

So I make a .curved class; correct?

The HTML:
CODE
div class="curved">Curvd div</div>
And I apply this class to my buttons; correct?

And then this htc-file should make it work; correct?
Is there a chance that it interfers with the rounded corners in firefox or IE9?

Regards, Maurice

Nick,
I just mailed it to you
Maurice

Hopefully it works now...

Hi Mark and Nick,

Thanks for your suggestions. I think for me the code.google.com/p/curved-corner/ probably the easiest way. I have some questions to check if I am understanding it right.
1. I have downloaded this border-radius.htc. In wich folder should I upload it?
2. Then the site says:
The CSS:
curved {code
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior:url(border-radius.htc);
code}code
So I make a .curved class; correct?

The HTML:
div class="curved">Curvd div</div
And I apply this class to my buttons; correct?

And then this htc-file should make it work; correct?
Is there a chance that it interfers with the rounded corners in firefox or IE9?

Regards, Maurice

Hi,
As I don't manage to send it in the post, pleas see the attached screenshot of my questions.
Maurice

Hi Maurice,

I replied to you via the support ticket. Please have a look. Thanks! Hopefully that will resolve the issue :)

Kind regards,
Nick

Hi Nick,

I got your support ticket, thanks.
I've done every step to make the rounded curves in IE7, but it still does not work. Maybe you know why. This is what I've done.
1. I've uploaded the .htc file in the css-folder of my template.
2. I applied the css code of .curved.
3. I applied the class "curved" to a button.
4. Using firebug, I see the class indeed applied to this button. The strange thing is though, that I do not see the whole code I applied. The partis not showing in Firebug.
Could that be the problem?
See attached screenshot.

Hope you can help.
Maurice

Hi Maurice,

You're welcome!

Is it possible to get a link to the page or is it in localhost?

Kind regards,
Nick

Hi Nick,

This is the page: www.sitesuccess.nl/zoekmachine-marketing/adverteren-in-google

Thanks, Maurice

Hi Maurice,

Thanks! I'm not seeing the css code in your template's css file though. To which specific file did you apply it?

Kind regards,
Nick

Hi Nick,

I'm using a JoomlaBamboo template wich makes it possible to add extra css by 'custom styles', wich is part of the template manager. For all the other extra css I added, it worked fine. And I noticed too that I do not see a particular css-file for these addings. Should it be in a particular file?

Kind regards, Maurice

Hi Maurice,

That's a question you should ask Joomla Bamboo if you haven't already. If you're using their template manager and the changes aren't getting written to your site, there could be a bug in the template.

Ed

Hi Ed,

I hadn't done that yet, because I wasn't sure if I understood the principles of this .htc-file well enough. I thought the problem was 'there'. I will ask them now.

Regards, Maurice

Hi Ed and Nick,

After consulting my problem is still not solved. The good thing is that 'something is happining', but instead of rounded corners in IE8, the background color has become transparent in IE8 (while the color in Firefox and IE9 is red like it should be).
This is the css that I applied:See also the file with firebug screenshot.
Hope you still have some ideas to solve my problem.

Maurice

Hi Ed and Nick,

After consulting my problem is still not solved. The good thing is that 'something is happining', but instead of rounded corners in IE8, the background color has become transparent in IE8 (while the color in Firefox and IE9 is red like it should be).
This is the css that I applied:See also the file with firebug screenshot.
Hope you still have some ideas to solve my problem.

Maurice

Hi Ed and Nick,

After consulting with JoomlaBamboo, my problem is still not solved. The good thing is that 'something is happining', but instead of rounded corners in IE8, the background color has become transparent in IE8 (while the color in Firefox and IE9 is red like it should be).
The css that I applied, see screenshot as attached file.
See also the file with firebug screenshot in my previous post.
Hope you still have some ideas to solve my problem.

Maurice

Hi Maurice,

Have you seen this article? There is a pretty good discussion of it here.

jonraasch.com/blog/css-rounded-corners-in-all-browsers

Ed

Hi Ed,

I've read it and I must say I do not understand everything, but it seems to me that it is not that easy. As I also noticed with my site. The thing is that I'm still not sure if my problems are caused by my misinterpertation of the use of the code or the something else.
1. Can you please take a look at the file (with the code) of my previous post and see if I used the code correctly? And maybe specially at the path as in the article they are speaking about it and I'm not sure if I have the correct path. (Article: The path to border-radius.htc works differently than you may expect—unlike background-image paths which are relative to the stylesheet, this path is relative to the page from which you call the CSS.)
2. And in general: what would be your advise, go on with this .htc file solution or accept that in IE7&8 I won't have rounded corners? Wich, I must admit, I would find a real pitty.

Regards, Maurice

What is the path to border-radius?

This would point to your main Joomla directory?
behavior: url('/border-radius.htc')

Did you solve the problem of that line not showing in Firebug?

Just a suggestion, but here's what I usually do when faced with a complex problem like this. I try to isolate it by creating a simple html page with the css code in the head tag. I try to make sure I can get it to work there before adding it into the complexity of Joomla. With a complex template there are just a huge amount of things to go wrong. Maybe you've already tried that, but I just thought I would mention it because it's a method that always helps me.

Ed

Hi Ed,

Path to border-radius is: httpdocs/templates/jblifestyle/css/border-radius.htc.
Should that be correct?
You write: 'This would point to your main Joomla directory?
behavior: url('/border-radius.htc')': I don't understand this very well, is this a question or a suggestion the way I should do it?
And/or: is the absolute path I use (behavior:url(www.sitesuccess.nl/templates/jblifestyle/css/border-radius.htc) not possible with such a .htc file?

The line not showing: not really solved, they did not come up with an answer, I will ask it once more.
And thanks for your suggestion!

Maurice

I meant, that as it is written, it would point to your main directory. Which is not where your htc file is. The full url you are using should be correct based on what I know. I was suggesting that you check the path to make sure it was written correctly.

If isolating the problem works, you can try creating a new css file and put a link to it in your index.php and it should load the new file and then you'll be sure the css is being called and applied. Put it last in line so it dominates any other css.

If forcing the proper css to be applied doesn't work, there is something going on with this template that I don't understand.

Ed