Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


IE only a div expands for no apparent reason

Posted on 2011-02-26
Medium Priority
Last Modified: 2012-08-13
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.

 Shows extra space at top right inside border Show top left of border without extra space added.
Question by:jasimon9
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4

Author Comment

ID: 34989645
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.
LVL 16

Expert Comment

ID: 34991380
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.

Author Comment

ID: 35002781
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.

Accepted Solution

jasimon9 earned 0 total points
ID: 35007491
I have stumbled across a solution after giving up on it!

As mentioned above, while adding table-layout:fixed helped the immediate issue in IE of extra space in the right column, it exposed the underlying problem of a problem in IE with absolute and relative positioned elements. If the positioning was removed, then in IE the layout was fixed. However, this would require a lot of useless rework, and technically that positioning was required in the compliant browsers.

So I decided to live with the extra space as the lesser of two evils. But in the process of backing out several of my attempts to fix the issue, I decided to leave only one of those attempts in to see what it did by itself. Apparently it is the correct fix for IE.

I read about the fix somewhere while trying to search for solutions. Here it is: the two column layout of ads has in a width in the td of 475.  The fix is to additionally insert a div just instead each td with a CSS width of 475px. Just this step fixes the issue for IE, while leaving Firefox, Chrome and Safari rendering properly as they do without this extra div.

So this is the solution: insert a div with a width inside the td.

Author Closing Comment

ID: 35045438
Accepting my own solution as it perfectly solves the issue.

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Several part series to implement Internet Explorer 11 Enterprise Mode
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
Suggested Courses

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question