Forum Moderators: open
The page is supposed accomodate any resolution down to 800 x 600 pixels, growing or shrinking as necessary. It does this perfectly in Netscape Navigator and Firefox. However, when I opened it up in IE, I got the horizontal scroll bar at something like... 1100 pixels browser width (as opposed to about 770 pixels what it was supposed to be).
Here is the code (I've cut out all the unnecessary stuff)
<TABLE BGCOLOR="#6491EA" BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" HEIGHT="100%">
<TR>
<TD COLSPAN="5" HEIGHT="132" WIDTH="100%" VALIGN="center" ALIGN="left">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" HEIGHT="100%">
<TR>
<TD HEIGHT="132" WIDTH="770"><IMG SRC="graphics/header/gai_banner.jpg" HEIGHT="132" WIDTH="770" BORDER="0"></TD>
<TD HEIGHT="132" WIDTH="100%" BACKGROUND="graphics/header/gai_banner_clouds.jpg"> </TD>
</TR>
</TABLE>
I've isolated the problem to the line in bold. In all other browsers, as I said, it works properly. The second cell in that table there shrinks all the way down allowing for users with 800 x 600 resolution to not have a horizontal scroll bar.
In internet explorer, for reasons that for the life of me I cannot explain, it adds about 300 pixels of blank space to the right side of the image in the bolded line, and it won't shrink beyond that point! It's as if internet explorer thinks that the image is 300 pixels wider than it really is.
Someone please help x.x Am I missing something really simple?
If necessary, I can post the code for the whole page, let me know if you need to see it in order to troubleshoot this.
I've isolated the problem to the line in bold.
Do you mean that if you removed the line -- maybe replacing it with an empty <td></td> -- the scrollbar disappears?
Before trying to debug, you should always validate the html and css. Your snippet above, for instance, has some errors (valign uses "middle" not "center" as an example). So validate first, and only then work on rendering issues. Otherwise you can drive yourself madder than King George.
W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]
You're supposed to be able to shrink the browser down, and it will adjust the page until it runs into something of a fixed size, then it will give you the horizontal scroll bar. The problem is that IE is treating the image from the bold line as if it's ~1100 pixels wide instead of 770 pixels, and I have no idea why. The other browsers recognize the image as being 770 pixels and can shrink down accordingly to accomodate 800 x 600 resolution. If I remove the image, IE can shrink the page all the way down. If I reduce the width of the image by, say, 200 pixels, IE can shrink the page down 200 pixels further, but it still has that extra chunk of space next to the image that's not supposed to be there.
Does anyone have any idea what's going on?
But one fix when just this bug is in play is not to use any width="100%" attributes on your container elements. Try changing those to width="95%" or something like that (or even eliminating them altogether) and see what effect it has. You may uncover some valuable clues. Table cells will grow to accomodate their content anyway, no matter what width you declare or don't declare, so don't worry about that.
What seems to go on in some situations is that the IE rendering engine includes the width of the scrollbars as part of 100% - but that makes the content extend beyond the viewable screen real estate.
...not to use any width="100%" attributes on your container elements. Try changing those to width="95%" or something like that (or even eliminating them altogether)
OK - I think I have the fix and it's in line with that advice I gave above. It's the width=100% attribute in the very FIRST <td> section -- the one that contains the nested table.
<TABLE BGCOLOR="#6491EA" BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" HEIGHT="100%">
<TR>
<TD COLSPAN="5" HEIGHT="132" WIDTH="100%" VALIGN="center" ALIGN="left"><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" HEIGHT="100%">
<TR>
<TD HEIGHT="132" WIDTH="770"><IMG SRC="graphics/header/gai_banner.jpg" HEIGHT="132" WIDTH="770" BORDER="0"></TD>
<TD HEIGHT="132" WIDTH="100%" BACKGROUND="graphics/header/gai_banner_clouds.jpg"> </TD>
</TR>
</TABLE>
Just remove that attribute altogether -- there and in any other instances of <td> further on in the code that fall into that table column -- and IE will behave as you expect. IE was misinterpereting width=100% and forcing a wider display than needed. It may be IE6, but the rendering engine has some code that's a lot older than that version number indicates!
