Topic: embedding problem with internet explorer

I try to embedding a gallery in an existing html page. I used the follwing code to paste it into the html page.


<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
simpleviewer.ready(function () {
simpleviewer.load("sv-container", "90%", "85%", "252525", true);
});
</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->


As you can see I edit the with and height percentages. Now everyting is working fine in Google Chrome and in Firefox but not working at all in Internet Explorer (all browsers are updated new versions). In Internet Explorer there is a problem with the height. It seems to be no more than 5% or less. In other words the gallery is not showing at all. On the support page a read this:


Using Percentage Heights

When setting SimpleViewer's height as a percentage, it may be necessary to set the parent div's size as inline CSS. This is due to inconsistencies in how different browsers report div sizes. For example: if you place the sv-container div inside a parent div called sv-parent and want the sv-parent div to have height of 50%, you should add the height as inline CSS like this:

<div id="sv-parent" style="height:50%">
    <div id="sv-container"></div>
</div>


So my question is if I can solve this problem by using this extra code? And the big question is where do I have to put this code?

For an example of the problem visit this url in Internet Explorer:

http://www.alwinkoops.nl/album4Dtest2

I hope somebody can help me soon.

Alwin

Re: embedding problem with internet explorer

First of all, your page does not close the <div align="center"> div (and there is no 'height' assigned to it).
Change:

<div align="center">

... to:

<div align="center" style="height: 100%;">

... and place a closing </div> tag immediately before the closing </body> tag.

The only two elements on your page are a <table> and the gallery.
You have specified the height of your gallery to be 85% of the browser window height.
Therefore, your table should take up the remaining 15%, so change:

<table border="0" width="90%" bgcolor="#000000" style="border-collapse: collapse">

... to:

<table border="0" bgcolor="#000000" style="border-collapse: collapse; width: 90%; height: 15%;">

You may also need to add the following to the <head> section of your page:

<style type="text/css">
    body, html {
        height: 100%;
    }
</style>
Steven Speirs
SimpleViewer Support Team.

Re: embedding problem with internet explorer

Hi Steven, thanks for your reply!


First I have changed <div align="center">  to  <div align="center" style="height: 100%;">  like you said.


Second I changed <table border="0" width="90%" bgcolor="#000000" style="border-collapse: collapse">

to <table border="0" bgcolor="#000000" style="border-collapse: collapse; width: 90%; height: 15%;">


That second action didn't work out well because the table was now set to 15% and stretched itself wich I didn't like. So I changed it into this:  <table border="0" bgcolor="#000000" style="border-collapse: collapse; width: 90%; height: 60px;">

So I changed the height from 15% in to 60 pixels to get a fixed height from the table again.



Then everyting worked fine in Firefox, Chrome and Internet Explorer!! Thanks a lot!!


I dont not add this code in the header section because then it didn't work again, so I guess I don't need to ad this code?

<style type="text/css">
    body, html {
        height: 100%;
    }
</style



The only thing I notice is that the height is slightly different in IE than in Firefox and Chrome. The height in IE is a little bit les, so the album is just a little bit bigger in Firefox and Chrome. But that's a very little different so that's okay.


Now I still have some questions:

-  why embedding the code in an html page is causing so much trouble in Internet Explorer while working just fine in other browsers without all these adjustments?


- I don't have to add the code

<style type="text/css">
    body, html {
        height: 100%;
    }
</style

in the header section?

- could you please take one more look at the page to see if all the code is okay now?



Thank you very much!

Alwin

Re: embedding problem with internet explorer

I dont not add this code in the header section because then it didn't work again, so I guess I don't need to ad this code?

If setting all your container heights in percentages, it is a good idea to give a height to all containers (up to and including the 'body' and 'html' elements).

The only thing I notice is that the height is slightly different in IE than in Firefox and Chrome. The height in IE is a little bit les, so the album is just a little bit bigger in Firefox and Chrome. But that's a very little different so that's okay.

This is due to your page consisting of two elements whose heights are defined by both an absolute pixel value and a percentage.

why embedding the code in an html page is causing so much trouble in Internet Explorer while working just fine in other browsers without all these adjustments?

It is probably due to the inconsistencies in the heights of your containers (it is difficult to add 60px + 85% and get a meaningful answer) so different browsers may interpret this differently, resulting in slightly different layouts.
If you wish your table to have a fixed height and for the gallery to dynamically resize to fill the rest of the page, you would need to determine the height of the browser window, subtract 60px from it and use the remainder as the height of the gallery.
This can be achieved using JavaScript and there is a example of 'Using a Resizable Gallery with a Header' which can be downloaded and modified to suit your needs here: http://simpleviewer.net/simpleviewer/su … #resizable

Steven Speirs
SimpleViewer Support Team.

Re: embedding problem with internet explorer

Steven,

I did take a second look in IE, Chrome, Firefox, Opera and all is working fine.

On an iPad, Android phone the html5 album is showing okay too.

So why should I change anything at this point?

I downlloaded the resizable gallery examples but don't know what to do with it.

So my final question is: can i use everything like it is right now without problems in regular browsers like a mentionmed above?

Thanks!

Re: embedding problem with internet explorer

I did take a second look in IE, Chrome, Firefox, Opera and all is working fine.

On an iPad, Android phone the html5 album is showing okay too.

So why should I change anything at this point?

If you are happy with the way your web page looks in all the browsers you have tested, then there is no need to change anything.

So my final question is: can i use everything like it is right now without problems in regular browsers like a mentionmed above?

Yes... almost. I notice that your web page does not use a Doctype Declaration. Please see here for details: http://www.w3.org/QA/2002/04/valid-dtd-list.html
You should place the following code at the very top of your HTML document (before the opening <html> tag).

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

Steven Speirs
SimpleViewer Support Team.

Re: embedding problem with internet explorer

Steven,

I did try to add

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

but the result of adding that code is that the table is not 60px height anymore. Now it looks like the table is working in %.

And that's not what I want, I want the table to be fixed.

As I said before everything is now working fine (without the doctype) in different browsers. So how important is it to add the doctype code?

Re: embedding problem with internet explorer

All HTML documents should start with a Doctype Declaration in order to tell the browser which set of standards to use. Any page without a Doctype Declaration will be rendered in quirks mode which may result in unpredictable behavior.
Likewise, when validating an HTML document to check for errors (with a service such as the W3C Markup Validation Service), the validator must know what Doctype the page uses in order to successfully check the code.
Ideally, you should choose a suitable Doctype Declaration and iron out any errors.
However, if you have tested your web page and are happy with the results in the devices and browsers you have used for testing, there is nothing stopping you from using your web page as it is. However, there is no guarantee that a future version of a browser may render your page differently (though your page is not too complex so you may well be safe).

Steven Speirs
SimpleViewer Support Team.