Connecting Tech Pros Worldwide Forums | Help | Site Map

IE overflow:auto problem

Newbie
 
Join Date: Jul 2008
Posts: 5
#1: Jul 19 '08
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's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#2: Jul 19 '08

re: IE overflow:auto problem


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.
Newbie
 
Join Date: Jul 2008
Posts: 5
#3: Jul 20 '08

re: IE overflow:auto problem


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's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Jul 20 '08

re: IE overflow:auto problem


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.
Newbie
 
Join Date: Jul 2008
Posts: 5
#5: Jul 20 '08

re: IE overflow:auto problem


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_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder "R")
new fadeshow(fadeimages, 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_status" checked />
</font><span class="small-text">Subscribe </span>
<input type="radio" value="N" name="sub_status" />
<span class="body-text">Unsubscribe</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's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#6: Jul 20 '08

re: IE overflow:auto problem


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.
Newbie
 
Join Date: Jul 2008
Posts: 5
#7: Jul 20 '08

re: IE overflow:auto problem


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's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#8: Jul 20 '08

re: IE overflow:auto problem


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

For your problem, you need to change the position:absolute to position:relative. I haven't tested, but that may help.
Newbie
 
Join Date: Jul 2008
Posts: 5
#9: Jul 20 '08

re: IE overflow:auto problem


thanks for all your help

Jerry
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#10: Jul 20 '08

re: IE overflow:auto problem


So did that solve the problem?
Reply