insidestory.gr - top menu/navigation bar rendering issue Topic is solved

[back2themoon]

Example: https://insidestory.gr/article/i-koinon ... reftis-mas

insidestory_wrong.png

Should be:

insidestory_correct.png

Seems to only occur on their articles. Main page for example is ok: https://insidestory.gr/

[Gemmaugr]

It looks fine to me (like the second image) here.

[back2themoon]

Forgot to mention you may need to scroll down a bit, although first link is displayed incorrectly right away for me.

[back2themoon]

Hmm, it seems the problem is only apparent in maximized window mode (both windowed and full-screen are ok, on my current laptop).

[Gemmaugr]

I get the same issue at Zoom Label 160%, and ONLY on that amount.

[back2themoon]

Thanks for checking. I'm on default 100% zoom, 100% DPI and 1366x768 resolution. Issue only appears with Pale Moon in maximized mode.

[Gemmaugr]

I also default at maximized and 100% zoom (and it looks fine, on both monitors), but my resolutions are 1920x1080 (100% DPI) and 2560x1440 (125% DPI).

I decided to test with my already added Zoom Label addon because I saw that the pic in your screenshots was very small.

The easiest solution would be to use Zoom Label and have it on any other than 100% setting. Or you could change your DPI or Resolution, or buy another (larger) laptop/monitor. (Or maybe Adoxa has some Modify HTTP Response trick).

[vannilla]

It seems to be caused by some bizarre CSS when the viewport size is between 1200px and 1400px.
The parts of CSS I could see are not really the best you can use to get the same behaviour, so my guess is they rely on some Chrome layout quirk.

[back2themoon]

The easiest solution would be to use Zoom Label and have it on any other than 100% setting.

Yes, slightly touching the 100% zoom (using NoSquint here) takes care of it - thanks.

Full zoom level: both increase/decrease solves it.
Text-zoom level: only decrease solves it.

Weird... but we've seen weirder.

[Moonchild]

It seems to be caused by some bizarre CSS when the viewport size is between 1200px and 1400px.
The parts of CSS I could see are not really the best you can use to get the same behaviour, so my guess is they rely on some Chrome layout quirk.

Yup, it seems to be "responsive design gone terribly wrong"

[adoxa]

(Or maybe Adoxa has some Modify HTTP Response trick).

No need, works fine for me (64-bit Basilisk, Windows 10, maximized at 1366x768).