Text disappears in IE

Posted on 2011-04-25
Last Modified: 2012-05-11
I have a web page at where in IE only some of the text disappears when the browser window is resized. I have uploaded two screen shots showing the problem.

Here is the page that way it is supposed to look:

 Page as it is supposed to appear
Here is the page showing the missing text:

 Page with missing text
The result in the second page can be produced in IE by sometimes just loading the page, and if that does not work, slightly resizing the browser window taller or shorter. Sometimes you have to play with it a bit to see the effect.

I have done some looking into this and it seems to be related to the "hasLayout" issue. In applying zoom:1 to the table or to the td, on my workstation working copy of the website that seems to be a solid fix. However, on any of our development or production servers, that fix does not seem to work.

Any suggestions on either how to apply hasLayout to fix the issue, or otherwise fix it?
Question by:jasimon9
    LVL 2

    Accepted Solution

    The problem is with .sub-h4 class. If you delete position:relative; in it and also remove the inline style of parent div (also position:relative;), then it works fine.
    <div style="position:relative;">
       <p class="sub-h4">Discount Plan: <span style="font.....

    Open in new window


    Author Comment

    Your suggestion could be useful. However, it does change the layout of the page, so I would have to come up with an equivalent layout using methods other than relative positioning. That should not be too hard.

    Unfortunately, when I went in today using IE, for the life of me, I cannot reproduce the issue! Therefore, I cannot test if removing the relative positioning corrects the problem.

    So I will have to play around with this more.

    Author Comment

    Might not be so easy to get rid of the positioning, because I see that it is used to effect the "cross-out of the price" with the red line. Relative positioning makes that pretty easy. The alternatives that come to mind are to perhaps use absolute positioning (which for all I know could have the same issue as relative positioning), or to create a graphic image, which is then an extra bit of photoshop work.

    But the relative positioning is such an easy solution, for all but IE.

    Any ideas why IE has this issue?

    Author Comment

    Actually there is absolute positioning on the "cross-out graphic", so it might be possible to remove all the relative positioning and just use margins, padding and that absolute positioning. However, on IE that parent has to be positioned for that to work. That's why the parent is positioned relative without any offsets.

    So because of that other IE "bug" (parent must be positioned), this fix may not work either.


    Author Comment

    Because the positioning is needed on the plan-detail div to prevent the other IE bug wherein positioning of the cross-out graphic requires the parent div to be positioned, I experimented with just removing the positioning on the sub-h4, and compensating for the layout using margins. This works pretty much as far as being able to retain nearly the same layout.

    Unfortunately, because the issue is intermittent anyway, it is relatively hard to reproduce the error, and thus hard to confirm that this fix is solid. However, it seems to be pretty solid in as much testing as is practical. So I am going to go with this fix award points.

    Author Closing Comment

    I removed only the relative positioning on the sub-h4 div, as the other positioning was needed, as described in my comment.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    I recently found myself in a Corporate Situation where the client had requested blocking access to any and all websites except his own Domain? Easy? I am sure this would be your answer but their requirement was, this has to be done without using…
    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
    How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

    745 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

    17 Experts available now in Live!

    Get 1:1 Help Now