DMS 2 IE9 not behaving, IE8 badly

[communicreations+ 1]

I have an issue with a site not behaving in IE9 and performing badly in IE8. I've been playing around with a copy on a staging server and testing view with Browserstack. I replaced my child theme and activated WP 2013 theme, and IE8/9 worked fine. I then activated the DMS2 Base theme and the not loading properly issue returned. Then I deactivated all the plugins but the problem still persists.

 

With child theme active:

IE8/9/10 - http://imgur.com/a/FzN0O

 

With DMS2 Base theme active, all plugins deactivated:

IE8/9/10 - http://imgur.com/a/3j15x

 

Temporary staging server URL: http://c95.731.myftpupload.com/

 

DMS version: 2.1.9.2

Debug is on, cache cleared

 

The problems with IE8 should be obvious. The CTA is disappearing in IE9 but otherwise is fine. Everything good in IE10 and up.

 

Thanks in advance, Michael

[Danny+ 1,327]

Hi Michael,

 

In order to have support for IE8, you need to have the DMS Pro Tools plugin installed, as this plugin includes scripts that add support for HTML5 and CSS3 to IE8. Therefore, if you do not have DMS Pro Tools plugin installed, some issues with IE8 will occur. Also, please be aware that IE8 support is limited, as the browser just sucks.

 

In regards to IE9, what are you referring to when you say CTA ?

[communicreations+ 1]

Thanks Danny. DMS Professional Tools was installed a while back, and is active. Version 1.8.5. Does it have settings I need to change?

 

IE9 CTA (Call to Action) is the blue box absent of text/images in both IE9 images posted in links above. Directly above signature services section. It is displayed properly in the IE10 screenshots.

 

IE8 does suck, but that unfortunately doesn't alter clients strong desire to have it working.

[Danny+ 1,327]

As far as I can tell, your issue is related to the custom code you have used. Basically, it doesn't look like your code is correct, as there doesn't appear to be as far as I can tell, IE8/9 gradient CSS.

 

[communicreations+ 1]

I can fix that gradient as there are others working on same page. I'm just trying to get this site to look reasonably similar in IE8. Selecting "Enable CSS Classes" in Pro Tools plugin improved matters. 

 

Running site through W3C markup validation helped, as well (IE8 isn't very good at dealing with HTML errors). One of the validation errors involves the hero sections. "No p element in scope but a p end tag seen."

 

I simplified it by putting this in the Hero's subtext box, but same error persists. 

 

<h2>title</h2>

<p>text</p>

<ul><li>item1</li></ul>

<p>text</p>

 

Seems to be adding on an extra p tag — am I missing something?

[Simon 248]

You have multiple issues with that hero box.

 

For a start you have a h2 inside a h1. The title will auto wrap the text into a h1, if you want it as a h2 then select h2 from the option further down.

 

You have </a> inside <i> also.

 

I would paste the contents of your hero box and any text boxes into the html validator and fix your HTML issues 1st.

[communicreations+ 1]

Thanks Simon. I had fixed those on the parent site and just applied them to the staging site as you were looking at it. So now the only validation issue with the hero sections is the one I noted above.

[Simon 248]

Can you paste the contents of the box somewhere, or show a screenshot.

[communicreations+ 1]

Sure, thanks. Here's a screenshot of one of the two hero boxes: http://i.imgur.com/EXBaTjb.png?1

 

I used the simplified HTML noted above and tested with validator, and the error remained. However, here's the original text:

 

<h2>Signature Service Account</h2>

<p>Introducing our unique fee-based platform for independent advisors. With Signature Service as part of your suite of account and service options, you'll gain new opportunities to:</p>

<ul class="fa-ul">

<li><i class="fa-li fa fa-check-square"></i>Strengthen your client relationships</li>

<li><i class="fa-li fa fa-check-square"></i>Increase your assets under administration</li>

<li><i class="fa-li fa fa-check-square"></i>Attract higher-end clients to your practice</li>

<li><i class="fa-li fa fa-check-square"></i>Encourage generational investment planning</li>

</ul>

<p>Let us help you develop a business plan to introduce your clients to fee-for-service planning and transition them to a Signature Service Account.</p>

[Simon 248]

Try removing all the line breaks from your html for example:

<h2>Signature Service Account</h2><p>Introducing our unique fee-based platform for independent advisors. With Signature Service as part of your suite of account and service options, you'll gain new opportunities to:</p>
<ul class="fa-ul"><li><i class="fa-li fa fa-check-square"></i>Strengthen your client relationships</li><li><i class="fa-li fa fa-check-square"></i>Increase your assets under administration</li><li><i class="fa-li fa fa-check-square"></i>Attract higher-end clients to your practice</li><li><i class="fa-li fa fa-check-square"></i>Encourage generational investment planning</li></ul><p>Let us help you develop a business plan to introduce your clients to fee-for-service planning and transition them to a Signature Service Account.</p>

WordPress will add <p> otherwise.

[communicreations+ 1]

Wasn't aware of that. Good to know. Same validation error remains, unfortunately. Even cleared cache to no avail.

[Danny+ 1,327]

What other validation errors remain ?

[communicreations+ 1]

The hero sections are still displaying validation error "No p element in scope but a p end tag seen."

[Danny+ 1,327]

OK, the Hero section text area option doesn't support HTML as it breaks the other options which is giving you the error. Therefore, if you want to use HTML and format your text in that way, I would suggest using a MediaBox for your image and a TextBox for your text inplace of the Hero section.