When using CSS float elements round text sometimes IE duplicates the last characters on a separate line beneath the end of the text. This is really confusing since the characters don't really exist if you check the HTML code. Another annoying thing about this problem is that the characters are not visible in Firefox, so you can't use Firebug for this. IE have some similar developer tools, but they are not even close to what you can do in Firebug.
Anyway the problem is not really connected to the CSS at all, even though you could solve it by changing your CSS style and not use floats. The problem lies in the use of many HTML comments. I found a great article by the CSS idiots describing the problem and the solution.
"Characters will get repeated when there are multiple HTML comments placed in between floated elements, also called as ghost text bug. First two comments have no effect, but each consecutive comment causes two duplicate characters. Three comments will duplicate three characters, four comments cause four repeating characters & six duplicate characters for five comments."
So the fix to the problem is really not to use too many comments in your code, alter your CSS not to use floats or make some kind of CSS fix as explained in the article.
I'm really getting fed up with these browser issues. I've worked with this stuff a long time now and checking the layout in five different browsers for bugs like this every time just doesn't feel like 2009, more something you would experience in the early 90's. I want a CSS standard that really works and can be used in all browsers. I can't wait to build real applications using Silverlight - I'll just have to speed up my own efforts in learning Silverlight before I use it in a live project.
No comments:
Post a Comment