List-elements in ul are showing inconsistent heights in EDGE and IE11

[nexus]

Hi, for days now I´m tryin to get some consistent heights with the list-elements of my drop-down-menu in EDGE and IE11. No matter what I tried, the heights differ around 1px.
Am I handling some CSS wrong or is this problem not to be solved with EDGE and IE11?

codepen

[Paulie_D]

https://stackoverflow.com/questions/46808277/list-elements-in-ul-are-showing-inconsistent-heights-in-edge-and-ie11

[nexus]

Thanks Paulie, like in stackoverflow, great help! Why did you delete your useless comments there, after downvoting my first question? You were the reason to change the forum and I really hope there is still one that is not contaminated by you …

[Paulie_D]

I deleted the comments because they were no longer necessary and I did not downvote your question.

I commented because the question was written in manner that is considered low quality by Stack Overflow.

As I commented, the code is supposed to be in the question and not in just a link (even to JSFiddle or Codepen) or an image (we can’t diagnose images) so that all the information required is there without having to leave SO.

You seem to have repeated that issue here (no code) but I’ll link in your Codepen so that users here can help you.

Note that CSS-Tricks does not have the same code requirements (i.e. in the post) as SO..but we still need code (and a link IS acceptable to us) to be able to help.

https://codepen.io/nexusmaster/pen/MEzNdX

When this was corrected, I removed the comments and a close vote…as I am supposed to when a question is improved to meet the required standards.

Unfortunately, you elected to delete the question on Stack Overflow before anyone could answer…

With that said, I don’t have IE on my this laptop but in Edge I get 38.56px(?) consistently which is being rounded up.

What do you get when you inspect the element in your DevTools?

[nexus]

OK Paulie, obviously I got something very wrong and I want to apologize for my rude post.
Maybe you can delete it?

I tried to give you an answer yesterday, but for what reason ever, there was no edit-option present and the reply function was not working.

The Codepen link was already there, underneath the image.

The list-items-heights, that are shown to me in the dev-tools, are in
Chrome 39px (actually I measured 39px with screenshot)
FF 38,59px (actually I measured 41px with screenshot)
Edge 38,59px (actually I measured 40-39-40-39px … with screenshot)
FF11 38,59px (actually I measured 40-39-40-39px … with screenshot)

[Paulie_D]

Thanks for coming back….it’s no problem, it’s sometimes hard to gauge tone when just bashing away on a keyboard and things get missed (as I obviously did with your Codepen).

I wouldn’t trust screenshots as they are notoriously unreliable but it does seem that the heights are consistent in fact when checking in DevTools so hopefully this is now solved for you.

[nexus]

I have a problem with posting in this forum. It seems, that this is possible only one time per day.
After the first one I can submit others, but they will not be publicated

What do you mean with screenshots are unreliable?

To me it seams, that the ms-browsers have a strange behaviour alternating round-up round-down behaviour from line to line (39-40-39-40px).

In FF the Listelements have a height of 41px vs. 39px in Chrome which I don´t like to accept.

The only way giving the items a correct and consistent height seems to be
using an absolute height (px), instead of vertical padding (em), for the list-items, which does not work well in an responsive design menu.

Or using a relative height (em), instead of vertical padding (em), for the list-items-links (disp.:block), which results in loosing the centered vertical-alignment of the typo.

I would like to have the same “Browser-output”-height (not only “DEV-Tools-value”-height) as in Chrome (with padding: 0.75em) consistently in FF, IE11, Edge without losing the responsive behaviour or the vertical aligment of the typo.

Any idea how to achieve that?

[Author]

Posts