I'm trying to change what shows up in the margins when I print out a page from my website. I've read here that it should be possible to set the content of "page-margin boxes" like so:
#page {
#top-center {
content: "Page " counter(page);
}
}
...But no matter what I try, this style seems to be completely ignored. I've tried in Chrome, Firefox, and Edge. I'm starting to wonder if the print preview functionality each browser has is somehow overriding this, as they provide their own margin content?
Has anybody ever got this to work? I assume the major browsers should handle this as caniuse.com says so (I blindly believe it :) ) and multiple examples I've found online imply that others have met with success.
In case this helps anyone, I've found that most modern browsers - including all three I tested with (Chrome, Firefox, Edge) - do not support #page margin boxes at this point in time!
I learned this from user alex's comment on an answer to another SO question here -
Page numbers with CSS/HTML
And his source was https://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)#Grammar_and_rules
Related
Problem:
Thanks for taking the time to read this. I'm having a problem which I need to solve as simple as possible. There's a website I'm re-developing, but since I updated to IE8, I've totaly forgotten about IE7, but ofcourse, there are still people using it.
I need to know what specific things I should change for this site to display the same way as it does in IE8. But I don't know where to start. Is there anyone with experience in this, who can give me a guideline? Are there scripts for doing so?
URL: http://www.testsite.c-tz.nl/
If you view this with IE8 it looks perfect.
But if you view it with IE7, things are not where they supposed to be, very ugly.
As the other said, your question is to broad. You'll need to break it down in smaller problems - which will possibly help you solve it yourself along the way.
One thing I did notice: IE has problems with display: inline-block on elements, which were orignally block elements. Either use span (only possible if it doesn't contain block elements), or use another method to places blocks side by side such as float.
BTW, you have far too many divs in your HTML. It's not necessary to wrap every img, every ul, etc. in it's own div. Usually any styles you apply to the div can just as well be applied you the "wrapped" element directly.
This is not a cool idea... But you can try when you are sick with very old browsers like ie6 or ie5 ...
1.use javascript to detect the browser and version..
2.later use the similar way to redirect the visitor to download the IE 8..
<script>
if(''+browserName+''+fullVersion+'' == "Microsoft Internet Explorer6.0" )
{
alert("You're using an Old Browser.Update the browser to view the website.(or) Try Latest Google Chrome , Firefox , Safari, Opera")
window.location = "http://www.microsoft.com/download/en/details.aspx?id=43"
}
//document.write(''+browserName+''+fullVersion+'');
</script>
Evening all.
I have created a basic HTML5 site. It validates in W3C validator. It seems to work fine in Chrome, Safari, Firefox etc. However, upon opening the page in IE8 I just get a black screen.
The site can be found at www.soultrainer.co.uk
I assumed I had missed a bracket out or something. However I am receiving 0 error messages in error consoles and looking through the code I can't see any errors.
Any help would be greatly appreciated.
P.S. I can also view the document tree in IE8 Developer Tools.
Thanks,
Gary
If you look at how IE has decided to parse this page using the developer tools, it's put everything into the head, and left the body an empty node.
This is because you open your head, but never close it ;) Removing the opening head (and also your closing body which has no opening) should sort this out, if not, just encase head content in head, and body content in body :)
A useful tool (still not 100% perfect) is the HTML Lint tool. It doesn't like your current structure, however if I copy it into the "Lint By Direct Input" tab, and remove the head and /body tag, then it's fine :)
#overlay{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
}
Maybe it's this? Try commenting certain stuff out and testing. You can easily find out what it is.
You seem to have CSS3 stuff for the body bg image as well. Try commenting that stuff out, maybe IE can't parse it properly.
You're missing the opening html tag at the top.
How do I place a background image to the left in every odd page and to the right in every even page with CSS when printing?
I have searched for quite some time to a solution about this. W3C mentions #page :left but also says that the context can only be used for margins.
Looking through the W3C CSS3 instead of CSS2 I do see somethings that might help (#page :left { #left-middle { content: url(..) }}). But It doesn't seem to work in any of the browsers I tried with namely Safari and FireFox.
CSS printing is always tricky, especially considering the multitude of ways different browsers handle it.
Have you considered exporting the print stuff to something like pdf format where print handling is much more consistent?
I am facing issues with text box size when veiwing in Fire Fox 3.6.
< input class="dat" type="text" name="rejection_reason" size="51" maxlength="70" onchange="on_change();">
style is as:
.dat {
font-family : verdana,arial,helvetica;
font-size : 8pt;
font-weight : bold;
text-align : left;
vertical-align : middle;
background-color : White;
}
Text box size in Fire Fox is bit smaller than IE6.
Not sure why IE6 and FireFox displaying text box of diff size.
Normal problem when developing for different web-browser engines.
Note that you maybe should develop for FireFox 3.6 rather than IE6 because IE6 have set to "old browser" that microsoft is not supporting anymore. Change your code to work good in FireFox, IE, Chrome, Opera.
look for more info at:
https://stackoverflow.com/questions/72394/what-should-a-developer-know-before-building-a-public-web-site
Try specifying the width in your css. If that remains broken, you can append an asterisk to the front of the width word as a second entry and it will apply only in IE6.
.dat
{
width: 100px;
*width: 105px; -- or whatever makes it look correct
}
EDIT: Thanks for the update on the special character.
With a more full explanation, which I just had to give to a manager;
IE6 was built around 2000, and ignored several significant web standards at the time. IE6 was somewhat of a "lesson learned"; IE7 is better about following those standards, and IE8 is better still.
Firefox was built around Netscape/Mozilla, and importantly, they followed the public standard as much as they could. Firefox largely behaves like Safari, Chrome, Opera, and the tons of tiny-marketshare browsers out there.
Businessperson asks:
So, why support the standard, instead of IE, which is the big kid on the block? Almost all of our customers use IE!
Answer:
Because IE is slowly moving towards the standard, too. If we support Firefox, IE8 is easy, and we probably get IE7 as well with almost no changes. IE6 is the fly in the ointment here.
If we support IE6 - the original proposal - then IE7 is a special case, IE8 is another special case, Firefox is a special case, and so on.
If we can encourage users to move away from IE6, that's our best case scenario. I believe Microsoft officially ended all support - including security patches - for IE6 when Server 2003 SP1 left support, April 2009. Google has stopped supporting IE6 entirely, for example, politely letting users know they need to upgrade "for the full site experience". Sites like IE6NoMore offer a pretty slick CSS popup for those running IE6, giving them a few upgrade options.
But in the meanwhile, since customers do use it, IE6 is here to stay, and it's easiest - and most maintainable - to build to the standards, and hack our way back to IE6 until it's done.
You have not specified its width just that you want it to take 51 charecters via the size attribute. I would suggest removing the Size="51" attribute and adding a style of width:666px;
EDIT: after your comment
Firstly just because you can does not mean you should. The corret way of solving this is changing all of your <input type="text"> to use a css class or css width to define their width.
However the following jQuery will add a width style to every input type=text which has a size attribute
jQuery( // on Document load
function($){ // run this function
$('input[type=text][size]') // find all input type=text with a size attr
.each( // for each element found
function(index, Element){ // run this function
var size = $(this).attr('size'); // get size attrubte value
$(this).width((size * 0.6)+"em"); // set the css width property to
}); // a nasty huristic
}
);
Now since this only effects inputs with size specified, as you touch each page you can remove the size attr and replace it with Css size, so eventuly you will not need this script.
The #size attribute gives a size in characters. However, unless you are using monospaced fonts, the size of a character itself is not something that is well-defined. In addition, different rendering engines may use different rules for character spacing and/or kerning. So, at the end, the attribute is no more than a vague hint to the browser.
Have you tried something like style = "width:51em;" instead? Haven't tested it, but the width property is well-supported, so I'd hope this would work. You can also use absolute (pixel) units if you want a more exact size.
Hope this helps.
I need to prepare print css style for some page. It's possible to have footer on every printed page?
I tried the code, I've found on the web:
display:block;position:fixed; bottom:0px;
but it works only in Firefox.
I can try to fix it with table, but in Q. here: CSS: Repeat table headers in print mode is info, that it doesn't work in IE5 (maybe I made some error, but it seems, that it doesn't work even in IE7).
Does anybody fixed problem with printing footer on every page in IE? Doesn't matter if with tables or without them.
Thanks for help.
I do not think it is possible to print headers and footer using IE current, since Even in IE8 it is compliance to CSS 2.1. But there are other tweaks to get around the problem. Hope this URL will help: http://msdn.microsoft.com/en-us/library/dd433064(VS.85).aspx.
PS: The URL you referenced, on the bottom of the page specifically said works only on safari.