[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 512
  • Last Modified:

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.

 Shows extra space at top right inside border Show top left of border without extra space added.
0
jasimon9
Asked:
jasimon9
  • 4
1 Solution
 
jasimon9Author Commented:
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.
0
 
s8webCommented:
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.
0
 
jasimon9Author Commented:
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.
0
 
jasimon9Author Commented:
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.
0
 
jasimon9Author Commented:
Accepting my own solution as it perfectly solves the issue.
0

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!

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now