views:

39

answers:

2

I use chrome and firefox. I love chrome and firefox. I just thought to check how my website looks in IE8 and the results are fucking horrific. I can't navigate, it doesn't render rotations properly and the whole thing is a clusterfuck.

Does anyone have any ideas? My only thought at the moment is to do a complete redesign that will accommodate for IE.

My sad, IE-broken website

A: 

So far my only idea is to set up a browser auto-detect and redirect to a ie-friendly site. I found this: http://mobility.mobi/showthread.php?22-Auto-detecting-PC-Mobile-and-then-Redirecting

WednesdayWolf
+1  A: 

No, don't do redirection - all is not lost. You can still try to salvage the situation.

The main problem with the site is your use of CSS3 2D Transformations, which isn't supported in all versions of IE (IE9 should support it, but your site may not be using the correct syntax).

There are several things you can do to fix this. I'll take you through the steps I usually take:

  1. Since 2D transformation is a relatively new part of the specifications, it would be wise to stick to older methods of doing things for now. The most obvious method is to use images that are slanted instead of anchors that are slanted with CSS.

  2. If the above solution isn't desirable for some reason (too much work; interactive area too large with images etc.) you can always adopt fallbacks (displaying the navigation and logo in the traditional horizontal manner) for browsers that do not support 2D transformations. You can easily discover browser capabilities with a script like Modernizr. Do this before specifying a IE specific stylesheet, because there may be other browsers that do not support transformation.

  3. Deploy an IE specific solution, usually with conditional comments. In this case you can use IE's filter matrix transformation to plug the gap, or deploy the aforementioned fallback script for IE9 and below.

Yi Jiang
That is damn useful! I'll probably go with the slanted images as it looks like the easiest solution, and none of the slanted text is linked.
WednesdayWolf
Only thing I can't figure out now is that the background image hovers over the links in ie. Hm. An ie-specific stylesheet it is then.
WednesdayWolf