Lets see if I can describe this problem, let me appologise for sounding long winded.<br />
<br />
If I create a table with width=500 and put an image inside that table with width 600 the table will then be 600 wide.<br />
<br />
If my web browser window is open to 500 px wide and there is no images in the table (or a small image) I do not have a horizontal scroll bar, if the image is in the box there is a horz. scroll bar. That at least is the theory.<br />
<br />
Now this is the problem. For SOME images (sometimes .jpg sometimes .gif, I'll give page urls later, and only in IE on Windows. Netscape, Mozilla, Opera all work fine) where the image width is less then 500 (for the above example) the "table" is still 500 px (can be tested by setting the bg colour) and the image fits nicely into the table, BUT, there is a horizontal scroll bar.<br />
<br />
Even if we remove the table, but include the image in a normal HTML page, that otherwise normal HTML page now has a width greater then the image, even if nothing else "forces" the page to have a larger width then the browser is open to.<br />
<br />
It is as if there is a hspace=100 in the img tag (which there isn't, as demostrated by putting the image in a table with no set width) In the case where the image is put inside a table, the "hspace" effect appears outside of the table. That is, the table now appears to have a hspace=100, or I suppose in the case of a table a large cellspacing or cellpadding number, but only on the right side, not the left, top or bottom. In any case the extra "whitespace" is only observed to the right of the image.<br />
<br />
Also it is interesting to note that the image viewed alone in IE views fine.<br />
<br />
Here are some urls. I have set the border=1 in the following examples so you may see the "width" of the image. To see the effect, resize your window so that it is as large as the image (plus the navigation on the left) and no larger. Notice the horizontal scroll where there shouldn't be. You may ask after all this, is that really a problem? Yes, check out the following urls to see why:<br />
<br />
image url: <!-- m --><a class="postlink" href="http://www.petrarch.petersadlon.com/images/sonnet_timeline.g">http://www.petrarch.petersadlon.com/ima ... timeline.g</a><!-- m --><br />
<br />
the image in an html page:<br />
<!-- m --><a class="postlink" href="http://www.petrarch.petersadlon.com/test1.html">http://www.petrarch.petersadlon.com/test1.html</a><!-- m --><br />
<br />
The image again in an html page, but with no text, notice it is not the text on the pages which cause the problem:<br />
<!-- m --><a class="postlink" href="http://www.petrarch.petersadlon.com/test2.html">http://www.petrarch.petersadlon.com/test2.html</a><!-- m --> <br />
<br />
A webpage from the site, notice it is not the top or bottom navigation causing the problem:<br />
<!-- m --><a class="postlink" href="http://www.petrarch.petersadlon.com/petrarch.html">http://www.petrarch.petersadlon.com/petrarch.html</a><!-- m --><br />
<br />
<br />
I'll show 2 other pages as well:<br />
<br />
no problem: <!-- m --><a class="postlink" href="http://www.petrarch.petersadlon.com/pictures_petrarch.html?pic=petrarch%5f60%2egif">http://www.petrarch.petersadlon.com/pic ... 5f60%2egif</a><!-- m --><br />
<br />
problem: <!-- m --><a class="postlink" href="http://www.petrarch.petersadlon.com/pictures_petrarch.html?pic=petrarch%5f63%2ejpg">http://www.petrarch.petersadlon.com/pic ... 5f63%2ejpg</a><!-- m --><br />
<br />
Notice in the above 2 pages, it is the smaller image which causes the problem. Besides the image at the top of the page the two pages are exactly the same.<br />
<br />
I have tried everyhting I could think of to fix this problem. I even considered the images were somehow corrupted, I've "re-saved" booth "good" and "bad" images, resized, cut and paste.... good images remained acting normal, bad images remained bad, which leads me to believe it is IE which is the problem?<br />
<br />
I have tested this on other computers as well, and the problem is still there (but only in IE). Strangely though I have not seen this effect on other websites (though I haven't really looked that hard).<br />
<br />
Ok, I think the describes the problem well enough? Anyone else ever see this? Any idea how to fix it?<!--content-->hmm I see a lot of things you are doing wrong.<br />
<br />
no doctype and you must have this.<br />
<br />
you do not quote any attributes or make your colors actual hex colors.<br />
<br />
<td bgcolor="#000000"><br />
<br />
you cannot have empty table cells. if you wnat it empty you must use as a space.<br />
<br />
add those and fix the doctype and you might just see a change. check your site in the validator at <!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m --><!--content-->thats a lot of code to try and look through, but on this page that I looked at:<br />
<br />
<!-- m --><a class="postlink" href="http://www.petrarch.petersadlon.com/test1.html">http://www.petrarch.petersadlon.com/test1.html</a><!-- m --><br />
<br />
the problem seems to be associated with a colspan attribute in the cell that displays the timeline image, its stretching across cells at the top of the screen and causing the horizontal scroll bar.<br />
<br />
I would look at the code at the top of the page, there are 5 cells, one of the cells is set to 100% width while the overall table is also set to 100% width:<br />
<br />
<TH width="100%" bgColor=#884400><FONT face="times new roman" <br />
color=#ffffaa>For a woman he would never know<BR>For a woman he could <br />
never have<BR>He should change the world forever</FONT></TH><br />
<br />
if you take out the width="100%" in the above cell, the page falls into place nicely.<!--content-->That 100% thing does seem to fix the problem a little, but not completely. Without repeating everything I posted before, but directing you to the series of pages I listed, you will notice that the petrarch.html page does not have the scroll bar when the above steps are followed. This would lead one to assume that the page template as a whole is ok.<br />
<br />
I should also point out that except for the content of the page, the rest of the pages are all exactly the same as they use a single template which they are generated from.<br />
<br />
By removing the 100% in the <th> tag it did get rid of a large section of the extra width, but there is still some there, not so much as before and probably livable, though I'd have to check it in more detail as there were several pages on the website causing similar problems.<br />
<br />
I am still not convinced though that this problem is not due to an IE bug, as this only appears to happen in IE6. Albeit possibly because of the page being a single large table with multiple columns and rows.<br />
<br />
Thanks again guys<!--content-->Your tables are set to 100% width and all body margins are set to 0, so the tables will always fill the screen. How can there be extra width if you are telling the tables to use all the width? (You had the horizontal scrollbar before because you told the tables to use more than 100% width.)<!--content-->
<br />
If I create a table with width=500 and put an image inside that table with width 600 the table will then be 600 wide.<br />
<br />
If my web browser window is open to 500 px wide and there is no images in the table (or a small image) I do not have a horizontal scroll bar, if the image is in the box there is a horz. scroll bar. That at least is the theory.<br />
<br />
Now this is the problem. For SOME images (sometimes .jpg sometimes .gif, I'll give page urls later, and only in IE on Windows. Netscape, Mozilla, Opera all work fine) where the image width is less then 500 (for the above example) the "table" is still 500 px (can be tested by setting the bg colour) and the image fits nicely into the table, BUT, there is a horizontal scroll bar.<br />
<br />
Even if we remove the table, but include the image in a normal HTML page, that otherwise normal HTML page now has a width greater then the image, even if nothing else "forces" the page to have a larger width then the browser is open to.<br />
<br />
It is as if there is a hspace=100 in the img tag (which there isn't, as demostrated by putting the image in a table with no set width) In the case where the image is put inside a table, the "hspace" effect appears outside of the table. That is, the table now appears to have a hspace=100, or I suppose in the case of a table a large cellspacing or cellpadding number, but only on the right side, not the left, top or bottom. In any case the extra "whitespace" is only observed to the right of the image.<br />
<br />
Also it is interesting to note that the image viewed alone in IE views fine.<br />
<br />
Here are some urls. I have set the border=1 in the following examples so you may see the "width" of the image. To see the effect, resize your window so that it is as large as the image (plus the navigation on the left) and no larger. Notice the horizontal scroll where there shouldn't be. You may ask after all this, is that really a problem? Yes, check out the following urls to see why:<br />
<br />
image url: <!-- m --><a class="postlink" href="http://www.petrarch.petersadlon.com/images/sonnet_timeline.g">http://www.petrarch.petersadlon.com/ima ... timeline.g</a><!-- m --><br />
<br />
the image in an html page:<br />
<!-- m --><a class="postlink" href="http://www.petrarch.petersadlon.com/test1.html">http://www.petrarch.petersadlon.com/test1.html</a><!-- m --><br />
<br />
The image again in an html page, but with no text, notice it is not the text on the pages which cause the problem:<br />
<!-- m --><a class="postlink" href="http://www.petrarch.petersadlon.com/test2.html">http://www.petrarch.petersadlon.com/test2.html</a><!-- m --> <br />
<br />
A webpage from the site, notice it is not the top or bottom navigation causing the problem:<br />
<!-- m --><a class="postlink" href="http://www.petrarch.petersadlon.com/petrarch.html">http://www.petrarch.petersadlon.com/petrarch.html</a><!-- m --><br />
<br />
<br />
I'll show 2 other pages as well:<br />
<br />
no problem: <!-- m --><a class="postlink" href="http://www.petrarch.petersadlon.com/pictures_petrarch.html?pic=petrarch%5f60%2egif">http://www.petrarch.petersadlon.com/pic ... 5f60%2egif</a><!-- m --><br />
<br />
problem: <!-- m --><a class="postlink" href="http://www.petrarch.petersadlon.com/pictures_petrarch.html?pic=petrarch%5f63%2ejpg">http://www.petrarch.petersadlon.com/pic ... 5f63%2ejpg</a><!-- m --><br />
<br />
Notice in the above 2 pages, it is the smaller image which causes the problem. Besides the image at the top of the page the two pages are exactly the same.<br />
<br />
I have tried everyhting I could think of to fix this problem. I even considered the images were somehow corrupted, I've "re-saved" booth "good" and "bad" images, resized, cut and paste.... good images remained acting normal, bad images remained bad, which leads me to believe it is IE which is the problem?<br />
<br />
I have tested this on other computers as well, and the problem is still there (but only in IE). Strangely though I have not seen this effect on other websites (though I haven't really looked that hard).<br />
<br />
Ok, I think the describes the problem well enough? Anyone else ever see this? Any idea how to fix it?<!--content-->hmm I see a lot of things you are doing wrong.<br />
<br />
no doctype and you must have this.<br />
<br />
you do not quote any attributes or make your colors actual hex colors.<br />
<br />
<td bgcolor="#000000"><br />
<br />
you cannot have empty table cells. if you wnat it empty you must use as a space.<br />
<br />
add those and fix the doctype and you might just see a change. check your site in the validator at <!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m --><!--content-->thats a lot of code to try and look through, but on this page that I looked at:<br />
<br />
<!-- m --><a class="postlink" href="http://www.petrarch.petersadlon.com/test1.html">http://www.petrarch.petersadlon.com/test1.html</a><!-- m --><br />
<br />
the problem seems to be associated with a colspan attribute in the cell that displays the timeline image, its stretching across cells at the top of the screen and causing the horizontal scroll bar.<br />
<br />
I would look at the code at the top of the page, there are 5 cells, one of the cells is set to 100% width while the overall table is also set to 100% width:<br />
<br />
<TH width="100%" bgColor=#884400><FONT face="times new roman" <br />
color=#ffffaa>For a woman he would never know<BR>For a woman he could <br />
never have<BR>He should change the world forever</FONT></TH><br />
<br />
if you take out the width="100%" in the above cell, the page falls into place nicely.<!--content-->That 100% thing does seem to fix the problem a little, but not completely. Without repeating everything I posted before, but directing you to the series of pages I listed, you will notice that the petrarch.html page does not have the scroll bar when the above steps are followed. This would lead one to assume that the page template as a whole is ok.<br />
<br />
I should also point out that except for the content of the page, the rest of the pages are all exactly the same as they use a single template which they are generated from.<br />
<br />
By removing the 100% in the <th> tag it did get rid of a large section of the extra width, but there is still some there, not so much as before and probably livable, though I'd have to check it in more detail as there were several pages on the website causing similar problems.<br />
<br />
I am still not convinced though that this problem is not due to an IE bug, as this only appears to happen in IE6. Albeit possibly because of the page being a single large table with multiple columns and rows.<br />
<br />
Thanks again guys<!--content-->Your tables are set to 100% width and all body margins are set to 0, so the tables will always fill the screen. How can there be extra width if you are telling the tables to use all the width? (You had the horizontal scrollbar before because you told the tables to use more than 100% width.)<!--content-->