Hi, I need help in fixing a white line appearing at the menu.
here’s the website http://www.huffnpuffinc.com/
My client has windows 10 and is using and IE edge browser and he notice that there is a straight line at the top of the navigation.
It looks like it is being caused by a sort of pixel jog because the white lines change menu items at different viewport widths when the menu bar is redrawn to fit the browser window.
Someone who can test with IE10 will have to pick this up.
<aside>
The “Request a Quote” drop down is the most annoying thing I’ve seen in a long time.
</aside>
2 Likes
What has Internet Explorer got to do with the OP’s question (other than them accidentally including a reference to it before the browser name). They are having the problem with Edge and not with IE.
The only difference I could see between Edge and Chrome is that in Edge some of the menu dropdowns leave a small white vertical bar due to not closing the dropdown completely. Is that the problem that is to be fixed?
The OP says “straight line” but what I see pointed to in the image appear to either be remnant navigation pipe separators, or more likely sub-level color showing in gaps (a box model thing?)
You’re right, of course. I’m afraid that I still think of Edge as an IE something. My mistake entirely. I was looking at and testing in Edge but calling it IE10 when in fact I meant Win10 which comes with Edge.
That’s my take. Edge can’t quite decide how to shrink the width of the indicator 50% on each side (100% total) when there are an odd number of pixels in the width of the container, thus the pixel jog. I can spot a very quick flash of the bar in the middle in Firefox with JS disabled, but it does not persist.
I wonder what would happen if slightly more than 50% was specified - say 50.05%
Me, too. I started to suggest 50.1%, but decided to leave that recommendation to someone more knowledgable of Edge and its peculiarities. (@PaulOB ?)
If anyone knows then he certainly will.
1 Like
Actually, anyone who knows how to use Edge’s dev tools could test it. I haven’t learned yet. Just fired it up tonight. 
Why don’t you give it a try?
I just tried using Edge.
The “white lines” are the bottom portion of a “pointer” that shows on hover.
I was going to look more deeply into it.
But the pop-up won’t stay closed.
Sorry, but I can’t be bothered to fight with it.
So I did what I always do when a site is obnoxious, I left.
2 Likes
yes, that’swhere I gave up on testing it too
ditto
Yes its a rounding error where 50% + 50% doesn’t = 100%. The animation is supposed to finish at 50% from right and 50% from left but is 1px out (IE was always 1px out and still has troubles with accuracy).
If the left and right positions are set to 51% then that means the animation ‘should’ finish without leaving a pixel gap.
e.g.
.menu-primary > li > a::before {
left: 51%;
right: 51%;
}
That seems to work if changed in developer tools. (50.1% should also cure it.)
1 Like
Hi there, thanks all for helping me solve this issue. It’s really a headache. But need this resolve as my client demands for it.
I gave you a possible solution above? Did you try it?
Not yet, I’m borrowing a win10 laptop. hopefully that would work. 
If you update the code I can check Edge for you and see if it fixed it.
I’m just waiting for the code to appear. Somehow the cache won’t let go.
Can you check the site? Thank you
