By garethhallnz on

I that just built / themed a site and it uses the border-radius.htc file for ie. But I can't seem to get it to load the file.
I have verified the file path but it still does not work. So I user Fiddler to see what doing on. Fiddler give a 404 error on the border-radius.htc file. The file is called correctly from the css file.

My css file and border-radius.htc is in the theme folder in the same level.

Here is my style

.form-submit {
background:url(images/btn_repeat.jpg) top repeat-x;
vertical-align:middle;
padding: 0px 4px 2px 4px;
color:#fff; font-weight:bold;
border:1px solid #009;
height:22px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
behavior:url(border-radius.htc);
border-radius: 8px;
}

This there some kind of drupal thing I need to do?

Lastly in Fiddler it does not seem to get the site/all........ path it say www.domain.com/border-raduis.htc whick is wrong.
I also tried the absolutely like to the file but with no luck. I also added the mime type to the server.

Any ideas?

⋅ Categories: Drupal 6.x

Comments

garethhallnz’s picture

garethhallnz commented

Anyone?

Code should read like well written English

ekbiddle’s picture

ekbiddle commented

Having the same problem. Obviously there are people who can get it to work!
I made a plain html file, and the htc works with that, so it's got to be something with drupal keeping it from loading.

technicka’s picture

technicka commented

How did you get it to work within the plain HTML? Is it just a matter of the .htc file existing in the directory and linking to it from the behavior:url() attribute in your CSS?

Obviously I can't get it to work within Drupal either. Will get back to you if I get it working

nevets’s picture

nevets commented

Is border-radius.htc setting in the same directory as the css file?

benlotter’s picture

benlotter commented

I can't get the border-radius.htc working on my Drupal site.

benlotter’s picture

benlotter commented

I got this working (at least doing something) on my site. But it messed up more than it fixed. So I'll keep trying to get this to work. But at least I got it to find the border-radius.htc file and apply it. I got a big clue from a comment made for Aquia Slate iepngfix.htc issue (http://drupal.org/node/466112#comment-1642172).

Here is what I had to use for my path:

/sites/mysite.com/themes/mytheme/rounded_corners/border-radius.htc

The basic CSS for me looks like this:

.rounded_corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  behavior: url(/sites/mysite.com/themes/mytheme/rounded_corners/border-radius.htc);
}

I also use .rounded_corners_top and .rounded_corners_bottom for 2 divs that stack on top of one another like a block header and block content. Here's a sample of the CSS, but I'm sure I would need to modify the border-radius.htc to get it to work with those or try to apply it to the parent div instead.

.rounded_corners_top {
  -moz-border-radius-topleft: 5px;
  -webkit-border-radius-topleft: 5px;
  -khtml-border-radius-topleft: 5px;
  border-radius-topleft: 5px;
  -moz-border-top-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -khtml-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
[etc]...
sense-design’s picture

sense-design
sense
Primary language German
Location Münster
commented

Like benotter said, the .htc file is only working if you apply the link absolute.

Not working:

behavior: url(border-radius.htc);

Working:

behavior: url(/sites/all/themes/frontend/styles/border-radius.htc);
lordrt21’s picture

lordrt21 commented

I was facing the same problem but in the end was advised to switch to a module called rounded_corners: http://drupal.org/project/rounded_corners
No need to modify css then, just enable the module and then follow the instructions on how to make rounded corners based on specific ids or classes

smilterman’s picture

smilterman commented

Hi everyone,

I think I got the path in my css file to point to the htc file but now all of my menus (backgrounds, borders, etc) disappear.
I just can't seem to get this to work.

So, I have a custom nice menus css file, I added the code and the htc file in the same directory.

-moz-border-radius: 17px;
-webkit-border-radius: 17px;
border-radius: 17px;
behavior:url(sites/all/themes/zeropoint/border-radius.htc);

Any ideas?

I know this must work somehow.

Why can't everybody just NOT use IE? :)

Thnx in advance.

smilterman’s picture

smilterman commented

I'm gonna comment on my own question here.

I found the following in the htc file that apparently overrides the style of my nice menus:

this.style.background = '';
this.style.borderColor = '';

I changed this and colors I indicated were shown on my page.

Only thing is that those damned corners just don't get round corners.

Maybe I missed something else?

If I find this, I'll keep updating, otherwise, any help would be appreciated.

nevets’s picture

nevets commented

The behavior url needs to at least relative to the root, ie

behavior:url(/sites/all/themes/zeropoint/border-radius.htc);

though I think I ended up needed absolute paths, something of the form

behavior:url(http://www.example.com/sites/all/themes/zeropoint/border-radius.htc);
smilterman’s picture

smilterman commented

Hi,

thnx for the help.
The path "http://dc-pc.localhost/sites/all/themes/zeropoint/border-radius.htc" works and takes in account the css style defined in my nice menus css but the corners still aren't rounded. This is off course the main goal of this whole operation :)

I can't seem to get them rounded...

Thnx again

smilterman’s picture

smilterman commented

Hi again,

Just to update...

I got the rounded corners working with a new htc file, link below

http://css3pie.com/

Next problem with IE now is that my nice menus dropdown list doesn't take the css style. I got only text and no backround color or borders.

So frustrating!!!

Again, any ideas? :)

Thnx

peacog’s picture

peacog commented

I had this problem too and had to do two things to solve it:

1. Instead of border-radius.htc I used CSS3PIE: http://css3pie.com/.
2. The element must have position, so if it doesn't already, add position: relative;

So, my CSS ended up looking like this:

...
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  behavior: url(PIE.htc); /* in the css folder */
  position: relative;
...

Peacog Web Development

smilterman’s picture

smilterman commented

Unfortunately, this solution doesn't work for me.
I have tried adding the relative position and z-index everywhere in my css file but halas, no change.
The background color and border just won't show in IE.

Funny thing is that when I hover, backgrounds and borders appear as if nothing is wrong...

Also, when I put border-radius: too zero, the backgrounds appear normal alswel.

Tried to understand it, but can't figure it out.

I hope I'm not the only one having this problem... :)

Thnx for the help anyhow.

laraz’s picture

laraz commented

I had to put for work in my css:

behavior: url(http://localhost/myproject/sites/mysite.com/themes/mytheme/css/PIE.htc);