Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) border:none não funciona em impressão

Rafael Laurindo

Perguntado por Rafael Laurindo,

 Share

Pergunta

Rafael Laurindo

Rafael Laurindo

Postado
Postado (editado)

Galera, estou passando pelo seguinte problema: defini um css diferente para impressão de uma página, onde nesse outro css defino border:none em uma div, e aí está o problema, não funciona, quando coloco para vizualizar a impressão ele está lá com a borda. Alguém sabe o que se passa?

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites

17 respostass a esta questão

Posts Recomendados

  • 0
kuroi

kuroi

Postado
Postado

pra tirar a borda, eu uso border: 0;.

mas não entendi direito... você fala quando clica em Arquivo -> Visualizar Impressão no navegador, seria isso?? então na sua pagina ta aparecendo certo quando você abre ela?? sem borda??

se você puser uma borda com uma outra cor qualquer so pra ver se ele poe certo, o q acontece??

Link para o comentário
Compartilhar em outros sites
  • 0
Rafael Laurindo

Rafael Laurindo

Postado
  • Autor
Postado

É isso mesmo. Arquivo => vizualizar impressão. Se eu mudar a cor da borda não acontece nada. Ao abrir a página ela está correta, com a borda. Mas quando vou imprimir, não quero que saia a borda, quando coloco "visualizar a impressão", ela está lá, sendo que eu programei outro CSS para que não fique com essa borda. E chamei no media="print" href=... As outras coisas que eu impedi de sair não aparecem mesmo, essa borda é a única coisa que está me dando dor de cabeça. Entende?

Link para o comentário
Compartilhar em outros sites
  • 0
Rafael Laurindo

Rafael Laurindo

Postado
  • Autor
Postado (editado)

O código todo é muito grande, então fiz um de exemplo que também não funciona e simula a estrutura do sistema.

HTML

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" media="print">
    @import url("css/print/sample.css");
</style>

<style type="text/css">
    @import url("css/sample.css");
</style>
<body>
<center>
<div id="margin">
    <div class="title">Título da página</div>
    <div class="content">Conteúdo xxxxxxxxxxxxx</div>
</div>
</center>
</body>
css/sample.css 
body{
    margin:1cm;
}

div#margin{
    position:relative;
    width:27.7cm;
    height:19cm;
    border:1px solid;
}

.title{
    margin-top:1.3cm;
    font-family:Arial;
    font-size:12pt;
    font-weight:bold;
    text-align:center;
}

.content{
    font-family:Arial;
    font-size:10pt;
    text-align:center;
}
css/print/sample.css 
body{
    margin:1cm;
}

div#margin{
    position:relative;
    width:27.7cm;
    height:19cm;
    border:none;
}

.title{
    visibility:hidden;
    margin-top:1.3cm;
    font-family:Arial;
    font-size:12pt;
    font-weight:bold;
    text-align:center;
}

.content{
    font-family:Arial;
    font-size:10pt;
    text-align:center;
}

O "margin" na impressão não deveria sair (mas sai), nem o title(mas esse não sai).

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites
  • 0
*FIT*

*FIT*

Postado
Postado

Sim, por isso pedi apenas um teste. ;)

Se a borda continuasse aparecendo mesmo tirando ela da visualização também, isso mostraria que o problema não está no CSS, mas parece que não foi o caso.

No padrão, se não colocamos o atributo border a mesma não aparece, já tentou simplesmente não colocar?

Link para o comentário
Compartilhar em outros sites
  • 0
Rafael Laurindo

Rafael Laurindo

Postado
  • Autor
Postado (editado)

Sim, tentei. Não funciona. O que mais me intriga, é que, se eu tirar a borda da div principal, sem ser a de impressão, os textos sobem. Copie e cole o código acima postado e faça um teste que você vai ver. Borda não é margem, não deveria influenciar em nada.

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites
  • 0
Rafael Laurindo

Rafael Laurindo

Postado
  • Autor
Postado (editado)

mas eu gostaria que não subisse, faço como, uso top, ao invés de margin-top? Até onde sei, o margin-top, coloca uma margem se referenciando pelo elemento superior, mesmo que esse elemento não tenha borda, estou errado?

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites
  • 0
*FIT*

*FIT*

Postado
Postado

Bom, o top com certeza deve funcionar, levando em consideração que ele pegará a distancia do topo, e não do elemento, respeitando é claro, a DIV a quem ele pertence. Mas funciona sim.

O margin-top, se não me engano, começa a se contado a partir de algo "visível" por isso o problema com a borda.

Link para o comentário
Compartilhar em outros sites
  • 0
Rafael Laurindo

Rafael Laurindo

Postado
  • Autor
Postado (editado)

Bom galera, o problema foi resolvido no braço, mas a dúvida ainda continua, visto que até onde sei, não é para acontecer isso. Segue como resolvi.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" media="print">
    @import url("css/print/sample.css");
</style>

<style type="text/css">
    @import url("css/sample.css");
</style>

<body>
<div id="border"></div>
	<div class="title">Título da página</div>
	<div class="content">Conteúdo xxxxxxxxxxxxx</div>
</body>
css/sample.css 
body{
    position:relative;
    margin:1cm;
    width:27.7cm;
    left:50%;
    margin-left:-13.85cm;
}

div#border{
    /* O position absolute se referencia peloponto "0" é o canto superior esquerdo da página */
    position:absolute;
    width:27.7cm;
    height:19cm;
    border:1px solid;
    /* com o position absolute, e o valor negativo, se referência pelo objeto inferior */
    margin-top:-1.3cm;
    left:50%;
    margin-left:-13.85cm;
}

.title{
    margin-top:-1.3cm;
    font-family:Arial;
    font-size:12pt;
    font-weight:bold;
    text-align:center;
}

.content{
    font-family:Arial;
    font-size:10pt;
    text-align:center;
}
css/print/sample.css 
div#border{
    visibility:hidden;    
}

.title{
    visibility:hidden;
}

.content{
    font-family:Arial;
    font-size:10pt;
    text-align:center;
}

Se alguém quiser fazer um adendo. Fique à vontade.

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,2k
    • Posts
      651,9k
×
×
  • Criar Novo...