I'm working on a pagination sort of thing, which is simply just a bunch of floated anchor-tags inside a div. Now, in IE7, it inserts empty text nodes here and there, seemingly at random, which breaks the layout.
Result:
Example of how it looks on different pages. Note the empty text nodes. Neat, huh?
CSS:
.nwsPaging {
width:200px; /* Have also tried fluid size */
height:30px;
display:block; }
.nwsPaging a {
width:auto; /* Have also tried fixed size */
margin:0 0 0 1px;
padding:2px 8px;
border:solid 1px #ccc;
background:#eee;
float:left;
line-height:20px;
display:block;
zoom:1;
vertical-align:top; /* Should not do any difference */ }
.nwsPaging a:hover, .nwsPaging .isActive {
background:#D150A1;
color:#fff;
display:block; /* Should be redundant, but just in case */
zoom:1; }
As you can see, I've tried some different things, including setting a fixed width for the container and the floated -tags, plus giving it hasLayout. The .isActive class has nothing special in it, and it makes no difference if I never add the class.
I had the exact same problem in a different system, however I can't remember how I fixed it. I don't have access to the code, and the inspector is no help.
Bonus info: The site is built on HTML5Boilerplate, which uses normalize reset CSS.
Edit: The markup is very simple, and although the tags are dynamically created, there should be no line breaks which could possibly create empty text nodes.
How the markup should be presented as parsed:
<div class="nwsPaging clearfix">
<a href="foo">Previous</a>
<a href="bar">1</a>
<a href="bar" class="isActive">2</a>
<a href="bar">3</a>
<a href="baz">Next</a>
</div>