MS edge graphical anomalies - html

On my website http://uus.diamedica.ee/et/tooted/veterinaaria/6 is having strange 1px graphical glitches in and around the red menu bar, that only occurs in MS edge. It's like small bits are bitten out of the menu ribbon, thus making it look uneven. I've tried changing fonts, backgrounds, margins, paddings, etc. And nothing seems to make it go away. I've tried different zoom levels, but still the same after refresh.
Funny thing is, if you hover the menu items, then some of the bugs go away. Is anyone else having similar problems in MS edge and knows what´s causing it? Image below.
additional screens
http://design.imago.ee/test/diamedica/screen1.png
http://design.imago.ee/test/diamedica/screen2.png

Somehow i was able to fix the problem (at least in the computer that it appeared in the first place) by giving .menu-ribbon position relative, z-index 2000 and bottom value -1px. The issue should be still available to see in the draft version for those who are interested, http://design.imago.ee/Diamedica/html/index3.html is the url, open it up and hit refresh once after you´ve first loaded the page. At least im still seeing it in the draft version.

I also try to make a test by normally visiting the site in Edge.
Site looks correctly without any issue.
Below is my testing result.
Let us know, If there is anything that we are missing.
We will again try to make a test to reproduce the issue.
Are you working with low memory or with so much load on Edge?
Try to close all other site and open your site and check whether you can produce the issue or not.

Related

jsfiddle layout broken: wrong input size. Where is the size stored?

I came across a weird bug with jsfiddle. The layout I get when I visit the site is completely broken. This bug happened when I dragged the vertical resize bar while my second display disconnected. See this the result:
There is probably a way I can get this fixed from the inspector by resizing it manually, locating left panels and changing their width manually and than playing with the vertical resize bar; I'l keep investigating.
Where are the layout positions stored?
Before asking this question, I tried to reset my cookies, I had a look into local storage and session storage (they were both empty). I know it's a local issue because jsfiddle is too awesome to break like that, it's not because of the code in the fiddle, I opened the fiddle in private navigation and worked like a charm.
Edit: I fixed my issue by deleting .column.left, #handler_vertical appeared, I moved it and now data is fixed, but I still don't know where this is stored ;)
I had this same issue and worked out that it was after I reduced the size of my browser window, I'd accidentally moved the vertical bar left, which caused this to 'disappear', so when I resized the window to full, no vertical bar!
To fix, I searched the inspector element for 'handler_vertical', and around this were column left and column right, with widths set inline. Simply remove these inline widths and it's back to normal.
Strange that some js is still adding itself even after clearing cache and cookies!!
I accidentally deleted an HTML node in Chrome's inspector, which broke JSfiddle's layout.
When I reloaded the page, I was surprised to see the layout was still broken.
I cleared my cache and made a hard reload, but JSfiddle's layout was still broken!
The solution came out recently : I changed Chrome's theme... and it fixed JSfiddle.
Sometimes you just don't want to understand.
I know this was solved a while ago, but I just wanted to add that the FAQ acknoledges this and pasting Layout.setWindowSizes(null)into the browser console fixes the layout.
Source: http://doc.jsfiddle.net/faq.html
Same just happened to me, reloading the site had no effect but deleting last cached elements made it

Chrome Developer - Elements section broken

I was wondering if anyone has ever come across this issue before? I loaded up Chrome today and for some reason the entire left hand side of the elements section is broken.
I can navigate down using the keyboard arrows and see the breadcrumb selectors change (as shown in the picture) and for some reason the top of the document seems to display (but looks very odd indeed), but anything below the 'if greater than IE8' doesn't show whatsoever.
Has anyone ever experienced this before? Am i better reinstalling or launching a support ticket?

Html table misaligned under Windows using any browser (Firefox, Chrome and IE), but working fine under Linux

An image is worth 1024 words, right? so I tried to post some images but I don't have enough reputation, so it's going to be a little more difficult to describe with words, but I hope that someone can help me.
The thing is that I have a table that shows misaligned only under Windows, no matter if using IE8, Firefox or Chrome. Under Linux the table shows fine in Firefox and Chrome. So, I used the IE8's development tools and find out that the margins are set to 0, and if I disable the margins the table shows almost fine (top margin gets some value) but the right margin now shows aligned. Then if I apply margins again the top margin gets set to 0 and the right margin stays fine, and the table shows as it is meant to.
The weirdest part of all is that it works fine under Windows and Linux for other clients of the application, but for one particular client it just does not. The code does not depend on the client.
Edited:
The code is not something I'm writing, It's already written, like ages ago, and I have to fix some parts. It's a very large and complex application, with sensible data, so I have to obscure some of the code and the images, sorry for that, but now I've isolated the problem.
You can download the code and test it locally. You'll find out that the table shows misplaced only under Windows in any browser.
In order for you to understand what exactly the issue is, I'm posting 2 links. One of them is a code that shows fine, the other one has the issue. Both of them should work fine since it's the same application. I hope this is more clarifying. Look at the misaligned table, go to the development tools in IE and watch the margin values, then watch what happens when the margins are disabled and enabled again.
https://docs.google.com/file/d/0Bxz1pQbINNQKbDRHYXFxUFk1aFU/edit
https://docs.google.com/open?id=0Bxz1pQbINNQKYi1icEM4dFlGeW8
I had to remove the previous link to the images because I can upload only 2 links due to my privileges, but now you have the code, so it wasn't going to be that useful anyway. Maybe you might want to see the pics:
Well... The problem was nothing else that the dots in some ip numbers!
It was difficult to spot because not all data had ip numbers.
The solution could be to change xxx.xxx.xxx.xxx for xxx-xxx-xxx-xxx or something like that.
I hope it's useful for someone else.

weird black bars for firefox users on my website

so ive been working on a small nodejs project and some of my users recently see weird black bars on it, i have no clue what might cause them and i cannot reproduce them at all.
here is a screenshot:
their browser version is Firefox 9.0.1
does anyone have an idea what might cause them?
update:
the problem still exists, i made one of the users turn off his javascript and he says that he still sees those black bars. i also made him install firebug and he says that he cant select the bars - only the elements underneath them. (dunno if he did it right though)
its quite strange, the only elements he sees right from the start are the ones which i positioned fixed.
ive been able to reproduce the bug on my laptop and found out what was causing the black bars:
my header had an overflow hidden attribute and as soon as i removed it everything was working fine again.
but i still dont know WHY this would happen. i'm using a linear gradient as a background in my header and a heading with multiple text shadows.
maybe this caused the bars on certain graphic cards.

Chrome shifting divs downwards?

I'm having some CSS issues that seem to only occur in chrome. The site in question is liveinthelead.com, and it's still being worked on so if you notice any other strange problems feel free to let me know, I won't be offended. My main problem is this though:
In all of the browsers I've tested except for chrome the site looks fine. However, in chrome, on the main page, the middle post in the three-post divs are shifted down about 20px. But when I open up the developer interface, they shift back to where they're supposed to be! Maybe it's just a local problem, but here are some pictures of what I'm talking about. If you don't experience the same issue then maybe it's just something weird going on with my computer. Cheers.
When I initially load the page
After I open the developer console
One thing that I noticed is that in your div#three-post you set float:left to div.member1 but not to the remaining div.member2 or div.member3.
That's where I would start investigating the problem. Maybe you should set the remaining two divs to also float left. You may need to clear them afterwards too.
For the sake of convention — and so that you don't encounter this confusions again — use IDs for selecting specific elements, e.g., member1, member2, member3, and use classes for selecting multiple elements that should share the same attributes.
I'm unable to replicate on Chrome 15.
=\ could be a good thing! Try another computer!