I am adding class="noPrint" for elements to hidden them
It is working fine in chrome but when I browse in Mozilla and IE, by default elements are not visible.
I need those elements to be hidden on print not by default.
Only with chrome it is working but in other browsers it is not
Here is my CSS Code :
<style type="text/css" media="print">
.noPrint{ display: none; }
.yesPrint{ display: block !important; }
</style>
You can use media queries to style things differently for print.
Something like this:
<style type="text/css">
#media print {
.noPrint{ display: none; }
.yesPrint{ display: block !important; }
}
</style>
I am trying to "engineer" a cover page in html+css that shows appropriately in browsers, fits exactly on the (A4) page, and prints it with background colors. no javascript---it has to go to epub2. I am enclosing my first attempt at a prototype. (the actual cover page will of course be more complex.)
the bad news is that it's already not working. the worse news is that it's not working differently in firefox and chromium under linux---and I have not even tried safari, IE, OSX, iOS, Android, and Windows yet.
I am not averse to starting over, as long as I can remain in the html+css paradigm (i.e., I don't want to have to create a png bit image in TeX if it can be avoided.).
can this be done? or is it time to go back to TeX? advice appreciated.
regards,
/iaw
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
body {
color: #EEFFEE;
font-weight: bold;
page-break-inside: avoid;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.page {
width: 21cm;
min-height: 29.7cm;
background-color: yellow !important;
color:black;
}
#page {
size: A4;
margin: 0;
}
#media print {
.page {
margin: 0;
page-break-after: always;
}
}
<!-- breaks color: -webkit-print-color-adjust: exact; -->
div.mytitle {
color:red;
background-color: blue;
text-align:center;
}
</style>
</head>
<body>
<div class="page">
<div class="mytitle">
<div style="margin:auto;font-size:100px;">Title</div>
subtitle
</div>
text
</div>
</body>
</html>
So in tinkering with your code if you move the -webkit-print-color-adjust: exact; to end of style it works for me in chrome ie and firefox. You can throw the code in http://www.onlinehtmleditor.net/ will see that it works as long as the line sits underneath your other rules. Hope it helps.
Will
My goal is to have this page printed from IE8 without the browser's footer and header appearing on it (page number and url). It prints the page in the landscape position (after inserting a lot of text where is "hello"), so it isn't a #media problem as I was thinking before, but for some reason IE puts his header right over the page text!
It works fine on Chrome, though. Any ideas? Here is my code:
<head>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<link rel="stylesheet" media="print" href="/print.css" type="text/css" />
<![endif]-->
<style type="text/css">
#page
{
size: A4;
margin: 0mm;
}
body
{
margin: 0px auto;
}
#media screen, projection{ }
</style>
</head>
<body>
Hello
</body>
And from my print.css:
#media print{
body
{
margin: 0px;
padding: 0px;
}
#page
{
margin: 0in !important;
size: auto landscape;
}
}
By the way, I know I can remove IE's header and footer on Page Setup but the client won't have the project that way.
This documentation may help: http://msdn.microsoft.com/en-us/library/ms530841(v=vs.85).aspx.
Perhaps try:
#page {
#top-left { display: none; }
#bottom-center { display: none; }
/* and so on */
}
I have a CSS similar to the one below.
.ui-icon {
font-size: 6em;
height: 180px;
width: 180px;
}
.ui-icon .ui-icon-label {
padding-top: 15%;
}
The top padding doesn't display the text in IE9 (i.e. ui-icon-label).
HTML is also given below.
<div class="ui-icon-color ui-icon">
<div id="icon-1">
<i class="icon-cog"></i>
</div>
<div class="ui-icon-label">My Label</div>
</div>
But the same code works well in Chrome and Firefox. IE9 displays the ui-icon-label till the padding is 13.4%. Till the value, when I increase it gradually the text moves downwards a bit. Above that value it suddenly disappears. But For me 15% looks the best position to place the label. I went through different solutions provided in the suggest like 'clear:both' or using the W3C validator. But they didn't help.
FYI, the icon-cog class comes from font-awesome.
Have you considered using a IE9 targeted stylesheet with media queries to solve that issue?
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="ie9.css" />
<![endif]-->
// In the CSS:
#media (max-width: ???px) {
.ui-icon .ui-icon-label {
padding-top: 30%;
}
}
position:fixed that doesn't work for Internet explorer 6. I can't really understand the fixes found on google. I need it to work in IE6, IE7, IE8 & FireFox 3.0.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>Sidebar fixed</title>
<style type="text/css">
#wrapper {
position:relative;
width:900px;
margin:0 auto 0 auto;
}
#sidebar_left {
position:fixed;
height:200px;
width:200px;
border:1px solid #000;
}
#sidebar_right {
position:fixed;
height:200px;
width:200px;
margin-left:700px;
border:1px solid #000;
}
#content {
position:absolute;
height:2000px;
width:480px;
margin-left:210px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar_left">
<p>Left sidebar</p>
</div>
<div id="sidebar_right">
<p>Right sidebar</p>
</div>
<div id="content">
<p>This is the content</p>
</div>
</div>
</body>
</html>
Don't support IE6! The sooner people stop hacking sites about for IE6, the less traction it will have and the quicker it will die! Or, add this code after your first style block;
<!--[if IE 6]>
<style type="text/css">
#sidebar_right, #sidebar_left {
position:absolute; /* position fixed for IE6 */
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
</style>
<![endif]-->
The result isn't super-smooth, but it does work.
UPDATE
I wasn't too clear on how this should be used; simply add the id (or class) of any elements that have "position:fixed" to the declaration list at the start of the above block and they will behave themselves in IE6.
yes IE6 sucks. here's the hack...
_position: absolute;
_top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
that basically tells IE6 to keep it absolutely positioned in the top left even as it scrolls.
this should go under the rest of your css for the element so it over-rides it in IE6.
here it is for your left bar...
#leftBar {
position:fixed;
top:0;
left:0;
width:200px;
_position:absolute;
_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}
I just tested this on IETester's version of IE6 and it worked great and... No Jitter, Whoo!
Let say you have a element with a class of box for example...
.box {
position: fixed;
top: 0px;
left: 0px;
}
Replace the opening <HTML> tag with conditional IE statements...
<!--[if IE 6]> <html id="ie6"> <![endif]-->
and
<!--[if !IE]--> <html> <!--[endif]-->
Then like MatW & mitchbryson suggested use 'expression' to simulate position fixed.
Note: This code goes after the original element's styles in the CSS.
#ie6 .box {
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
The problem is that on any page scroll the element will jitter, this is one way to compensate...
Note: This code goes at the top off your CSS or after your styled 'HTML { }' in your CSS.
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
According to Thomas Aylott # SubtleGradient.com ,
"... This forces the processing of the CSS before the page is redrawn. Since it’s processing the css again before redrawing, it’ll go ahead and process your css expressions before redrawing too. This gives you perfectly smooth position fixed elements!""
article link: http://subtlegradient.com/articles/2009/07/29/css_position_fixed_for_ie6.html
For example, all together...
<!--[if IE 6]> <html id="ie6"> <![endif]-->
<!--[if !IE]--> <html> <!--[endif]-->
<HEAD>
<STYLE>
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
.box {
position: fixed;
top: 0px;
left: 0px;
}
#ie6 .box {
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
</STYLE>
</HEAD>
<BODY>
<div class="box"></div>
</BODY>
</HTML>
Found this solution which I tweaked ( Basically the lines I changed was: $('#sidebar_left').css('top',document.documentElement.scrollTop); ):
// Editing Instructions
// 1. Change '#your_div_id' to whatever the ID attribute of your DIV is
// 2. Change '175' to whatever the height of your header is, if you have no header, set to 0
/********************************
* (C) 2009 - Thiago Barbedo *
* - tbarbedo#gmail.com *
*********************************/
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
if (document.documentElement.scrollTop > 299 || self.pageYOffset > 299 && document.documentElement.scrollBottom > 100) {
$('#sidebar_left').css('top',document.documentElement.scrollTop);
$('#sidebar_right').css('top',document.documentElement.scrollTop);
} else if (document.documentElement.scrollTop < 299 || self.pageYOffset < 299) {
$('#sidebar_left').css('top','299px');
$('#sidebar_right').css('top','299px');
}
}
}
It jitters and looks bad, but work on all browsers including IE6.
I recently wrote a jQuery plugin to get position:fixed working in IE 6+. It doesn't jitter on scroll, it looks at capability (not user-agent), works in Internet Explorer 6, 7, 8.
If you use strict mode in IE7+ position:fixed will be honoured, but by default IE7+ operates in Quirks Mode. This plugin checks for browser capability, and if it doesn't honour position:fixed, then it implements the jQuery fix.
http://code.google.com/p/fixedposition/
Something like this may work for you:
$(document).ready(function(){
$("#chatForm").fixedPosition({
debug: true,
fixedTo: "bottom"
});
});
You may need to make some minor CSS adjustments to get it working for your code. I'm working on "offset" values as options as we speak.
It is possible to do it with CSS expression, but with some extra hack to get a smooth scrolling:
html, body {
_height: 100%;
_overflow: hidden
}
body {
_overflow-y: auto
}
#fixedElement {
position: fixed;
_position: absolute; / ie6 /
top: 0;
right: 0
}