Strange IE7 problems

height and duplicate characters

[Ashie73]

Hi Everyone,

I am trying to build a new website for a charity I work for, and I have created the site using Drupal and everything works fine, apart from IE7 (or in IE8 compatibility mode).

Towards the bottom of the site in the footer region two problems occur.

This screenshot should explain what I mean. The good example at the bottom, the IE7 screenshot at the top, with the red line to indicate the two problems.

[Edit]
Firstly, the dashed line in all browsers, apart from ie7 shows below the social network icons, but in ie7 is halfway behind the icons. The line is a bottom border for that content, so I don't understand why it shows inside the content. I assume this is some CSS issue I can fix?

The second though is a weird problem, right at the bottom is two letters, the 'es.' which is not in the view source code, it is the last two letters from the last line of text, ie. from the words 'websites.' which is somehow mirrored again. I am not sure what this is?

Like I say, I have tested in other browsers, Firefox, Chrome, Opera, IE8 and IE9 and the site displays fine, apart from IE7 which sadly we still have lots of people using, so I would like to fix if possible.

Any ideas please?

Thank you,

Ashley.

[edited by: alt131 at 7:31 pm (utc) on Jul 9, 2011]
[edit reason] Thread Tidy - 404 [/edit]

[alt131]

Hi Ashley, and welcome to WebmasterWorld :)

I don't mean to overload you on your first visit, but the problem was really interesting, so may have probed a bit deeper than needed. I hope not - and let me know if this helps, or you'd like the short version ;)

The social icons are on the <li>>st items, while the dashed line is the border-bottom for the div contain the <ul>. The containing div is div class="social" with a total height of 20px, and ie7 is obeying that height so the div is not expanding to contain the taller list-item content. Well, that's one reason ;)

Others will have different suggestions, but a fast and easy way to avoid drilling through the code that does not affect other browsers is to change the div.social's height. Something like:
.socal {height:auto}
Put that rule in the last stylesheet that's being imported, or into the inline style-sheet - somewhere it will be read after the earlier rule that sets height:20px.

The repeating "es" seems to be a "duplicating characters bug" that was supposedly fixed in ie 7. Fascinating to see it in action!
In case my explanations wouldn't make sense, this is what you have in your html:

<div class="footercopyright">
<p> ......websites.</p>
</div> </div>
</div> <!-- /block --></div>
<!-- end region --> </div>
</div>
<!--end framework container-->

... and the "es" of "websites" is being painted out a second time below the para.

The cause of this will be found in the code, but again, unless you want to unpack it all, one "fix" is to place an element at the end of the para and then hide it using display:none. As this is ie7 specific, even better hide the whole thing using a conditional comment like this:
<div class="footercopyright">
<p> ... websites. <!--[if IE 7]> <i>End</i><![endif]--> </p>
</div>
And add
.footercopyright i {display:none} to your css

More commonly suggested methods are to remove comments, or set the element to display:inline, but neither worked here. (Note that removing the HTML comments in turn caused more and more pairs of letters to be duplicated - very entertaining :) )

I would emphasise these solutions are "hacky", not "best practise" and not something I'd "recommend". But I've assumed one of your goals is to avoid spending hours and hours unpacking and re-writing the code (I hope I have the correct), so I've suggested them because they do provide a quick and simple fix.

Finally, I had some error messages about a dangling combinator in one of the jquery files. The css validator didn't identify the issue, instead complained about an invalid seperator. These will also be helping to create your issue - but best I can tell the above fixes still work.

[Ashie73]

Hi alt131,

Thank you so much for your detailed help, both of which helped me immensely, and seems to have fixed the problems.

For the duplicate characters bug, I could not get the conditional IE comment to work, but your identification of the bug for me allowed me to Google and the same fix, but using a hidden <span> worked perfectly.

<div id="footer">
   <p>This element was duplicating characters.</p>
   <span class="ie_fix"><!-- do not delete this,
   it fixes the IE duplicate characters --></span>
  </div><!-- end footer -->

.ie_fix {
  display: none;
}

Thank you again for your help, which after hours of hair pulling you have helped fix in minutes, thank you.

Ashley.

[alt131]

Delighted it helped :)

For the duplicate characters bug, I could not get the conditional IE comment to work

Extremely odd - it was tested before posting, and tested again since reading this. It works!
Must be a case of those badges on websites that say "Best viewed on my computer" ;)

My suggestion was a modification of the <span> solution, just "tidied" up by:
# using an <i> to reduce the amount of code - they're both inline elemnts so work the same way
# using a conditional comment so the code was only sent to the problem browser (although in hindsight, probably best sent to ie6 as well)
# put inside the <p> so the fix was located right beside the "problem" rather than putting it outside the <p> where it is dangling on its own

I suspect the last is most likely to have caused the failure

But grand you have a solution - and thanks for taking the time to post the code that worked as well :).