Подскажите по стилям для media print

MeTaN · July 22, 2011

Здравствуйте.

Подскажите пожалуйста в чём у меня ошибка?

Есть необходимость распечатывать одну html. Для неё созданы два файла стилей, для экрана и для принтера. При печати на синем фоне должны быть белые бук вы. На экране буквы отображаются правильным цветом. При предварительном просмотре печати буквы уже чёрные и на бумаге такие-же. В стилях для печати уже прописал цвет во всех местах где надо и не надо, но это ничего не меняет. Где я ошибся не пойму.

Вот листинг HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>Печать наклеек</title>
		<link media="print, handheld" rel="stylesheet" href="print.css" type="text/css">
		<link media="screen" rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>
		<div id="wrap">
			<div id="fon"><img src="fon.gif"></div>
			<div id="f"><input name="familiya" type="text" value="Иванов"></div>
			<div id="io"><input name="ImiyaOtchestvo" type="text" value="Иван Иванович"></div>
			<div id="dl"><input name="doljnost" type="text" value="работник"></div>
			<div id="pd"><input name="podrazdel" type="text" value="Подразделение"></div>
			<div id="tn"><input name="tabel" type="text" size="4" value="0000"></div>
			<div id="foto"><img src="foto.jpg"></div>
		</div>
	</body>
</html>

Вот листинг css для экрана

html,body {margin: 0; padding: 0; height: 100%;}
* {border: 0px dotted red; color: #fff; margin:0; padding:0;}
#wrap {width: 500px; margin: auto; position: relative; font-size: 1.3em;}
#fon {text-align: center;}
#fon img {width:100%}
input {text-align: center; background: none; border: 0px solid green; width: 100%}
#f,#io,#dl,#pd,#tn {position: absolute; left:0; width: 100%; text-align: center;}
#f {top: 25%;}
#io {top: 33%;}
#dl {top: 45%;}
#pd {top: 53%;}
#tn {width: 20%; left:68%; bottom: 15%; text-align: left;}

#f input {font-size: 2.3em;}
#io input {font-size: 1.7em;}
#dl input {font-size: 1.2em;}
#pd input {font-size: 1.2em;}
#tn input {font-size: 1.5em;}

#foto {width: 35%; position: absolute; left: 5%; bottom: 5%; }
#foto img {width: 100%;}

Вот листинг css для принтера

html,body {margin: 0; padding: 0; height: 100%; font-family: arial serif; color: #fff !important;font-family: Arial, Helvetica, sans-serif;}

#wrap {width: 4.6cm; margin: auto; position: relative; font-size: 0.25cm; color: #fff !important;}
#fon {text-align: center; color: #fff !important;}
#fon img {width:100%; color: #fff !important;}
input {text-align: center; background: none; border: 0px solid green; width: 100%; color: #fff !important;}
#f,#io,#dl,#pd,#tn {position: absolute; left:0; width: 100%; text-align: center; color: #fff !important;}
#f {top: 25%; color: #fff !important;}
#io {top: 33%; color: #fff !important;}
#dl {top: 45%; color: #fff !important;}
#pd {top: 53%; color: #fff !important;}
#tn {width: 20%; left:68%; bottom: 15%; text-align: left; color: #fff !important;}

#f input {font-size: 2.3em; color: #fff !important;}
#io input {font-size: 1.7em; color: #fff !important;}
#dl input {font-size: 1.2em; color: #fff !important;}
#pd input {font-size: 1.2em; color: #fff !important;}
#tn input {font-size: 1.5em; color: #fff !important;}

#foto {width: 35%; position: absolute; left: 5%; bottom: 5%; color: #fff !important; }
#foto img {width: 100%; color: #fff !important;}

Vlad · July 22, 2011

При печати фон игнорируется. Похоже браузер полагает, что белый цвет на белом фоне не распечатается, поэтому заменяет их стандартными значениями, т.е. чёрный цвет букв.

MeTaN · July 22, 2011

При печати фон игнорируется. Похоже браузер полагает, что белый цвет на белом фоне не распечатается, поэтому заменяет их стандартными значениями, т.е. чёрный цвет букв.

Скорее всего вы правы, поменял цвет букв на красный, отображаются верно. Буду значит пытаться добавить фон.

Sign In

Подскажите по стилям для media print

Question

MeTaN

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

MeTaN

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information