Solved

IE only a div expands for no apparent reason

Posted on 2011-02-26
5
435 Views
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.
0
Comment
Question by:jasimon9
  • 4
5 Comments
 

Author Comment

by:jasimon9
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.
0
 
LVL 16

Expert Comment

by:s8web
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.
0
 

Author Comment

by:jasimon9
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.
0
 

Accepted Solution

by:
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.
0
 

Author Closing Comment

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

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Several part series to implement Internet Explorer 11 Enterprise Mode
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

758 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now