Whiteboard / LESS Framework IE7/8 Issue

Hi All,

I just built a site for a new client based on the Whiteboard theme framework (with LESS 3 built into it).

Everything seemed fine until my customer started receiving calls from people trying to use the site. Apparently it’s not displaying right with IE8 (I’m guessing 7 and 6, too). Any idea why IE8 is reverting to a smaller, collapsed version of the LESS framework on a decent resolution? It’s doing it on my 1440px wide monitor, so other people must be having the same problem.

Home | Suede Salon, San DiegoSuede Salon, San Diego

I would sure appreciate some help unraveling the problem with this ‘new’ technology. I’m scratching my head here…

Thank you very, very much in advance!

Ansel Taft

From a quick glance, it seems that you are using HTML5 elements with no JavaScript fallback for IE8 and under. Without the aid of JS, those browsers can’t cope with unknown elements like <nav> and <header>. Honestly, HTML5 adds nothing to your site, but looks to be detracting from it severely (but apologies if I’ve missed something).

You can use something like Modernizr to help IE8 and under with HTML5 elements.

[As a side note, you can’t afford to launch a site without testing it in older browsers (if IE8 can even be considered ‘older’). Did you test the site in IE8 and under and not see a problem yourself? If so, perhaps I’m wrong in my assessment (but I haven’t checked the site in IE8 yet).]

Hi Ralph,

Thank you for your post. I totally forgot about the HTML5 elements in the framework. Seems like that could have to do something with it.

In the header, there’s reference to the Google HTML5 shim:

<!–[if lt IE 9]>
<script src=“http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

Should I try to switch that out for Modernizer? Or maybe edit out the HTML5 elements from the framework?

[Regarding the launch of the site, yes, I rushed it to production and did not do my due diligence on backwards testing it. Your point is well noted.]

Thanks!

Ansel

Hi,

IE8 and under don’t understand media queries so all they get is the basic version.

You should either create a conditional stylesheet for IE giving them the rules they need or I believe there are some scripts around to add media query support.


<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Oops, I missed that. Sorry.

Paul’s suggestion is much better. :slight_smile:

Thank you, Paul. I included it in the head of the page, but it does not seem to be making a difference. Could it be an issue of the order I placed it… or something else?

I placed the last two conditional IE items at the bottom of the header before the closing tag.

…and on second thought, I combined the two lt IE9 conditional tags, so both scripts are called after the conditional statement. I hope that’s allowed?

Do you see any other hiccups that would derail this theme framework? (to mix metaphors)

Ansel

Hi All,

After more digging and testing, I discovered one of the plug-ins, DDSlider for WordPress (Plugins - DDSliderWP - 11 Transitions - Slide Manager Panel - CodeCanyon), was the culprit. It was loading something that conflicted with the Whiteboard theme framework. Once removed, it now behaves properly and so I need to find a new image carousel.

As always, thank you both for your help! Paul, you have to let me buy you that beer from abroad some day. You always pull my intermediate skill-level keester out of the fire. :slight_smile:

Ansel

Glad its working now :slight_smile:

Wow, that has to be the most non-viable and possibly worst site designs and codebases I have seen in at least five years. It’s not even 1024 friendly, takes an absurd amount of bandwidth, is painful to scroll in any browser thanks to all the transparency, none of the text is actually legible, and frankly if it works in ANY browser (which it does NOT do here) I would be shocked!

I truly pity that client their bounce rate and hosting costs. That is NOT a deployable site concept – ESPECIALLY if you care about legacy browser support. I don’t know what “whiteboard” is, but if that’s the result kick that nonsense to the curb.