I'm having a problem while printing barcodes (Code 39 stadard). It's something that occurs intermittently.
-In Google Chrome:
It normally shows me the code, but when I see it on print view, it shows me a strange code instead of the original barcode it should show, like images below.
Before printing:
After printing:
-In Internet Explorer:
The only difference is that, when I try printing it shows me only the codes, like image:
I'm using a CSS to custom the barcode, and I'm using text, not the image, to show the barcode.
Could anyone help me?
ps.:
The CSS I'm using for the barcode (I think it is a default):
@font-face {
font-family: 'C39HrP24DhTtNormal';
src: url('c39hrp24dhtt-webfont.eot');
src: url('c39hrp24dhtt-webfont.eot?#iefix') format('embedded-opentype'),
url('c39hrp24dhtt-webfont.woff') format('woff'),
url('c39hrp24dhtt-webfont.ttf') format('truetype'),
url('c39hrp24dhtt-webfont.svg#C39HrP24DhTtNormal') format('svg');
font-weight: normal;
font-style: normal;
}
And this is the HTML:
<head>
<title>AAAAAAAAAA</title>
<script language="javascript" type="text/javascript" src="Controller/Configuratuion.js"></script>
<script language="javascript" type="text/javascript" src="Library/JQuery.js"></script>
<script language="javascript" type="text/javascript" src="Library/AjaxHelper.js"></script>
<script language="javascript" type="text/javascript" src="Library/Scripts.js"></script>
<script language="javascript" type="text/javascript" src="Controller/PrintCapaloteClienteController.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
PrintCapaloteClienteController.Init();
});
</script>
<link type="text/css" rel="Stylesheet" href="css/BarCode3de9/stylesheet.css" />
<link type="text/css" rel="Stylesheet" href="css/Style.css" />
<style type="text/css">
body#Print
{
padding: 10px 10px 10px 10px;
}
div#BarCodeContrainer
{
text-align: right;
}
div#HeaderContainer, .footer
{
border: solid 2px black;
}
div#MainContainer
{
text-align: center;
}
.leftText
{
text-align: left;
}
.rightText
{
text-align: right;
}
.centerText
{
text-align: center;
}
.header
{
text-align: left;
}
.header th
{
text-align: left;
border-top: solid 1px black;
border-bottom: solid 1px black;
}
.closeLeft
{
border-left: solid 1px black;
}
.closeRight
{
border-right: solid 1px black;
}
</style>
</head>
<body>
<div id="HeaderContainer">
</div>
<div id="MainContainer">
</div>
</body>
</html>