0

I am trying to create a local HTML/CSS/JS project on my machine using HTML5 Boilerplate template. I am using CSS3 properties like border-radius and it looks good on IE 9. But the property has no effect when testing in IE7 and IE8 using F12 Developer tools.

I was checking http://htmlemailboilerplate.com/ for its behavior on IE7/8 mode. The website seems to work well and supports the border-radius property on IE7/8 mode. I then went ahead and downloaded http://htmlemailboilerplate.com/, as a complete webpage to my local machine. The local copy when opened in IE7/8 mode does not support the CSS3 border-radius property. (http://htmlemailboilerplate.com/ website used border-radius property in its behind the nav_elope.png to round off the corners)

Is there something that I don't understand about the difference of running HTML5 boilerplate on a local webpage vs. a website hosted on a server?

How can I make the downloaded page behave exactly as the website behaves in IE7/8 mode?

codewaggle
  • 4,893
  • 2
  • 32
  • 48
user1015510
  • 153
  • 1
  • 1
  • 6
  • I am not sure if this is the right way or the wrong way but I moved the class from the tags to the tag and it helped. this is illustrated in the following article http://carlorizzante.com/2012/html5-boilerplate-ie7-8-less-and-how-to-make-those-things-effectively-work/ – user1015510 Jun 16 '12 at 01:08
  • Do you have a web server on your local machine? If not it could affect how certain files are loaded. See this question [Using Html5boilerplate's code to load JQuery very slow when run locally](http://stackoverflow.com/q/8718662/751619) – codewaggle Jun 21 '12 at 01:28
  • Yes its local and I am able to see why the problem occurs. Any idea why my css3 properties like border radius dont work on my local static website. It does not connect to any server (not even localhost). its just html/css/js on my local machine – user1015510 Jun 25 '12 at 21:13

2 Answers2

1

It appears that you have the Google Chrome Frame (GCF) installed as an IE add-on. The http://htmlemailboilerplate.com/ site uses the GCF to display HTML5 and CSS3 in IE browsers. It has the following META tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

"chrome=1" means always use GCF if it's available.

GCF doesn't work locally unless you edit your registry. You need to go to:
HKCU\Software\Google\ChromeFrame
and add
AllowUnsafeURLs=1 (DWORD).

You would access the page you saved like this: gcf:c:/path_to_file/HTML5_Tests/HTML EMAIL BOILERPLATE v 0.5 updated 11_5.htm

You might find this page helpful: Chrome Frame: Developer Guide

The Testing Your Sites section has the info I detailed above.

codewaggle
  • 4,893
  • 2
  • 32
  • 48
0

IE < 9 doesn't support border-radius. See http://caniuse.com/#search=border-radius

update: See http://css3pie.com/. I don't know if this works.

long
  • 3,692
  • 1
  • 22
  • 38
  • Yes, That is true. But HTML5 Boilerplate will allow the use of CSS3 on IE<9. Can clearly be seem on http://htmlemailboilerplate.com/ – user1015510 Jun 13 '12 at 15:56