View Full Version : Dreaded Horizontal Scroll in IE only

02-18-2005, 03:48 PM
I have created a set of nested tables where both widths are dynamic based on percentage. The outer table is 90% and the inner table is 98% of that... sounds simple right?

In Firefox it works as it should but for some stupid reason in IE I end up with a horizontal scroll whenever the page is long enough to require a vertical scroll. In other words, I only get a horizontal scroll when the vertical scroll appears. If both tables are based on percentages why the !@#$ is it creating a horizontal scroll rather than reducing the size of the table by however wide the vertical scroll is?

Let me add that there is nothing in either table that has a set width (no images or set pixel widths). Everything including the tds are flexable widths.

02-18-2005, 04:04 PM
Don't forget that border, padding and margins count towards total width for your elements.

If your element is 100% wide, and has a 1px border on each side, then it's going to be ((100% of the parent's content width) + 2px) wide in total.

02-18-2005, 04:12 PM
The outermost table is 90%... not 100%. 90% plus 3 pixels should not cause a horizonal scroll.

The outside table has the following class...
.table {background-color:#eeeeee; border-width:1px 2px 3px 1px; border-style:solid; border-color:#999999;}

it looks like this

<table width="90%" border="0" cellpadding="2" cellspacing="0" align="center" class="table">
<td><img src="<TMPL_VAR NAME="product_image_location">/white1.gif" alt="" width="1" height="5" border="0"></td>
<form name="StoryAddForm" action="<TMPL_VAR NAME="curr_script">" method="post">
<input type="hidden" name="mode" value="save_add">
<input type="hidden" name="prev_mode" value="<TMPL_VAR NAME="prev_mode">">
<input type="hidden" name="id" value="<TMPL_VAR NAME="id">">
<input type="hidden" name="is_auto_updated" value="0">
<table width="98%" border="0" cellpadding="2" cellspacing="1" align="center">
<td colspan="2" class="pgheading">Add Story</td>

02-18-2005, 04:26 PM
It might be easier to set your table width using CSS than in your actual code.


02-18-2005, 04:45 PM
The outermost table is 90%... not 100%. 90% plus 3 pixels should not cause a horizonal scroll.
Sorry, those figures were just an example. I should have made it more obvious.

I'd go with whizard's suggestion for starters. The less style there is in your HTML, the easier it will be to spot problems with the CSS (although to be honest "IE is spazzy" is probably the only problem here).

02-18-2005, 05:16 PM
Yeah, you're right, the width should go into the css rather than the html. I just don't think that will solve the problem though...

Damn I hate IE!

02-18-2005, 05:56 PM
A very easy hack for dealing with IE is this:

element {IE properties}
html>body element {"real" properties}

IE uses the first rule and ignores the second one. Proper browsers will take the first rule then the second rule, discarding any properties that the second rule over-writes.

02-18-2005, 06:17 PM
thanks for the idea... I'm not sure of the best way to implement it though. If a hard coded 90% gets screwed up in IE I'm not sure I want to go messing with multiple classes for various elements within my css.

02-18-2005, 06:21 PM
What's the parent element for the table?

Also, are you sure it's the table causing the problem?

02-18-2005, 06:59 PM
Is this part of a frameset? IE will do some odd stuff with scrolling when inside a frameset. When IE's vertical scroll bar appears inside a frame it reduces the total width and all those elements with width="x%" will be re-rendered. However if you have a fixed width element that had say a px or two clearance before the vertical scroll took screen space then you WILL cause a horizontal scroll.

So what I'm getting at is if its a frame check your fixed width elements and like Sayonara said "Don't forget that border, padding and margins count".

This is just a guess, without seeing all the code I can only do that.

02-18-2005, 07:07 PM
good guess... it is within a frameset and it's not an option to change that unfortunately. With the exception of a few small images (transparent 5x1px spacers) there are no set widths anywhere on the page. Every table and element within is set through percentages.

Do I know for a fact that the table is causing the problem... not really but I have a lot of pages with the exact same structure and only the pages with a vertical scroll have a horizontal one... and only in IE. The outer most table is the only thing that even comes close to having a width that might cause a horizontal scroll.

02-18-2005, 07:35 PM
At a time like this I would start adding boarders to everything so I could see if something jumped out. Thats about all I can think of now :(

02-18-2005, 07:54 PM
Don't forget table cells will often expand to accomodate content. There could be something in a table that's forcing the width to increase.

What you need to do is experiment with a test page by removing elements sequentially until the scroll bar vanishes.

02-18-2005, 08:28 PM
Thanks for the advice everyone... I have been testing with borders and I have yet to find anything that should be causing this. There are some pages I where there is only 1 td with a 2 digit integer (that's it!) but there are enough rows to force a vertical, and thus horizontal, scrollbar.

I'm on the bandwagon to boycot IE :mad:

03-09-2005, 07:47 PM
This same problem has been bothering me too - soooo frustrating. And finally, a solution... in the frame, set scrolling="yes" instead of scrolling="auto"
I know this is not ideal, however it seems better to have a sometimes unnecessary scroll on the right than ever having a horizontal scroll.
And if you find any other way around this, let me know!

03-10-2005, 01:50 AM
Thanks utopixe - I actually figured out my problem... It was IE itself! (Go figure)

Here is a great article explaining the problem/solution I had. In short it is the was IE6 reads the DTD strict tags.