2

I just completed a site: http://www.justcelebrations.co.in . I haven't launched it yet because of certain problems. The site uses css3 text gradients to style text in span and border radius to style most divs. It has to be made dynamic later so I don't want to change the text effects to images or something. The problem I am facing is that the site hangs IE8. I haven't tested it in lower versions of IE. I have tested the markup thoroughly and its validated and the css too is valid except for features which are from css3 like opacity, border-radius etc. I have also added google script to make ie behave properly and mordenizer library. The site still hangs IE8. Please Help me out here..


EDIT: after a lot of testing and debugging, found out that ie<9 were crashing because of some text elements being styled by p:first-letter or h1:first-letter (which, as is the case with ie, is totally random as :first-letter is supported by IE7+ ). So all i did was separated those styles from base.css to a non-ie.css and loaded that file with a [if ! lt IE 9] and it worked!

kapv89
  • 1,692
  • 1
  • 17
  • 20
  • Wow... idk if this will help but I tried it in IE9 running as IE8 and 7 and it completely crashed the browser. – Joseph Marikle Aug 20 '11 at 23:20
  • Thanks for your input Joseph, I am working on a rewrite of the site for ie as i have tried removing many things but it still crashes ie8 – kapv89 Aug 21 '11 at 13:33
  • You probably want to answer your own question with that edit and accept it. Because, you managed to debug it perfectly. Currently the site works down to ie7. However, I strongly recommend not using such huge files to be faded on the background. It slowed my slower computer down a lot and it will cause some users browsers to crash. That means, they will never visit that site again -> bad marketing. – Kalle H. Väravas Aug 22 '11 at 09:22
  • Kalle H. Varavas, thanks, will reduce the size of home page images – kapv89 Aug 22 '11 at 17:23

3 Answers3

2

after a lot of testing and debugging, found out that ie<9 were crashing because of some text elements being styled by p:first-letter or h1:first-letter (which, as is the case with ie, is totally random as :first-letter is supported by IE7+ ). So all i did was separated those styles from base.css to a non-ie.css and loaded that file with a [if ! lt IE 9] and it worked!

kapv89
  • 1,692
  • 1
  • 17
  • 20
1

Can you add <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> to target fixes. As you make changes view in IE8 through IE9(F12) and play with -ie-(compared to -moz- & -o-) in your css. I would also keep a CSS 2.1 file and a CSS3 file to keep track of your new code.

Shane
  • 1,629
  • 3
  • 23
  • 50
0

It's working good here in Safari. Just to narrow this down, what if you remove all the conditional and IE specific libraries you got from Google? In my experience, all the various JS libraries that are supposed to make older IE versions behave always seem to break or conflict with some other script or library like jQuery.

Also see the answer in this thread for optimizing your page loading by placing the JavaScripts at the end of the <body> section. Perhaps in your case, loading the JS last will make some kind of difference to Explorer.

Community
  • 1
  • 1
Sparky
  • 98,165
  • 25
  • 199
  • 285
  • It works properly in all browsers except ie. I'll try removing the google libraries in my re-write, although I had added them only because the site was crashing ie – kapv89 Aug 21 '11 at 13:38
  • @kapv89: Also independently remove Modernizer, again, just to narrow this down to a specific cause. – Sparky Aug 21 '11 at 13:43