• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 279
  • Last Modified:

Text disappears in IE

I have a web page at http://www.rephunter.net/pricing.php 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?
  • 5
1 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

jasimon9Author Commented:
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.
jasimon9Author Commented:
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?
Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

jasimon9Author Commented:
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.

jasimon9Author Commented:
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.
jasimon9Author Commented:
I removed only the relative positioning on the sub-h4 div, as the other positioning was needed, as described in my comment.

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

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