If you want to skip my spewl and just go to the technical solution scroll to the bottom of this post: Just like any developer having the slightest bit of common sense, I use FireFox for the majority of my development. Especially when it comes down to testing and debugging my JavaScript code. So it was a normal crazy day and of course I’m plugging away creating a new page. Everything seemed fine (yes this is where the story goes bad)…that is…until I test my pages in Internet Exploder 6. What’s going on here? Why am I seeing copy from a tout twice? Hmmmm…says I. So I go back into my xHTML (shut up lol) just in case I accidentally pasted the copy for this tout twice. Nope. Not finding it. 20 minutes later: What the #*$!~ is going on here?! Ok, let’s start finding a solution I say to myself. I have a div > unordered list -> list items -> div[img] -> div[p] Seems basic enough. I had 7 list items within the <ul> all of which have a CSS rule assigned to them: ‘float:left; width: 200px;’ So I began stripping some out of there and after removing two <li>‘s I noticed the problem just seemed to go away. Ok so it MUST be one of the two I just removed. Got it. Awesome let’s do this I said. Put one in and ok it looks good to me. Put the last one in and BAM the same friggin’ thing again! What…the…HELL? So I looked at it again. This time I said, ok let me get rid of everything that I don’t need on this page. I like to make things easier for the Content Team to edit and recognize what they should be editing within the xHTML so I put comments when I believe they need to know what to touch and what NOT to touch. For each <li> I had a comment and it said something like “BEGINNING OF TOUT” and “END OF TOUT” things like that. So I decided to remove these out entirely for the time being and low and behold what do you think happened? The Ghost Text magically disappeared. After doing some investigating, it turns out that you cannot have two consecutive comments ‘<!- BEGINNING OF TOUT—> <!— END OF TOUT—>’ on floated nodes or elements. This problem only seems to occur in Internet Explorer 6 so it’s something that you’ll hopefully never have to deal with again in a few years lol. Fortunately Microsoft has blessed with an infite array of new issues to deal with due to their latest monstrosity of a browser, IE 8. I believe the 8 stands for “Ate Up”. It’s something my Drill Sergeant used to say…what am I talking about say, correction: SCREAMED in my face anytime I’d laugh at the fact that he just managed to say the word F*CK 18 times in a sentence that consisted of 21 words. http://ate-up.urbanup.com/877434
Task: In Internet Explorer 6 you’re noticing that random text is being duplicated somehow on your page. Cause: Most likely this is caused by consecutive html comments within floated block level elements in the DOM. Solution: A: In my situation I simply combined the two comments and made them into one. B: Remove the comments…duh right? C: Make use of IE’s conditional statements in your HTML (IE specific conditions) http://www.quirksmode.org/css/condcom.html