Rounded-corners/IE -- .htc -- can someone look in IE please.... thx

HTML & CSS
1

hi,

am using technique described here, http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
for IE support for rounded corners…

can someone here pls look at this pg
http://mayacove.com/dev/css/test_div.html
in IE (9, 8, & 7 if possible) to see if rounded corners are showing in IE?

thank you very much…

2

Round corners in IE8 but the background of the box is black, so you can’t see the text. Also, the text overflows the bottom of the box.

3

the background of the box is black?

that’s weird, I don’t see that…

ok, made everything white now…

thank you very much…

4

It works fine in IE8 and 7, but it messes up IE9 (creating a thin black border), which supports border-radius anyhow. So it would be better to serve up the htc file just to IE8 and under, via a conditional comment.

<!--[if IE 8]>
  <style>
    div {behavior: url(border-radius.htc);}
  </style>
<![endif]-->
5

awesome… thank you for your help… ok, so just did what you suggested… can you look again please…

http://mayacove.com/dev/css/test_div.html

thank you very much…

6

Yep, works great in IE9 and IE8 now, but fails in IE7 because I made a mistake above. The code should read:

<!--[if [COLOR="#FF0000"]lte[/COLOR] IE 8]>
  <style>
    div {behavior: url(border-radius.htc);}
  </style>
<![endif]-->

The “lte” means “less than or equal to”. The code I gave was just targeting IE8. Sorry about that. Asleep at the wheel. :slight_smile:

7

ok, changed to

<!--[if lte IE 8]>

so can you look more mo’ time please…

thank you very much…

this IE testing thing is a pain… I think when I have a bit more money I will buy a cheap, used windows laptop (but I also need an iPad to test on that for when doing mobile, oh brother… this is getting out of hand…:wink:

8

Yep, looks fine in IE7 now too. :slight_smile:

For what it’s worth, I’m doing all this testing on my Mac. You can either load Windows on your Mac with Bootcamp (which comes with the Mac) or use a “virtual machine” program like VMWare Fusion (which I use) or Parallels. It’s really nice to be able to use Windows and Mac all at once. I have IE open just like any other program.

A free alternative to Fusion and Parallels is VirtualBox. Either way, you still need to acquire a copy of Windows.

9

Looks nice on my Win7 machine with IE8.

10

Microsoft provides free VHD’s: http://adamthetech.com/2012/02/microsofts-free-virtual-machine-images/

11

Thanks Adam. Nice link. :slight_smile: (Although VHD sounds too much like a disease to me. :lol: )

12

I don’t mean to pull a line from deathshadows book of pain but I don’t see the point in using HTC files for generating rounded corners, I mentioned in another thread the importance of content over design and why IE shouldn’t be wasting your time with getting CSS3 properties to work. I have personally done load time tests when the CSS3 Pie HTC file is loaded compared to when its not and the amount of system memory and CPU usage you save is quite significant as the JavaScript in the HTC file itself creates a lot of elements within the DOM to achieve the rounded corner you desire in which you could easily achieve with images anyway without the overhead and frustrations.

I know it sounds like a rant but now that we are heading towards 2013 with HTML5 and CSS3 growing strong I think we all need to embrace what we currently have but allow our websites to work sufficiently in IE7-9 but don’t give them any special treatment apart from IE6 which may need a separate stylesheet but its becoming a known fact that IE6 is a lost cause now and can be forgotten about, to be blunt let the browser do the grunt work and worry more about the content itself rather than the layout around it as the main priority is that the website supplies the content to the user rather than them waiting on a HTC file to load just for some pretty cool looking rounded corners.

Just my 2 cents.

13

I agree, Chris. I just let older browsers live without the corners now.