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?

Accepted Answer

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.

URL fragment messes up CSS

Solution

Problem