• Registered: 2012-10-15
  • Posts: 33

Topic: IE9 and embeded gallery

I have an embeded gallery:
http://www.pascalriben.com/landscapes/landscapes.html
If I don't put <!doctype html> pour HTML5, en IE 9, the description text (Phnom Penh, Cambodia, 2007 for the first picture) doesn't display (as ALWAYS the problem comes from Microsoft: Firefox and Chrome work fine).

With <!doctype html>, the description text is displayed for all browsers, IE9 included. But with <!doctype html>, the top of the page is hidden for all browsers (IE9, Firefox, Chrome...) and no  scrollbar is didplayed.

If in the Juicebox code I change
galleryHeight: "100%",
with, for example, 600, the top of the page is displayed, the description texte also. But when I change the size of the browser, the image is not resized.

Does somebody knows what to do ? Many thanks.

  • Registered: 2012-04-24
  • Posts: 5,906

Re: IE9 and embeded gallery

All web pages must use a Doctype Declaration in order for the browser to know what set of standards the page's code should adhere to.
Please see this FAQ: My gallery looks strange in Internet Explorer 9. Why? and this note about Juicebox and Doctypes.

We recommend using the HTML5 Doctype <!DOCTYPE html>, but whatever Doctype you use, you can check that your web page's code is valid for that particular Doctype with the W3C Markup Validation Service. If any errors are reported, they should be fixed in order for your web page to be rendered with greater consistency across different browsers.

If you wish to have a resizable gallery with a header without the need for a scrollbar on the page, please see the Using a Resizable Gallery with a Header section of the Juicebox Embedding Guide. There is an online example (View Resizable Gallery with Top Menu Example) which has a header, a footer and a resizable gallery which takes up the available space in between. You can view the source of the page in your browser and modify the code to suit your needs.

  • Registered: 2012-10-15
  • Posts: 33

Re: IE9 and embeded gallery

Thank you for your answer Steven. Of course, I know "all web pages must use a Doctype Declaration in order for the browser to know what set of standards the page's code should adhere to"... When I say "If I don't put <!doctype html>", I mean, if I put an other DD, for example, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, which works fine with Firefox and Chrome, but not with IE 9.

Thank you for the links: sure, I have some errors in my web page, so I'm going to improve this.

Thank you also for the link to the examples of resizable galleries without the need for a scrollbar. However, looking for the code I have found
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
and not
<!DOCTYPE html>

Sincerely,

Pascal

  • Registered: 2012-04-24
  • Posts: 5,906

Re: IE9 and embeded gallery

I have just created a Juicebox-Lite v1.1.1 test gallery using the HTML 4.01 Transitional Doctype Declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

... on the gallery's HTML index page (the page containing the embedding code for the gallery) and the gallery displays correctly (including all titles and captions) in IE9 on my PC. It should not be essential to use the HTML5 Doctype Declaration but a Doctype Declaration of some description should be used.
If you could post the URL to a gallery which exhibits the behavior you describe in your first post, I would be happy to take a look and investigate further.

  • Registered: 2012-10-15
  • Posts: 33

Re: IE9 and embeded gallery

Again, many thanks Steven. As you have written, "We recommend using the HTML5 Doctype <!DOCTYPE html>", I'm not sure why you want now to use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ? I would like, too, use <!DOCTYPE html> to be in HTML5 for the future.

In IE9, with
http://www.pascalriben.com/looking-the- … round.html
the text is not displayed. If I click on the Compatibility view button, the text is displayed, but the background is fully black, without transparency.

Thanks again.

Pascal Riben

  • Registered: 2012-04-24
  • Posts: 5,906

Re: IE9 and embeded gallery

Currently, your gallery does not display correctly in IE9 because your gallery's HTML index page uses the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Instead, use the full HTML 4.01 Doctype Declaration as documented on this web page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
  • Registered: 2012-10-15
  • Posts: 33

Re: IE9 and embeded gallery

Thank you Steven. I have changed the doctype and the text is displayed. However, the background - as for the button option in the top right corner - is black and not transparent as in others browsers. Is it normal ?

  • Registered: 2012-04-24
  • Posts: 5,906

Re: IE9 and embeded gallery

The Thumbnail Button in your gallery has a semi-transparent background when I view your gallery in IE9, just like in other browsers (see this screenshot [Screenshot removed.]). (The screenshot was taken whilst your gallery used the HTML 4.01 Transitional Doctype Declaration and the browser window was intentionally made small to ensure that there was content behind the button.)
Make sure Compatibility View is switched off.

  • Registered: 2012-10-15
  • Posts: 33

Re: IE9 and embeded gallery

Thank you Steven. However, now, since I have changed the doctype, nothing work for all browsers: there is no scrollbar anymore.

The problem is that I have modified all pages before to work on HTML 5. For example, I have changed the Facebook and Twitter button code from iframe to HTML5.

First, you have written: "All web pages must use a Doctype Declaration... We recommend using the HTML5 Doctype <!DOCTYPE html>... and ok, it's just, what I want to do: I want to use HTML5. So, I don't understand why you have written after:

"I have just created a Juicebox-Lite v1.1.1 test gallery using the HTML 4.01 Transitional Doctype Declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">"

I have asked you, but you didn't answer. Then, again, in my previous post, I have written: "We recommend using the HTML5 Doctype <!DOCTYPE html>", I'm not sure why you want now to use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ? I would like, too, use <!DOCTYPE html> to be in HTML5 for the future."

but again, you didn't answer.

I have just checked again you Lite Embeded example
http://www.juicebox.net/demos/lite/embedded/
and the doctype is not HTML 5 but
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

So, once again, I want to build a site in HTML5 and use Juicebox Lite embedded with it. Is it possible ? You recommand HTML5 and you give examples with HTML 4.01. Why ?

Thank you Steven: I would be happy to fix this, because right now, what I was thinking to be a matter of minutes have became a matter of days and I have already passed many hours to change, unchange, etc. with always problems at the end.

  • Registered: 2012-04-24
  • Posts: 5,906

Re: IE9 and embeded gallery

I created a test gallery using HTML 4.01 Transitional because that is the Doctype that you were using at the time and having  a problem with and I wanted to show that using this Doctype can work OK.
It is not essential to use HTML 5. As long as your web page validates correctly, you can use whatever Doctype you like. As far as I am aware, there are no known issues with any Doctype in any browser as long as the code validates OK. However, if you are starting a web site from scratch, we recommend HTML 5 because it is the way of the future and has a very short Doctype Declaration which is difficult to get wrong: <!DOCTYPE html>

So, once again, I want to build a site in HTML5 and use Juicebox Lite embedded with it. Is it possible ?

Yes.

You recommand HTML5 and you give examples with HTML 4.01. Why ?

Perhaps the examples on the site should all use HTML 5 but they all use recognised Doctype Declarations, contain valid code and the galleries all work fine.

  • Registered: 2012-10-15
  • Posts: 33

Re: IE9 and embeded gallery

Ok, thank you Steven. However, I have an HTML5 page  (<!DOCTYPE html>) which validate fine on http://validator.w3.org/ and has the same problems on all browsers: no scrollbar and the bottom or the top of the page is hidded:
http://www.pascalriben.com/portfolio/portfolio5.html

  • Registered: 2012-04-24
  • Posts: 5,906

Re: IE9 and embeded gallery

The reason that the content of your page requires a scrollbar is that your gallery has a height of 100% and your header and footer have finite heights. (100% + header height + footer height > browser window height).

Possible solutions would be to either:
(1) Add the following code to the <head> section of your page to allow a vertical scrollbar to appear:

<style type="text/css">
    body {
        overflow: auto !important;
        }
</style>

... or:
(2) Define your gallery's height as an absolute pixel value rather than as a percentage which will also allow a vertical scrollbar to appear.
... or:
(3) Implement the Using a Resizable Gallery with a Header solution, whereby you can specify absolute heights for your header and footer and the Juicebox gallery will occupy the remainder of the browser window (no matter what size it is) without the need for a vertical scrollbar.

  • Registered: 2012-10-15
  • Posts: 33

Re: IE9 and embeded gallery

Ok, I have put the code from 1) in my css file: many thanks Steven.