Internal links reflowing document

Very strange phenomenon

[rewboss]

It's not serious, but it's weird. I just wondered if this is a known problem.

Using MSIE 5.0, I have a page all nicely laid out with CSS (yes, I'm getting there...). I put in an internal link, like this:

<a href="#note1">See note below</a>

When I clicked on it, I suddenly realized I had about 3 pixels horizontal scroll -- which remained when I hit the Back button, but went away again when I hit Refresh.

I discovered that the document had been reflowed slightly differently; where there had once been something like this:

Now is the time for all good men to come
to the aid of the party

it now read:

Now is the time for all good men to come to
the aid of the party

The line break was in a different position, and that was what was pushing the <div> off the edge of the screen.

I guess this is just a weird bug. Anyone else seen anything similar, and are there any serious implications?

[rjohara]

Assuming we are talking about the same bug: this is a really annoying one that caused me to have to do some significant CSS rewriting. It is a known Wintel IE 5-6 bug, and is caused by the combination of a :hover color and the use of percentages for margins or padding. If you've only got one or two links on a page you might be able to tolerate it, but a page that is dense with links becomes almost unusable: whenever you move the mouse the text jumps all over the place on the whole page. The only way around it is to avoid using percentages in the CSS. I don't remember all the details now because I dealt with it about a year ago, but if you search Google for "jumping links bug" or "jumping text bug" you should find a few mentions of it.

[rewboss]

Hmm, could be a related bug. It happens when I click on the link: when I mouse over it, everything stays put. Also, I'm not using percentages anywhere.

[tedster]

I've seen other, similar bugginess in the way IE renders fonts. In close quarters IE will sometimes add a line break even when the text doesn't need the new line! So the result is a stupid empty line between blocks. Making the containing block wider by just 1 pixel can fix it.