Link to home
Start Free TrialLog in
Avatar of jasimon9
jasimon9Flag for United States of America

asked on

IE only a div expands for no apparent reason

I have a certain page which is not generally available on the web as it is an administrator page. All the main browsers except IE render it as expected. But for some reason IE expands the div. There is no apparent content that is forcing the div to expand, so it is a mystery.

For example, in Chrome Developer Tools the content portion of the div is 488 x 647. However in IE Developer Tools, the layout of the same part of the div is 668 x 865.

In the past I remember struggling with various hacks regarding such things in IE. I am hoping for some quick advice without having to give a link to the page, because as I said, it is not a page generally available to the public.

Having said that, I think I will go ahead and upload some useful screen shots. As you can see there is a bunch of extra space added at the right side of the box for IE. I have gone down the page and there is nothing down below in the content that should be forcing the extra space to be added that is readily apparent.

 User generated image User generated image
Avatar of jasimon9
jasimon9
Flag of United States of America image

ASKER

I continued to search on this problem and found advice at http://brenelz.com/blog/fix-table-cell-and-max-width-bug-in-ie8/ which seems to describe the exact problem. The solution given was to add a specific width and table-layout:fixed to the <table> tag.

I already had a specific width, but adding the table-layout:fixed solves the specific problem. However, I merely reveals another underlying problem, perhaps the real cause of the original problem.

The page has two columns of "display ads" for a number of different advertisers. As before, the layout works as expected in the main browsers other than IE. In IE8, after adding table-layout:fixed in quite a few of the ads, various of the images are displaced to the right, about the amount needed to expand the div as IE does without table-layout:fixed. However, this displacement to the right does not happen without the table-layout:fixed. They stay in the right place, but just have extra white space added to the right of the div. This is very odd behavior to say the least, if not an outright bug.

I am thinking it might be related to absolute positioning, which I will have to check for the ads that strangely now does not expand the divs, but does offset the contents.
Avatar of s8web
s8web

Would it be possible for you to provide your code? I understand you can't link to it, but we need to be able to replicate your problem to troubleshoot it. Screenshots don't allow us to replicate your problem.

It's highly likely that something else on your page is causing your display issue.
I loaded the page and did a "view source" and could upload that file I suppose. It is a 2.1 MB file.

PLEASE NOTE: this page is for our internal developers and not available to non-administrators of the web site, so please accept the fact that the file is quite large and it is not a problem!

On the other hand, another workaround has occurred to me which might make the problem either go away or at least allow focusing on the cause. The normal users of the site have pagination, which only displays 8 images per page. The "all pages with inclusion of all expired ads" is really not needed. I could simply enhance the page to allow pagination even when the expired ads are included.

I might dabble with such a workaround to see if that gets rid of the extra space in IE, or at least confines it to a subset of the pages.

Please confirm that you would really be willing to look at 2MB of HTML.
ASKER CERTIFIED SOLUTION
Avatar of jasimon9
jasimon9
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Accepting my own solution as it perfectly solves the issue.