I need some expert advice on this as its driving me crazy!!
I have checked through everything and even removed all CSS but I can’t stop this from happening!
In the footer of this website - www.thedevelopists.co.uk, the links are moving downwards about 1px on hover. The crazy thing is though that they don’t bounce back up when you leave, they remain 1px down. Also, to see this error/bug, you have to be scrolled right to the bottom of the page??
If somebody could figure this out I will be so happy!!
P.S This is affected the most in Firefox. In Chrome it behaves a little differently, rather than moving slightly the curser hand flickers like crazy.
It's quit simple. Just put below code in your css.
footer li {
display: inline-block;
width: 100%;
}
This is happen because your li is not clear. There for it happen. Cheers!!!
Try this code as you feel footer Links Jittering/Moving on Hover is due to transition effect
If do not need that
footer a { transition: none; }
Related
As demonstrated here, I've built a fixed menu using unordered lists and a lot of css. I've also included a button with a custom class that redirects back to the frontpage and made it a litter bigger using font-size: 130%. By using line-height: 0; I was able to force all buttons to be the same height. Unfortunately, somehow an extra pixel of height is added to the menu and the big button sticks to the top, while the rest of the buttons stick to the bottom. Apart from seriously triggering OCD, it looks plain ugly when hovering, so I'd like to fix it. I am at a dead end and cannot solve this by myself, so I would like to ask anyone to help me out.
Thanks in advance!
li.menu-titel {
font-size: 130%;
font-weight: lighter;
overflow:hidden;
line-height: 0;
}
Simple format all your li with display:inline-block (instead of inline),
or remove the vertical-align:top;.
I finally fixed a problem with fading, then ran into another. To keep my tabs on the screen and not cut the top halves, I moved them down a bit: this caused the page content to show above the part where the page content fades below the tabs. Any ideas anybody?
I've already tried adding <br /> tags before the tabs. Here is the code for the test website: it's a jsfiddle! In the jsfiddle, the top halves of the tabs are cut off.
Just add padding to the top of the navigation and increase the height.
.top-nav{
background-color:#181818;
height:55px;
padding-top:20px;
}
I honestly can't remember what other CSS I changed but it was tiny things here n there. This was the gist of it though:
No html { margin... } but this was changed:
.top-nav {
padding: 8px;
}
.nav-container {
background-color:#181818;
height:35px;
position:fixed;
width:100%;
}
Just use the whole CSS because I'm pretty sure that wasn't the only thing I fixed.
Oh yeah and, I don't know what .menu-fade even does, but it sure doesn't seem useful. Removing it doesn't change the layout at all.
Example
PS - seeing <br><br/></br><br /> or any combination thereof makes my foot itch.
I am having a very weird problem. I do a css 3 cardflip animation for my portfolio. In Firefox everything works fine, but in chrome for some reason the first card has a wrong direction for the animation. As you can see, the left image shows the wrong animation, stretched wrong, while the right one is perfect. All the cards are created by a script so there can not be a difference in the html markup or the css for that matter.
Any Ideas? What kind of information can I provide to help figure this out?
Cheers Lukas
Update
.card flip
{
text-decoration: none;
text-align: center;
float: left;
position: relative;
display: block;
z-index: 30;
}
Remove perspective and webkit-perspective they causing error
I just noticed that in IE9 and IE8 (not in IE7) the padding around my links is not being considered part of the link (it's not clickable and my hover effects aren't being applied when it's hovered over). Only the text part of the link is working.
I tried giving the element a background color but that didn't fix it.
Has anyone seen this before?
SOLVED: Wrote a huge edit to my question and in the process figured it out myself.
I had a negative z-index on the body, which I definitely didn't know would cause this but apparently it does. Here's the jsfiddle: http://jsfiddle.net/CEbMe/ which shows the problem in IE9 and IE8
Try adding:
<style>
a { display: inline-block; padding: 0 50px; background: yellow; }
</style>
<p>This is a link with some text around it</p>
None of the suggested answers fixed it for me, and I spent a few hours finding the answer:
http://haslayout.net/css/Partial-Click-Bug-v2
background-image: url(#);
fixes it. I imagine this would probably do the job too:
background-color: transparent;
hopefully this will be an easy answer for some of you CSS veterans out there.
I'm developing a site for a client. For readability, I'll just give you a link to the website and the css page in question.
HTML
CSS
I'm trying to make a sub menu pop up to the right of the main menu when you scroll over "Star Quartz Grout." My current CSS obviously isn't correct though, and I could use some guidance.
ul#subNav {display: none; width: 134px; }
li:hover ul#subNav, li.over ul#subNav {display: inline-block; position: absolute; top: 0px; left: 134px; }
My guess is that it's working but it's hidden behind the rest of the page. I could be wrong though. It's kind of hard to confirm, even with Chrome's "Inspect Element" (very nice thing btw). It's probably some dumb mistake. Anyway, thanks in advance. I'm a bit of a CSS novice.
You can try this :
ul#subNav ul
{
display: none;
}
ul#subNav li:hover ul
{
display:block;
}
But be careful because your "li" zone is smaller than the link itself.
I did it this way on this website : Spirit Of Polo (hover the shopping cart).
Be careful, this kind of effect (hover) will not be visible on touch-screen devices (because hover is impossible if you think about it)