Page numbers in CSS - html

I need page numbers on a printed HTML page. I saw a few examples on the Web of how to do this with CSS that appear not to work at all. Is there any way to insert a footer with page numbers, at all on any web browser? Is this something that only worked in older browser versions?

Related

How to Make Sure that the Pure Static Website developed with Html and CSS works the same across all the devices?

I am doing web homework and the task is to replicate a webpage but with entirely HTML and CSS. The webpage should be static and should not resize as the browser window is shrunk. The problem I am facing is how can I make sure that the website will run the same on every device because the webpage looks different on my device and different on my friend's device.
I have used pixel values in CSS (not %) to implement the positioning of elements in the webpage.
Unfortunately, I cannot share the code on this platform.
Can someone help me point out how can I achieve the above mentioned with only HTML and CSS?
I believe it is happening because you and your friend are rendering the page in different browsers. WebKit & Mozilla rendering engines implement line-height differently. I suggest you add Firefox, chrome and any other browsers css specifically wherever there is a conflict in display in styling of element.

HTML page link odd behaviour

I have a simple website containing 3 HTML pages but sometimes internal links on IOS Safari doesn't work correctly. Rather than rendering the page, it displays the 'Open in "Drive" screen with options to save page as a document. When I refresh the page it renders correctly again. This usually when I navigate around the pages quickly and I am not sure why this odd behavior and how to fix.
See a screenshot here https://ibb.co/bXxzZTS
Not sure if it is related but the DNS is via CloudFlare (Free) and the pages are really fast (as it's just HTML, CSS and JS).
I have only seen happen on iPhone Safari. Other devices I have checked on include iPad, MacBook, PC running browsers Chrome or Safari are all OK.
Additionally, I tried using URL with and without full domain with the same result.
I just expect the page to render as an HTML page.

Single HTML file showing in Firefox smaller than the other HTML files

I have a web site that I'm building using HTML and CSS. I have 3 pages built exactly the same minus the actual content on the page. The issue I'm having is that on Firefox, one of the pages shrinks. Everything from the Header down to the Footer and including icons shrink. When launched on Safari, it works fine. Any suggestions as to what to look into for the issue or why it would happen on Firefox? I've exchanged the CSS for the other pages and it hasn't changed. I know it's bad practice to have 3 HTML files that will look the same but to give them each their own CSS and I'll fix that now. Thanks for your help!

html images appearing in wrong places

I am designing a bigcartel website and am receiving a weird browser-specific problem, on chrome, mozilla and some other browsers when on the website images on the products and the home page do not load correctly and are either slightly above or below where they should be. It is resolved by reloading a couple of times but obviously that isn't good. Here is the link to the website, and the source html replaces bigcartel variables so here is a whole .zip containing all page html and theme css.
https://mega.co.nz/#!aMoTEAwJ!CM6ZLyTMiY8YGWg3StH0xFNVNb89M2WTLkJ0khR-np8

How do I replicate this website in terms of responsiveness using only css?

Here is the website I want to replicate: http://www.voncarcha.com/contact
Here is my website: http://foxweb.marist.edu/users/kf79g/contact.php
I mainly want to replicate his about page and contact page across all screen sizes that are large medium and small. How can I do this with only css like I did with all of my other pages besides the about page and contact page?
All of my code is located in the page source under these files (after right clicking view source on your browser):
screen_styles.css
screen_layout_large.css
screen_layout_small.css
screen_layout_medium.css
contact.php
about.php
I tried absolutely everything I could think of. I tried to replicate his website, but mine simply does not work as smoothly. Mine especially looks terrible on older browsers IE 7-9 and Firefox, while his does not for some reason. I want my site to be optimized to work across all browsers. I do not know what to do anymore. After this is done, my website will finally be finished. Please help me out I need to get this project done as soon as possible. I would really appreciate any assistance.
Media Queries (currently what you're doing with responsive design) are the part of HTML5 and CSS3. So If you try these features in browsers that do not support HTML5, they will not work.
This link says, It can handle media queries in older browsers. You should take a look at it.
You can also take a look at This one