URL fragment messes up CSS

Question

I am going to have to link to an external website as I am having trouble reproducing this issue in JSFiddle.

For some reason accessing my page with an URL fragment corresponding to an ID that exists on the page appears to pull up certain areas of the document, the behaviour is not reproduced with a non-existant ID. There is no JavaScript on the page which could be causing this behaviour.

This behaviour is consistent in the following (so is unlikely to be a browser bug):

• Google Chrome 31
• Firefox 21
• Internet explorer 8

Live view (accessed: 19/12/13) Issue resolved - see graphic below:

• This is the page as it should look: http://sixplusfour.co.uk/encyclopedia/
• This is the page with the named anchor: http://sixplusfour.co.uk/encyclopedia/#pagelist

The error is shown side by side in the following image:

Does anyone know what could be causing this behaviour?

Answer 1

My guess is that the :after pseudo-class of #pagelist is causing this. I have no clue why this is happening but the display doesn't seems to load properly.

This pseudo-class seems like a quick fix. You might want to delete this pseudo-class and fix the real problem. Try to add a overflow: hidden to your wrapper so its floated contents keeps in the flow:

.col-group {
   margin-left: -1em;
   margin-right: -1em;
   zoom: 1;
   overflow: hidden; /*new line*/
}

I can not test it on reload, but this should work.

Update

The real problem is probably because the the base-line is shifting based on its font. It contains a dot as content. Now this is still not clear why this happens when redirecting. However i suggest to you a empty content for this:

.col-group:after {
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
  content: ""; /* removed dot */
}

This should work without modifieng too much.

Answer 2

If you set overflow: auto; on #container you start to see why the problem occurs. The contents of #container are actually taller than their container. When the URL fragment is in place, the browsers are scrolling within #container to reach it.

(I haven't yet figured out exactly why, but hopefully this will point you in the right direction.)