Been battling with this for a few days - finally caving in and asking for help.
I'm experiencing a super weird issue in the Edge browser.
Here's the test site: http://edge22.com/test-edge/
When you hover over the menu items, a 1px line appears below the menu item you hovered. There's no border, text-decoration etc.. If the white header area is made black, the line is black etc..
It's like the height of the menu item is reducing by 1px only on hover: http://screencast.com/t/Lpkow3HF0
Now the weird part. This only happens when the element right before the navigation is a link (the "Test" link). If this link is removed, the glitch disappears.
Now if I wrap the link in a div and give it a small margin, the issue goes away:
<div style="margin-bottom:0.1em;">Link</div>
Does anyone have any idea what's going on? I've stripped all of the CSS down to nothing, and can't pinpoint the problem.
I'm not sure if it could fix your problem (as it's not available anymore), but it fixed mine... So for others looking for Edge artefacts that occur on hover ...
I had a somewhat similar issue where a line would appear totally without reason on some elements (and not on other elements using the same style on the same page).
In my case it damaged a menu bar under a fractionally sized image with great repeatability upon hover (and even when not hovering anymore the damage remained).
Simplest solution I found: add a border to the parent in the same color as the background that was damaged ; problem solved.
Related
weird bug here. Searched on the internet for hours but no working solutions yet :(
https://www.*****.*****/
It only happens on the page with parallax, a page without parallax is fine (biografie page).
What happens is that when you look closely, you will see that the white transparant-ish header flows OVER your scrollbar.
When taking a closer look you will see that the whole body is floating over my scrollbar.
Does anyone know a way to 100% fix this? I tried lots and lots of answers on the internet but none gave me a working solution.
Hope someone can explain to me what is happening and how to solve it.
Best regards
You can't place the menu below the scrollbar, because the scrollbar on pages with .parallax containers is not the <body>'s scrollbar, but .parallax's scrollbar.
And you can't place element A between element B and element B's scrollbar, unless element A is a descendant of element B.
However, the real problem is not placing the menu under the scrollbar. The real problem is being able to use the scrollbar (click its top arrow) through the menu, where they overlap.
Which is quite possible, using:
.menu {
pointer-events: none;
}
.menu-wrapper > * {
pointer-events: all;
}
(This makes the menu transparent to pointer events, except for children of .menu-wrapper, which do not overlap the scrollbar).
I am having some issues on my website with some CSS I can't get to work.
For some reason on some pages the sticky navigation text remains visible while on others it doesn't. I'm not a developer but would appreciate any tips people might have.
This page it looks correct:
https://ecoheatcool.co.uk/underfloor-heating/
This page is incorrect and you can see as you scroll the links disappear. (White on white)
https://ecoheatcool.co.uk/
I would appreciate any help, Thanks!
If you mean how the text is white on white when you scroll on the homepage, you could add CSS to your custom styling:
.fusion-is-sticky .fusion-main-menu>ul>li>a {
color: rgb(1,62,72);
}
The color is pulled from the background-color of the navbar, but you could change it to any brand color.
Well, upon scrolling, the navbar gets a few classes that give the links a white color. You can just remove these CSS selectors. In this css file remove the color attribute on line 3339 and on 3323. This should fix your problem.
The logo element on the website:
puerteaspecialists.co.uk
was originally at the front. I didnt even update anything and one day i check the site and now the top 3rd is hidden behind the nav bar.
Ive tried z - index and have kinda worked out why this isnt working, but also havnt actually found the solution.
Is there a way to bring this to the front or anyway to show the full image via css?
Thanks!
A simple solution is to remove the solid background of the uppermost navigation bar...
.top_nav_out {
background-color: transparent;
border: none;
}
The problem is that class name .top_nav_out in your top navigation block applies a high z-index which causes the top-most nav block to overlap the lower navigation block (.top_nav) which hides your logo partially.
remove property:
z-index
from class:
.top_nav_out
and your logo will be displayed in full.
From what I have seen, the z-index property is redundant anyway in that class (layout stayed in good shape after removing it)
Hope it helps a bit!
We have a project page here to check the issue live -> http://hdev.hattrick12.com/
Hovering the Post Elements causes the post height to jump in IE9/Standard for a split second.
It has something to do with .post footer li being display inline - but I need to have the elements either floating or display inline which both seems to cause trouble in IE9.
Can someone point me in the right direction as I can't find anything written on that specific IE Bug?
I found it! It's the min-height of the elements that causes them to switch height for a split second when hovered.
Thx to everyone contributing
I am doing a hover over effect for my nav (text and images)
Starting out with a tray look then upon hover they lighten up.
This effect is working but after the mouse leaves the item it does not go back to its original state apart from in firefox.
Below is a small working object of it without the images and logo.
http://jsfiddle.net/bjxCn/
They seem to go back to the orginal state after doing a scroll to the left or down normally. Seems very strange.
It looks like the problem is that you're nesting div elements rather than li inside ul. That may or may not be is not valid HTML; when I replaced the ul-div-li layout, the weird hover issue went away (albeit breaking the layout): http://jsfiddle.net/GppCG/