IE overflow:auto problem

[gkornbluth]

I am trying to do something that should be extremely simple but am going nuts.

I'm trying to display one graphic, one of Dynamic Drive's simpler javascript slide shows, and a sign up form on the page at: http://98.130.249.212/index4.php

Because of the client's overall design, I'm using a table with an auto scrolling cell to contain these elements.

Should be very straight forward, and in FF everything scrolls as it is supposed to.

But when viewed in IE, the js slide show stays in a fixed position and only the graphic and the form scroll.

I've tried playing with divs, nested tables, etc.

I'm lost...

Thanks

Jerry Kornbluth

[acoder]

The first step is to sort out these errors. Use a strict doctype to avoid IE going into quirks mode and move your script into an external file and link to it.

[gkornbluth]

Thanks for your quick response.

I hate to sound dense, but I get the feeling that even your suggestions are way over my (programming) head.

If you could take this further, I'd appreciate it. If not, I'll understand.

Jerry

[acoder]

The suggestions may not directly solve your problem, but it'll make browsers behave more consistently (well, almost) which will help.

Read the following articles to get an idea what I'm talking about:
The doctype or DTD
Validate your markup early and often

Put your script in a separate file and link to it using script tags. This will prevent some of the validation errors. This is not completely necessary (i.e. you can include script on the page without causing validation errors), but it's good practice to keep markup and script separate anyway.

[gkornbluth]

thanks, I've followed your suggestions regarding doctypes but they didn't fix the problem.

I can't figure out how to move the js to a separate file because it also contains php code for a content management program that inserts specific image file name information from an external database.

If I replace the js (not the script but the code that makes the slide show appear in a particular place on the page as in the example below) with enough placeholder text, the scrolling works fine, so it must have something to do with IE and js in a scrolling window.

Here's the code from that section (from the IE source)

[HTML]<div align="center" style="width: 676px; height: 436px; overflow: auto; padding:4px; ">

<table width="95%" border="0" cellpadding="0" >
<tr>
<td align="center"> <img src="/images/headlines/Connect-With-Us.png" alt="Connect with us!!!" /><br />
<br />
</td>
</tr>
<tr>
<td align="center"> <script type="text/javascript">
//new fadeshow(IMAGES _ARRAY_NAME, slideshow_width , slideshow_heigh t, borderwidth, delay, pause (0=no, 1=yes), optionalRandomO rder "R")
new fadeshow(fadeim ages, 450, 300, 0, 4000, 0)


</script><br /><br /></td>
</tr>
<tr>
<td align="center">
<form method="POST" action="http://12.345.678.910/cgi-bin/easylist/subscribe.cgi">
<span class="body-text-bold">STAY INFORMED</span><br />
<span class="body-text">Enter Your e-mail address below and we'll make sure that you're kept up to date with information about our organization, special events, workshops, and more:</span><br />
<input type="text" name="email" size="29" />
<br />
<input type="radio" value="Y" name="sub_statu s" checked />
</font><span class="small-text">Subscribe </span>
<input type="radio" value="N" name="sub_statu s" />
<span class="body-text">Unsubscri be</span><br />
<span class="body-text">
<input type="submit" value="Submit" name="B1" />
<br />
We'll never sell or share our e-mail list </span>

</form></td>
</tr>
</table>




</div>[/HTML]

[acoder]

The problem is with the slideshow code. IE is regarding it as absolutely positioned, i.e. not in the document flow. You need to position it relatively.

Make sure you're in strict mode. I don't know if you've made another version of the page that you linked to earlier.

[gkornbluth]

With the exception of changng the doctype to "strict", it's the same link.

http://98.130.249.212/index4.php

So much to learn, so little time...

Thanks for this.

Jerry

[acoder]

You'll need to make it strict and validate first.

For your problem, you need to change the position:absolu te to position:relati ve. I haven't tested, but that may help.

[gkornbluth]

thanks for all your help

Jerry

[acoder]

So did that solve the problem?