I'm debugging a site that has problems with element positioning when printing (I have a separate print.css file linked by a link element with the media="print" attribute). This problem only occurs in IE7 and IE8.
What I'm looking for is a way to view the page using the print media type, but while still having IE8's developer tools available to view element details and edit in real-time, etc.
The function I'm looking for would be similar to the "Display CSS by Media Type" feature in Chris Pederick's Web Developer Extension for Firefox. (But this problem doesn't occur in firefox...nor in safari, or even in IE6.)
Why not just assign the screen attribute to the print stylesheet for your debugging session (and remove the screen version or swap the media attributes)?
What I have always done, is I have disabled (commented out the "screen" style sheet) and converted the media="print" style sheet to be media="screen". Only way I know how with out printing a bunch of test pages.
i've always used print preview, never had a problem with it. just open it up in IE; i'd target it with conditionals, but "hacks" work just as well.
you're seeing differences....what media attributes do your other link elements have? if you have one for all, switch it to type="screen, projection">
Related
I'm debugging a style problem in Internet Explorer 9.
It look's like ie9 doesn't apply all style rules defined in my css file. As I look in the network tab of Developer Tools, I see for example the '.mobileMenu' class present.
But the style is not applied to the element, if I use 'Inspect element', the browser simply doesn't know about any related style rules. A large portion of the css file (but not all of it) is simply ignored by ie9.
It works in Chrome, Firefox and IE 10. There are a couple of CSS validation errors, but none that look really troubling.
My guess, which is a guess, is that perhaps some stylesheet property (CSS3?) is causing ie9 to stop rendering and skip the rest of the file. Is that possible?
Anyone any experience?
Thanks !
In the end, it had nothing to do with CSS3.
Ie9 did stop rendering, not because of anything in the css file itself, but because the style sheet was to large..
According to Microsoft:
http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
We split the Style Sheet into two seperate files and the problem was resolved.
Some CSS3 properties are not accepted by IE9. See this page for which browsers support which properties.
If the CSS3 properties are not support by IE9, you can try using a plugin like:CSS3PIE
We are trying to use an #media print.css style sheet to enable a web page to print a set of Avery labels (6 up on a sheet - 4" x 3"). Generally a print media style sheet seemed like a perfect solution to having a page that looks like a list on screen, but when you print the list you get imprinting for Avery badges!
The challenge is in the details though. In addition to the fact that each browser seems to have unique interpretations of print styling and some of the rules just don't work. I've seen and studied most of the basic info readily available on using the print.css. It's fairly easy to override font colors with black and set details to print or not but what this assignment needs is precise element placement and styling within the #page details.
The site already features Bootstrap and other linked .css pages though I've unlinked them to test the pages and am trying to isolate out anything that could also be interfering with print styling.
It appears that float isn't working in IE. Our list page content to print lays out in floated divs in Chrome but font styling and other divs aren't rendering as intended. Firefox isn't displaying any of the required print content but indicating page numbering appears to agree with Chrome that there are 56 pages of labels, (sorry if you can't see them?) My hope is that this document can serve as a repository for the tips tricks and limitations of media #print.
I'm experiencing the same problem. I need to print onto specific Avery labels at exact dimensions and although I can get it to work with Chrome (despite it ignoring some Print CSS styles) - it doesn't work in Firefox. Safari seems to be in it's own world also.
I think the only way I'm going to solve this is to generate PDF's that the user has to download and print (or print the PDF's from their browser).
Sucks, but haven't found any solutions for a "CSS Print Browser Reset".
I'm trying to finish this site http://jolaga.laohost.net/topsleva/. Almost all looks good in all normal browsers. But IE8 looks like in mobile mode - all containers are 100% width.
Respond.js and html5shiv.js are included. Meta is in head section. I don't know what else should I do ? For sure IE ignores media queries - but I didn't figure out why.
shot in the dark, because i don't have ie7/8 installed at the moment, but here goes:
offhand, it looks like you are targeting less than ie9, so here ie7/8, with ie7.css.
i never use bootstrap, but i'm assuming you are using the regular repo, and not one you've tweaked on your own.
if thats the case, i'm positive that style sheet is only for ie7, and that is why ie8 is all busted up.
you have two options here:
1) get rid of existing conditional comments. create a style sheet for ie8 and place it inside its own conditional comments targeting ie8 and only ie8/
keep the existing ie7.css style sheet and wrap it up in its own set of conditional comments targeting itself.
<!--[if lt IE 9]>
<script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type='text/javascript' src="js/respond.js"></script>
<![endif]-->
<!--[if IE 8]>
<link href="/css/bootstrap-ie8.css" rel="stylesheet">
<![endif]-->
<!--[if IE 7]>
<link href="/css/bootstrap-ie7.css" rel="stylesheet">
<![endif]-->
2). keep ie7.css, create new styles for ie8 within ie7.css file, but you have to target one of the ie versions with a hack, specific to that version. you can read all about it, and view examples here:
http://www.impressivewebs.com/ie7-ie8-css-hacks/
Solved. The problem was that bootstrap css was before custom styles. I swapped them and everything works like charm
I'm working with a custom app that doesn't allow classes to be applied to the tag and the original CSS we were working with uses this methodology. Instead, the app requires an individual CSS file for each browser (lame, I know).
Our company has a sample page that has the working code applied with browser specific overrides placed on the HTML tag. So, what I'd like to do is load up the page in each version of IE and see what specific CSS is actually applied, then just upload each CSS file to the app. Does anyone know a tool that will do that?
Note, I did find this: How can I see which styles in my stylesheet are actually being applied to the current page?
But the answers were for firefox. :(
If you press F12 in Internet Explorer it will bring up Developer Tools.
From here you can inspect the HTML/CSS and see the specific CSS rules applied.
With these tools you can then change the browser mode Internet Explorer runs in e.g. If you are using IE9 you can set it to run in IE9 Compatibility Mode, IE9, IE8, IE7.
You can also change the document mode IE9 Standards, IE8 Standards, IE7 Standards and Quirks mode.
EDIT : You could try http://unused-css.com/
How do you get cross browser compatibility in Print? any tips for print css file to make print on paper identical from all browser.
Edit
I'm already using Eric meyer CSS but still facing inconsistencies in different browser when we take print from site.
Is there any CSS declarations which we can use always and put at a top in print css , Like other css resets which work good in media=screen?
I'm already using a different css for print (print.css) with media="print"
Would it be better to keep * {posotion:static} , *{float:none} , * {clear:both}
in print css always?
Identical results are impossible. The output depends not only on CSS but also on individual settings for page margins, the printer’s capabilities, available fonts, paper format (A4 vs US Letter) and probably a lot more.
For CSS
Avoid floats and positioning (relative, absolute and fixed). Especially Mozilla (Firefox) can not handle those properties very well.
Use page-break-* but don’t rely on it. Some browsers insert page breaks even in images.
You don’t know the page width and height (could A5). Keep anything as flexible as possible.
For performance, put your print style into the main stylesheet in a #media print {} rule.
Use pt not px for borders and margins. A printer doesn’t know what a pixel is and may come to strange results.
Develop your print layout in Opera, which has the best support for #media print currently, and insert compatibility hacks, when you’re done.
Internet Explorer may crash on print, if you use its reserved IDs.
Never rely on print preview. You get very different results on real printouts. Save the rain forest with a print-to-pdf-driver. :)
In html there use a link with the attribute "media" set to "print".
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">
You can disable all other css and just use your "print" css. set the media first to "screen". Test it just like your testing a normal css in all browsers.
In my experience, what it looks in the screen, will pretty much look when it's printed.
Advice:
1) keep your layout as fluid as possible for it to be flexible to what ever the paper margin it was set to.
2) keep it simple.
3) In IE, backgrounds might be missing. To fix this, go to: Tools>Internet Options>Advanced. on the Settings box, scroll down to Printing and enable "Print background colors and images"