0

For Chrome 79 / Firefox 72 on laptop, Linux Mint 18, 24-inches attached monitor.

I've found similar but not identical StackOverflow questions. The closest instance being:

Borders on certain zoom levels on webpage

That question suggests disabling zooming. I have no idea how to do that...

Otherwise, in my case:

  1. A desktop Web browser's Zoom level disconnects a hand-edited web page's 2em bottom and left/right borders.

  2. I've used either em or % relative units throughout.

  3. The top and left-right borders are not affected by the zoom level.

The following screenshot illustrates the behavior.

Browser zoom levels disconnect lower and left/right page borders

  • In Chromium (79 on Linux), 90-percent == no gap, 80-percent == gap.
  • In Firefox (72 on Linux), 110-percent == no gap, 100-percent == gap.

Here's the CSS that creates the 2em border around the page:

body:before,
body:after {
  content: "";
  position: fixed;
  background: #008800;
  left: 0;
  right: 0;
  height: 2em;
}

body:before {
  top: 0;
}

body:after {
  bottom: 0;
}

body {
  margin: 0em;
  border-left: 2em solid #008800;
  border-right: 2em solid #008800;
  padding: 3em 3em 3em 4em;
  background-color: #dddddd;
}

  • There's also some CSS that suppresses the borders on smaller mobile or table screens. I haven't included it because I don't believe it affects the problem(?)

  • I've tried without success to use both browsers' developer tools to isolate the problem.

2020-02-12 EDIT:

I've tried to interpret the comments that were offered in response to my original post. Both of them mentioned percent units (%). Unfortunately I can't get percent units to work at all. Using % removes the borders and I can't get the HTML page's H/F divs to go to the top of the page; there's a gap.

So in lieu of guidance I can more clearly understand I'm setting this aside for now...

RBV
  • 1,367
  • 1
  • 14
  • 33
  • If you set width by percent instead of fixed it would auto shrink on zoom and not break, or it could be the reverse so try both. – estinamir Feb 12 '20 at 19:57
  • your CSS seams a bit '"hacky", why use the `body` to add the style to and not a container within. and why using `em` and not percentages? – Matan Sanbira Feb 12 '20 at 20:08
  • Thanks both bestinamir and Matan Sanbira, BUT per my edit to my original question: I've tried putting % units in various places. The result is that H/F divs have gaps at top/bottom. And the formerly 2em borders disappear entirely. So I'm setting this aside for now... – RBV Feb 12 '20 at 23:09

0 Answers0