Highlighted

Issues running Responsive HTML5 project in IE 7 and 8

Explorer ,
Dec 21, 2014

Copy link to clipboard

Copied

Hello,

I recently published my first help project using the Responsive HTML5 format. Despite some issues with a corrupt screen profile template that led to some initial display problems (font in header not displaying properly), all seemed to be working OK with the project.

I've recently learned from our QA department that the help file does not display properly in IE 7 or 8, which we are responsible for supporting. A number of different errors get generated when attempting this (see below).

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; WOW64; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)

Timestamp: Fri, 12 Dec 2014 14:25:49 UTC

Message: Object doesn't support this property or method

Line: 6

Char: 6995

Code: 0

Message: 'undefined' is null or not an object

Line: 6

Char: 213

Code: 0

Message: Object doesn't support this property or method

Line: 2

Char: 1

Code: 0

Message: 'rh.model' is null or not an object

Line: 8

Char: 1

Code: 0

Message: 'rh.model' is null or not an object

Line: 50

Char: 3

Code: 0

Has anyone experienced issues like this when trying to run a Responsive HTML5 project in IE 7 or 8?

Thanks in advance for any help or guidance you can provide.

Sincerely,

Dave

Topics

HTML5 layout

Views

520

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Issues running Responsive HTML5 project in IE 7 and 8

Explorer ,
Dec 21, 2014

Copy link to clipboard

Copied

Hello,

I recently published my first help project using the Responsive HTML5 format. Despite some issues with a corrupt screen profile template that led to some initial display problems (font in header not displaying properly), all seemed to be working OK with the project.

I've recently learned from our QA department that the help file does not display properly in IE 7 or 8, which we are responsible for supporting. A number of different errors get generated when attempting this (see below).

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; WOW64; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)

Timestamp: Fri, 12 Dec 2014 14:25:49 UTC

Message: Object doesn't support this property or method

Line: 6

Char: 6995

Code: 0

Message: 'undefined' is null or not an object

Line: 6

Char: 213

Code: 0

Message: Object doesn't support this property or method

Line: 2

Char: 1

Code: 0

Message: 'rh.model' is null or not an object

Line: 8

Char: 1

Code: 0

Message: 'rh.model' is null or not an object

Line: 50

Char: 3

Code: 0

Has anyone experienced issues like this when trying to run a Responsive HTML5 project in IE 7 or 8?

Thanks in advance for any help or guidance you can provide.

Sincerely,

Dave

Topics

HTML5 layout

Views

521

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Dec 21, 2014

Copy link to clipboard

Copied

Here is the list of supported browsers in RH11 Multiscreen and Responsive outputs:

 

Adobe RoboHelp 11 * Supported browsers

HTML5 output doesn't work properly with IE8 and below, I'm afraid. Theoretically the content should all be available, but won't always look pretty.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Dec 31, 2014

Copy link to clipboard

Copied

Hi Amebr,

Sorry for the blank post above. Not sure what's happening, but when I get an email of a response and I try to respond from the email, it keeps just posting a blank response :^/.

At any rate, here's my "real" response.

So what options do I have then for creating a help file designed to run on multiple different iOS devices (iPad, iPad mini, iPod, iPod touch, iPhone) in these other browsers (mainly IE 7 and 8, of course)? The new Responsive HTML5 format was supposed to be the catchall for creating help for multiple devices in one fell swoop. From looking at the information in the link you provided then, am I to understand that these limitations are more related to RH 11 and HTML5 output as a whole meaning I’ll have the same issues using the Multiscreen HTML5 output?

 

Thanks for your response and any additional help/guidance you can provide.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 02, 2015

Copy link to clipboard

Copied

Willam van Weelden is our resident expert on this type of issue and he has repeatedly made the point that multiscreen and responsive layouts will not work in IE7 or IE8. I believe the reason is that they do not support CSS3 which is required by these layouts.


See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 02, 2015

Copy link to clipboard

Copied

I believe it's a question of which CSS, HTML and javascript/jquery versions are supported by which browsers, plus Adobe having to draw a line in the sand somewhere.

For example, IE7 was released in 2006 and superseded in 2009, so it won't understand any CSS or HTML developed after that (or not much anyway). And JQuery was developed with specific minimum browser versions, so if Adobe picked JQuery v2 (http://jquery.com/browser-support/ ), then it probably won't work with IE7 or IE8 (which I suspect is why Adobe lists IE9 as the minimum supported version).

This link at the bottom of the jquery page provides good information about the CSS supported by the different browsers: CSS - Contents and compatibility

Some more background information, just for reference:

http://www.w3schools.com/html/html5_browsers.asp

http://www.w3schools.com/cssref/css3_browsersupport.asp

Hope that helps a little.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Jan 05, 2015

Copy link to clipboard

Copied

What is said before is correct. The HTML, CSS and JavaScript is not compatible with old browsers. While jQuery is not the issue (it's the 1.9.1 version), several of the widgets use JavaScript methods that are not available in old browsers.

The only thing you may want to try (haven't tried it myself) is to add HTML5SHIV to the layout to see if that helps with compatibility. It's not supported, but it may be good enough for you. https://github.com/aFarkas/html5shiv

Kind regards,

Willam

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Jan 05, 2015

Copy link to clipboard

Copied

Hi Willam,

Yes, I did come across the HTML5 Shiv in some of my poking around. I wouldn't mind giving that a shot, but I'm just not completely clear on how to implement it within my project. Can you provide me with complete instructions on what I need to do, what goes where, etc.? I would GREATLY appreciate it!

Thanks Very Much,

DH

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jan 07, 2015

Copy link to clipboard

Copied

I am also having this issue when previewing the responsive layout in IE8. I've read polyfills and certain commands work in the file but don't know where to place them as I'm fairly new with RoboHelp.

So far I've added the files to my project and added the script in a few different areas (glossary, topic, search, index pages) to see if it makes a difference and it does not.

<!--[if lt IE 9]>

  <script src="bower_components/html5shiv/dist/html5shiv.js"></script>

<![endif]-->

Great thread topic, looking forward to see the resolution.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Jan 08, 2015

Copy link to clipboard

Copied

If adding that code to the header section of all the .slp files doesn't work, there is no way to make the layout work in IE8 or below.

Kind regard,

Willam

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Jan 08, 2015

Copy link to clipboard

Copied

What is the EXACT syntax/wording of the code?? In other words, what EXACTLY do I need to place in the header section of the .slp files?? Since this only applies to two of my current projects, I was planning on manually adding the code as needed.

Thanks,

DH

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Jan 10, 2015

Copy link to clipboard

Copied

  1. Download the latest version html5shiv.js from https://github.com/aFarkas/html5shiv/tree/master/src
  2. Add the file html5shiv.js as a baggage file in the Screen Layout. (You do this in the Project Set-up pod in the Screen layout itself.)
  3. Add the following code before the </head> tag:

<!--[if lt IE 9]>

  <script src="html5shiv.js"></script>

<![endif]-->

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...