Problems forcing a page break in HTML on printing - html

I am trying to force a page break on to the printed version of my page. I am doing this by styling sections that I want to break into a new page. The problem I am having is that when I print an empty page is inserted between the elements. So the page break is working but adding an extra blank page between.
For example the below code should print two pages but it actually prints 4 in total (the two I want and two blank pages).
here is the full html code of the page , including css below;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>DEMO</title>
<style type="text/css">
/* JUST IMPORTS , RESTS & MINIMAL DEFAULTS */
/* CSS reset */
* {
padding: 0;
margin: 0;
}
.container-flex-column {
display: flex;
flex-direction: column;
}
.page-width-mobi {
min-width: 1072px;
max-width: 1072px;
}
.new-page {
page-break-before: always;
box-sizing: border-box;
border-bottom: solid lightgray 20px;
}
.page-size-mobi {
min-height: 1505px;
max-height: 1505px;
min-width: 1072px;
max-width: 1072px;
}
</style>
</head>
<body>
<main class="container-flex-column page-width-mobi">
<section class="new-page page-size-mobi">
<h1>Page 1</h1>
</section>
<section class="new-page page-size-mobi">
<h1>Page 2</h1>
</section>
</main>
</body>
</html>

The problem I was having was that I was printing the document with an old version of safari. Safari did not consistently work with the break-before command. I was able to produce the desired outcome printing in an up to date version of chrome
The break commands and the #page css commands are new functionality and not widely supported

Related

html responsive webpage code issue using visual studio code html5

I'm developing a website and I'm struggling with the nav bar and my main issue is that the html responsive code is not working with me i don't know why can someone guide me?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
this is my responsive html code I only write it in html page I should write another responsive code in css?
Then you start your yiur html filelike this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
</div>
</body>
</html>
meta viewport is important but you need to add #media with breakpoint that you need in your css file, for exemple like this:
.container{
width: 90%
background: red;
height: 100px;
}
#media screen and (min-width: 800px) {
.container {
width: 80%;
background: green;
height: 200px;
}
}
Here you will find more informations.

Div Elements Not Showing Properly

I have been having this problem for a couple of weeks now. I have this code
div{
margin: 0;
padding: 0;
border: 5px outset black;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<p>testing</p>
</div>
</body>
</html>
and it is doing this:
I have looked at tutorials, searched on Stack Overflow, and even when I run it in the code snippet, it works. What am I doing wrong!?!?
Edit: I also wanted to add this image to show you that it works perfectly fine in the code snippet.
Try opening it with a different browser.

Does new Chromium-based Edge have shorter vertical height than Chrome? Header half disappears in Edge, but is fine with Chrome?

I'm relatively new to Front End development, and have been trying to improve my core CSS skills.
I've come across a quirk between Edge (Chromium) and Chrome which does not make much sense to me.
I've attached two images of the same example index.html page opened in both Edge and Chrome.
You can see that in Chrome the text fits fine, but in Edge the text is cut in half! Does Edge do something different with the top margins?
Here is my attached HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/css/style.css" type="text/css">
<title>Hello World</title>
</head>
<body>
<header>Hello, World!</header>
</body>
</html>
And the css:
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #FFFFFF;
width: 100vw;
}
header {
background-color: rgb(115, 165, 216);
}
header {
width: 100vw;
height: 60px;
}
Thanks for your help! :)

span with double f, strange performance in chrome

Why is the highlight on "ort" instead of "fort"?
This seems to be the case when there are two f's. When I replace f with other letters, such as d, it displays normally. So maybe this is a bug in chrome?
chrome version is chrome83.
add: It seems to be related to the font.
body {
font-size: 30px;
}
.highlight-font {
color: green;
}
<div>
<span>ef</span><span class="highlight-font">fort</span>
</div>
I think it's Chromium based browsers bug (I see same bug, Opera 69). It works well on Firefox etc.
You can use some invisible character if you need some hotfix right now.
I've used ‌ and it works well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-size: 30px;
}
.highlight-font {
color: green;
}
</style>
<body>
<div>
<span>ef</span>‌<span class="highlight-font">fort</span>
</div>
</body>
</html>

Iframe saying file not found instead of displaying the website

I am trying to show an entire website inside an html page. But it is looking at my local resources and showing file not found.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<style>
body {
margin: 0; /* Reset default margin */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}
</style>
<head>
<meta charset="utf-8" />
<title>Test page</title>
</head>
<body>
<iframe src="http://stackoverflow.com/questions/3982422/full-screen-iframe" />
</body>
</html>
If you have changed anything in URL. Please clear your cache and try again. (Like if you didn't used http:// first and now added that )