Question

I’m currently working on a website but after a while I started to notice how the text and images ‘bump’ a little when you click on them. I have no idea how this started to happen and I have no idea how to get rid of it either. There’s also a few other problems that started happening around the same time.

Examples:

1. Clicking the logo makes it move around a bit.

2. Clicking one of the breadcrumbs makes it look like it’s suddenly bold

3. The titles for my posts are in white (thus invisible), even though I set them to be semi-black. When clicking on them the text shows up (changes color like it’s supposed to do) but it also decreases in font-size significantly.

I tried css and html validator but it says my website is actually valid.

Help is very much appreciated!

Answer 1

You have things like this in your CSS:

#breadcrumbs a, a:visited, a:active { ...

This is the same as:

#breadcrumbs a { ...
a:visited { ...
a:active { ...

You are accidentally giving all anchor elements some padding when they are clicked, that is why your logo jumps a bit.

The boldness is caused by a similar expression:

.post-title a, a:active, a:visited {
    color: #3e3e40;
    font-weight: bold;
    font-family: "Helvetica", Tahoma, Geneva, sans-serif;
}

That makes all links on the page bold when clicked.

The correct way to write these compound selectors is to include the whole chain in each expression:

#breadcrumbs a, #breadcrumbs a:visited, #breadcrumbs a:active { ...