Internet Explorer: Text format/layout overlaps


#1

While my landing page looks fine on Chrome and Mozilla, the text is a mess on IE:
http://screencast.com/t/7lOi2ZCcuGkC
http://screencast.com/t/U5Eb0N3AhfpG
http://screencast.com/t/94talG21SUQw

I also have a table that looks very odd.
Correct: http://screencast.com/t/40IGRpja
Incorrect (IE): http://screencast.com/t/AhLJd0o41k2e

Again, things look fine on Chrome and Mozilla. It only displays poorly on IE.

Thanks in advance for any help!


#2

Hi Jay, have you unpublished the page and then republished it? And cleared your cache before reviewing the page? That’s all I can suggested. Hope it helps! :-) 


#3

Hi Jay, 

Based on your screenshots, it looks like your line height is messed up.
Chrome and Firefox can adjust but for some reason IE is messing it up. 

Look at the code for the text elements and see whether the line height is properly set. Also, inspect the code and see if you have some CSS overriding it. 

If you are still having trouble, drop a line to the folks at Unbounce support and they can go into the actual page to take a look. 

Best,
Hristian


#4

Good point Hristian, I was assuming that this was already in place! lol.


#5

Thanks Hristian! That fixed it!


#6

I should add that the table still looks funny in IE7 (looks fine in IE8 and above). I don’t think I’m going to bother with that one.


#7

Great work Jay! Glad you got there in the end! :slight_smile:


#8

UPDATE: Resolved

Thanks for the input, Hristian and Dan! Setting the line height was exactly what I needed to do.

I added this code to the stylesheet and the issue was solved:

&nbsp;&nbsp;<br />div.lp-pom-root .lp-pom-text span{<br />line-height: 26px;<br />}<br />

Additional notes if anyone is curious:

  1. I realized that our company computers default to IE7 whenever we view that specific page, even though we have IE11 installed. If I loaded the page in IE8, the text loads perfectly. (Go figure.)

  2. Added this code to the javascript, which actually didn’t work: 

  3. Finally added the line height code above, which finally did work!