Reputation: 184
I have an ennoying bug with CSS on my new site. This is a random bug with chrome only. It appears usually at first visit and disappears with a refresh (F5) or a window resize. To make it reappearing, you have to refresh the page (sometimes up to 10 times).
When the bug appears, two links ("Blog" and "Qui suis-je") of the menubar are some pixels too low, and outside of the chrome's computer css boxes (in developpers tools).
(source: ksxav.net)
]
Here is a gif with and without bug :
After searching on google, I tried the following things :
@import url(css url)
into the main CSS file (described here)Same results. I also see the same thing on the theme's developper's website (here. Remember, sometimes you have to refresh / close and reopen the tab to view it).
Do someone has an idea? The theme's developper says he can't reproduce the bug, but as I said, I saw it on 4 different computers...
Thank you.
Here are informations :
Upvotes: 3
Views: 801
Reputation: 9577
This looks like a vertical alignment issue, but it's probably not. There are a couple things you can do here, though, to try to force the issue:
The a
child elements within your li
are floated. That's not necessary and I'd recommend removing them.
There's no reason you have to rely on the actual document flow to display this where you want it. I'm going to warn you in advance, this one feels icky to write but works like a charm.
On your original a
elements
Copy the text of the a
to a span, and plop it right next to the other
Example
<a href="/place/on/my/site">Mes chiennes</a>
<span>Mes chiennes</span>
#nav li {
position: relative;
}
#nav li span {
visibility: hidden;
}
#nav li a {
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
transform
bit just drags it so the center of the element is at the top
and left
coordinates you provide, so feel free to play with those to get them where you want them.Hope that helps.
Upvotes: 1