IE background issues & Opera Support

[GoogleCodeExporter]

IE seems to ignore background properties in css when using it, it shows the
image, but doesn't seem to listen to any repeat or positioning instructions.

Furthermore, for me, It does not seem to work in opera (who cares really),
but would be nice if possible.

Original issue reported on code.google.com by abro...@gmail.com on 22 Apr 2009 at 9:48

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

For Opera support add: -opera-border-radius: 10px;?

isn't working in opera.............plz..............

Original comment by jaswal....@gmail.com on 28 May 2009 at 4:44

[GoogleCodeExporter]

Will try to figure out background repeating issue.

Opera 10 supports border-radius itself. But as many users are still on 9, we 
should 
find a way :)

Original comment by rahnas on 16 Jul 2009 at 5:20

• Changed state: Started

[GoogleCodeExporter]

Opera 10 supports the tag and accepts it as valid, but it does not display the 
round 
corners. A user-script or js file would be the only way.

Original comment by toyotabe...@gmail.com on 22 Jul 2009 at 4:46

[GoogleCodeExporter]

Hi..

This is not working for nested divs in IE. I am trying to display a div inside
another div and both of them are of ".curved" class. The outer div shows up 
fine but
i am unable to view the inner one. And also, in IE background properties are 
ignored.
Any solution for this would be of great help..

Thnx,
Bittu

Original comment by kayt...@gmail.com on 24 Jul 2009 at 4:38

[GoogleCodeExporter]

For Opera 9.5+ you may want to try this. Have not tried this yet.

http://dev.opera.com/articles/view/new-development-techniques-using-opera-k/
http://files.myopera.com/dstorey/experiments/roundedcorners.html

Original comment by daniel.t...@gmail.com on 25 Jul 2009 at 12:24

[GoogleCodeExporter]

Hi

I really like the idea of this.. its great.
Just adding to comment 5... have you got anywhere with nested divs? Is it worth
opening a new issue?

Thanks
Mark G

Original comment by flyifyou...@gmail.com on 14 Oct 2009 at 3:04

[GoogleCodeExporter]

No i haven't found any solution for this. So I stopped using DIVS and went for 
images
to move on with my work...!! :(

Original comment by kayt...@gmail.com on 14 Oct 2009 at 6:33

[GoogleCodeExporter]

I'm finding that its doing away with background images all together (IE8). This
happens regardless of how I define the backgrounds (individual 'background-' 
rules,
just 'background' shorthand rule, different repeating styles, color/nocolor 
etc.)

Original comment by jixo...@gmail.com on 15 Nov 2009 at 2:20

[GoogleCodeExporter]

Actually all it appears to be doing is making the background disappear, it isn't
actually rounding the corners (doctype xhtml strict).

Original comment by jixo...@gmail.com on 15 Nov 2009 at 2:27

[GoogleCodeExporter]

I have the same backgrounds problem under IE7 and above, I don't have IE6 
available 
to test with; otherwise, great work!

Original comment by lee.hamb...@gmail.com on 22 Nov 2009 at 9:09

[GoogleCodeExporter]

Please, ignore my previous - I did not realise this ticket was opened (still) 
even though this has been fixed in the 
November 18th release.

Original comment by lee.hamb...@gmail.com on 22 Nov 2009 at 9:13

[GoogleCodeExporter]

I noticed CSS "background-repeat" rules are ignored when you use the HTC too 
(though
I really like the script!).  Thanks for the discussion as well. 

Putting the "behavior" CSS rule in conditional (IE-only) stylesheets didn't fix 
the
problem. So, for now, I repeat the "background-image" rule in my IE stylesheets,
calling a different image whose dimensions are far bigger than the "curved"
container. A hack, but it'll do for now.

Original comment by icegulc...@gmail.com on 3 Dec 2009 at 3:17

[GoogleCodeExporter]

I can't get the demo to work at all in IE8 (with or without comp mode on) on a
windows 7 box.  ?

Original comment by davidsta...@gmail.com on 24 Dec 2009 at 8:35

[GoogleCodeExporter]

This script could be an outstanding fix to legacy versions of IE. However with 
this
background image problem of either ignoring background properties and making the
container transparent, or applying background repeat regardless of any other 
repeat
properties being applied. The background on a nested element does not get 
clipped by
its parent either.

Is this script still being developed on? Is work being done into correcting 
these
tickets?

Original comment by digikev....@gmail.com on 30 Jan 2010 at 5:31

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

The script does not support nesting the rounded-corner element within a parent 
<div> 
with any sort of background in IE8.

It appears you don't have correct logic in the element's z-index.

The script sets the z-index of the rounded-corner element to -1, and nesting it 
within a parent <div> puts it behind (sets a lower z-index) than that of the 
parent 
<div>.

I can either use no background in the parent <div> (not acceptable) to make the 
element visible, or raise the z-index of the rounded-corner element to make it 
visible, but lose the content within the element (again, lower z-index).

To see this, take the border-radius.html in the example zip file and in the CSS 
for 
the ".rel" container, add "background-color: white;" and see the result.

Original comment by k...@infinitends.net on 12 Mar 2010 at 12:57

[GoogleCodeExporter]

This is definitely a deal breaker for me, and I imagine for most. You must be 
able to
nest the divs with rounded corners in a div (read a container/wrapper) that has
background.

Original comment by martin.l...@gmail.com on 29 Apr 2010 at 8:34

[GoogleCodeExporter]

Not working for me either... anyone found a solution?

Original comment by BMCo...@gmail.com on 21 May 2010 at 6:14

[GoogleCodeExporter]

We seem to have found a solution, modified htc file is attached.

The vml object (the rectangle with rounded corners) was originally been put 
onto the page with z-index -1, so it would be behind it's content. This is a 
problem if there is a containing div with a different background color, so our 
file modifies this z-index to be 0, then mofifies the element itself (the one 
where curved corners are been applied) to have a z-index of 1, so it's content 
appears over the zml shape.

It, works in our case anyway, but it might need modifying a bit more, I could 
see it not working if the z-index's are been specified a lot (different to 
default).

Original comment by paulrosk...@gmail.com on 10 Jun 2010 at 12:35

Attachments:

• border-radius.htc

[GoogleCodeExporter]

The new .htc file fixes the issue where the background image disappeared 
altogether when it's within a background tag rather than a background-image 
tag, but for me it's still repeating and ignoring the repeat-x designation.

Original comment by jameslik...@gmail.com on 16 Jun 2010 at 2:46

[GoogleCodeExporter]

This seems to fix the background issue for me, however I end up with a 
rectangular/square div. No round corners.

Original comment by guy....@gmail.com on 21 Jun 2010 at 4:21

[GoogleCodeExporter]

Thanks for the modified htc above but as jameslikeness said it will have square 
corners in IE8. 

I found a hack on another thread 
(Issue 32:z-index fails in IE8 
http://code.google.com/p/curved-corner/issues/detail?id=32#c1)
alex.fairchild suggested to add following properties to parent element and it 
works flawlessly

border-radius: 0px;
behavior: url(border-radius.htc);

Original comment by naumanaf...@gmail.com on 14 Jul 2010 at 9:17

[GoogleCodeExporter]

I have test this one Comment 20 by paulroskilly, Jun 10, 2010 and work 
perfectly in all browers

Original comment by deejay...@gmail.com on 5 Aug 2010 at 11:32

[GoogleCodeExporter]

Has anyone here gotten this to work on textboxes? The file posted in Comment 20 
got rounded corners to display on texboxes, however, most are not aligned and 
have z-index issues (can't click into some textboxes).

Original comment by a...@kspsystems.com on 26 Aug 2010 at 6:37

[GoogleCodeExporter]

hi! i tried to use the updated version by paulroskilly, background issues for 
me has been resolved but no rounded corners were achieved. Anyone please help? 
(I tested it using IE7.)

Im trying to use it for a message bubble wherein there is a rounded corner with 
a bubble tip positioned on top.

CSS Code:

#shoutout { 
  background: #1e4c64 url(img/shoutout_bg.jpg) repeat-x top;
  color: #b1ddf3;
  padding: 20px 40px;
  text-align: center;
  position: relative; 
}

#shoutout img {
  position: absolute;
  left: 140px;
  top: -12px;
}

.rounded {
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -khtml-border-radius: 7px;
  border-radius: 7px;
  behavior: url(css/border-radius.htc);
}

HTML Code:

<div id="shoutout" class="rounded">
  <h2>Some Text here!</h2>
</div>

Original comment by randellm...@gmail.com on 5 Nov 2010 at 6:25

[GoogleCodeExporter]

Here's my bugfix version based on v3. Changes:
- z-index was not read correctly, now it is
- Resolved the stupid bug impacting target elements WITH position relative 
declared or other complex-positioned layout. This should solve background 
disappearance and so on. Dont use the (bad) hacks anymore!
- removed window_resize code as it was buggy and i failed to see in which 
situation it was useful, maybe im dumb?
- code cleaning, better styling in IE6

I'm working on further improving it, i would like to add event listener to 
track target element's changes such as 'visibility' from hidden to visible, and 
so on...

Original comment by alric.ph...@gmail.com on 13 Nov 2010 at 7:22

Attachments:

• border-radius-fix.htc

[GoogleCodeExporter]

Bugfix updated after more testing. IE defies logic, it seems its implementation 
of z-index is entirely bullshit. IE7 & IE8 differs in their way to treat 
z-index and it seems both are wrong... so i had to defy logic too and find a 
hack which seems to work for both in most situations. Use the new file 
attached, i deleted the one above.

I also coded a way (with onpropertychange event) to correctly display rounded 
borders for targets with visibility hidden changed to visible via script (does 
not work for status changed only with css) but it's not included in this 
bugfix; tell me if you're interested.

Original comment by alric.ph...@gmail.com on 14 Nov 2010 at 10:29

Attachments:

• border-radius-fix.htc

[GoogleCodeExporter]

Your new version (comment 27) seems to work flawlessly on IE8, with nesting. 
Bravo!

Original comment by john.fis...@gmail.com on 29 Nov 2010 at 7:08

[GoogleCodeExporter]

Thanks for the correction file. helped a lot!

Original comment by p.khan...@gmail.com on 19 Dec 2010 at 10:20

[GoogleCodeExporter]

Hi everybody,

Although this issue page has been of some help, I still can't seem to find a 
way to show that background color in my dropdown menu. I'm using the htc file 
in my nice menus css file in drupal.
I've been able to get the rounded corners, which is great but I'm now stuck, as 
I said, on the background color disppearing from my dropdown menus.

Any help would be greatly appreciated.

Original comment by smilter...@gmail.com on 24 Jan 2011 at 12:57

[GoogleCodeExporter]

Still getting an error on line 106

Original comment by atlwebs...@gmail.com on 29 Jan 2011 at 12:07

[GoogleCodeExporter]

This HTC is not working for anything above simple rounding of a single div.
I have some nested DIVs with background (color, not image) and everything gets 
quite messy. In some tests DIVs disappera, in others Z-Indexes change... total 
mess.

I wish someone could introduce me to the genius at Microsoft that insisted it 
is a bad idea to be like everybody else. I just need two minutes with the 
dude...

I was very much hoping this HTC could do the trick, as HTC is the best cure for 
the IE illnesses, but this is a no go. HTC should be a simple, plug-once and 
forget.

My next best option is probably some jQuery rounder that adds a lot of ugly DOM 
nodes...

Original comment by dan...@gmail.com on 24 Feb 2011 at 4:39

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Beautiful.

Original comment by lindizzl...@gmail.com on 7 Apr 2011 at 8:24

[GoogleCodeExporter]

how to solve the cornering issues like, i only want to style the upper-;left 
and right of the div(box). but using this link: <%--[if lt IE 8]><script 
src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script><![end
if]--%>
 the  hole corners are styled. how do i do it?

Original comment by mel.hagu...@gmail.com on 1 Aug 2011 at 8:38

[GoogleCodeExporter]

The version in comment #28 worked for me. I'll speak to rahnas to see if we can 
get the code updated.

Original comment by nfhm2k on 19 Aug 2011 at 10:48

[GoogleCodeExporter]

I actually used #20, which I will merge into the svn.

I also tested the one from #28 which didn't fix the bug described here.

Original comment by nfhm2k on 23 Aug 2011 at 10:56

[GoogleCodeExporter]

Fixed in SVN r3. Please test and report back.

Please provide a test case if possible.

Thanks.

Original comment by nfhm2k on 23 Aug 2011 at 10:57

• Changed state: Fixed

[GoogleCodeExporter]

how i solve the curved corner problem in my IE7.. 
there is no effect of 

" border-radius: 0px;
behavior: url(border-radius.htc);"

it gives me same problem after adding above code...
what should i do?

Original comment by kukkar.a...@gmail.com on 11 Apr 2012 at 6:14