Geek Answers Handbook

URL spoiled CSS

I will need to link to an external website as I am having problems reproducing this issue in JSFiddle.

For some reason, accessing my page with a URL fragment matching the identifier that exists on the page seems to stretch certain areas of the document, the behavior is not reproduced with a nonexistent identifier. There is no JavaScript on the page that can cause this behavior.

This behavior is consistent in the following (so this is hardly a browser error):

  • Google chrome 31
  • Firefox 21
  • Internet explorer 8

Live view (accessed: 19/12/13) The problem is resolved - see the figure below :

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

Side by side comparison

Does anyone know what might cause this behavior?

+6
source share
3 answers

I assume the pseudo-class :after #pagelist calls this. I do not know why this is happening, but display does not seem to load properly.

This pseudo-class seems like a quick fix. You can remove this pseudo-class and fix the real problem. Try adding overflow: hidden to your shell so that its floating contents are stored in the stream:

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

I cannot check it on reboot, but this should work.

Update

The real problem is probably due to the fact that the base-line is shifted depending on its font. It contains a dot as content. Now it is still unclear why this happens when redirecting. However, I offer you empty content for this:

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

This should work without modification too much.

+4
source

If you install overflow: auto; at #container , you begin to understand why the problem arises. The content of #container is actually higher than their container. When the URL fragment is in place, browsers scroll within the #container to achieve this.

(I have not yet understood why, but I hope this will point you in the right direction.)

+3
source

It is probably related to the :focus or :hover selector.

I see this code in your style.css :

 .pagenav li a:focus { outline: #114d74 solid 1px; outline-offset: -1px; padding-left: 0.5em; }

Could this be a different padding or outline value that makes things change?

0
source

More articles:


All Articles