Foros del Web » Creando para Internet » CSS »

Problemas con IE y version para impresion

Estas en el tema de Problemas con IE y version para impresion en el foro de CSS en Foros del Web. hola, tengo un problema unicamente con IE , pues tengo dos estilos para la web, el estilo standar y uno para version de impresion utilizando ...
  #1 (permalink)  
Antiguo 10/05/2005, 12:05
Avatar de asinox  
Fecha de Ingreso: enero-2002
Ubicación: Santo Domingo
Mensajes: 2.712
Antigüedad: 15 años, 10 meses
Puntos: 6
Problemas con IE y version para impresion

hola, tengo un problema unicamente con IE , pues tengo dos estilos para la web, el estilo standar y uno para version de impresion utilizando un styleswitcher.js, el cual pueden encontrar y estudiar aqui http://www.alistapart.com/articles/alternate/

Ahora bien mi problema es el siguiente, los navegadores tienen un Print Preview el cual esta en el menu File, en IE pues los <div> que tengo display:none; para la version de impresion pues se muestran , y al enviar a imprimir pues se imprime todo (los div ocultos y los no ocultos)... mientras que en Firefox, opera, mozilla y netscape esto no sucede...

alguien me dice que sucede con explorer en este caso?

Saludos
__________________
www.dataautos.com
  #2 (permalink)  
Antiguo 10/05/2005, 15:03
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
asinox, nos puedes mostrar tus estilos? tu html? como enlazas tu css?
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #3 (permalink)  
Antiguo 10/05/2005, 16:10
Avatar de asinox  
Fecha de Ingreso: enero-2002
Ubicación: Santo Domingo
Mensajes: 2.712
Antigüedad: 15 años, 10 meses
Puntos: 6
Claro
[/php]

Stylo normal:
Código PHP:
/***********************************************/
/* HTML tag styles                             */
/***********************************************/ 

body{
    
font-familyArial,sans-serif;
    
color#333333;
    
line-height1.166;
    
margin0px;
    
padding0px;
    
margin-left0px;
    
margin-right0px;
    
margin-top0px;
    
background-color#004E90;
}

a{
    
color#006699;
    
text-decorationnone;
}

a:link{
    
color#006699;
    
text-decorationnone;
}

a:visited{
    
color#006699;
    
text-decorationnone;
}

a:hover{
    
color#006699;
    
text-decorationunderline;
}

h1{
 
font-familyVerdana,Arial,sans-serif;
 
font-size120%;
 
color#334d55;
 
margin0px;
 
padding0px;
}

h2{
 
font-familyArial,sans-serif;
 
font-size114%;
 
color#006699;
 
margin0px;
 
padding0px;
}

h3{
 
font-familyArial,sans-serif;
 
font-size85%;
 
color#FFFFFF;
 
margin0px;
 
padding0px;
}

h4{
    
font-familyArial,sans-serif;
    
font-size60%;
    
font-weightbold;
    
color#C4102D;
    
margin0px;
    
padding0px;
    
text-aligncenter;
}

h5{
 
font-familyVerdana,Arial,sans-serif;
 
font-size100%;
 
color#334d55;
 
margin0px;
 
padding0px;
}

/***********************************************/
/* Layout Divs                                 */
/***********************************************/

#masthead{
    
padding10px 0px 0px 0px;
    
width100%;
    
top0px;
    
height181px;
    
background-color#FFFFFF;
}

#content{
    
floatleft;
    
width54%;
    
background-color#F5F5F5;
    
border-left1px solid #BBBBBB;
    
border-right1px solid #BBBBBB;
}
html>body #content{
    
floatleft;
    
width54%;
    
background-color#F5F5F5;
    
border-left1px solid #BBBBBB;
    
border-right1px solid #BBBBBB;
}

/************* #globalNav styles **************/

#globalNav{
    
padding0px 0px 5px 10px;
    
color#cccccc;
    
text-alignright;
    
font-size10px;
}

#globalNav img{
 
displayblock;
}

#globalNav a {
    
font-size90%;
    
padding0 4px 0 0;
}

/************* #breadCrumb styles *************/

#breadCrumb{
    
font-size60%;
    
padding0px 0px 0px 0px;
    
background-color#F5F5F5;
    
font-familyVerdanaArialHelveticasans-serif;
    
color#0074B0;
    
margin0px;
    
positionrelative;
    
top:-1%;
    
width98.8%;
    
height:auto;
    
displayblock;
    
left0%;
    
text-alignright;
}
html>body #breadCrumb{
    
left0%;
    
top: -1%;
    
width98.8%;
}

/************** .feature styles ***************/
.feature{
    
padding0px 10px 0px 0px;
    
font-size65%;
    
font-familyVerdanaArialHelveticasans-serif;
    
vertical-aligntop;
    
text-alignjustify;
}
.
feature p{
    
padding0px 10px 0px 0px;
    
font-familyVerdanaArialHelveticasans-serif;
    
font-size100%;
    
text-alignjustify;
    
margin-top0px;
}
.
feature h3{
    
padding0px 0px 5px 0px;
    
font-familyVerdanaArialHelveticasans-serif;
    
font-size12px;
}

.
feature img{
    
floatleft;
    
padding10px 10px 0px 0px;
}


/************** .story styles *****************/

.story{
    
clearboth;
    
padding10px 0px 0px 10px;
    
font-size80%;
}

.
story p{
    
padding0px 10px 10px 0px;
    
font-familyVerdanaArialHelveticasans-serif;
    
font-size80%;
    
text-alignjustify;
}

/************* #siteInfo styles ***************/

#siteInfo{
    
clearboth;
    
font-size10px;
    
color#cccccc;
    
padding10px 10px 10px 10px;
    
background-color#FFFFFF;
}

/************* #search styles ***************/

#search{
    
padding5px 0px 5px 10px;
    
border-bottom1px solid #cccccc;
    
font-size90%;
}

#search form{
 
margin0px;
 
padding0px;
}

/************** #contenedor principal **************/
#contenedor{
    
positionrelative;
    
marginauto;
    
margin-top0px;
    
width772px;
    
vertical-aligntop;
    
border1px solid #AAAAAA;
    
top0px;
    
background-color#F5F5F5;
}

/***************************************/
/*       fix para menu y navegadores no-IE */
/***************************************/
html>body #noticias {
    
heightauto;
    
background-color#F5F5F5;
    
margin-left0px;
    
width74%;
    
floatleft;
    
margin0px;
    
margin-top42px;
    
padding0px;
    
text-aligncenter;
    
padding-top0px;
    
border-top1px solid #BBBBBB;
    
border-bottom1px solid #BBBBBB;
    
border-left1px solid #BBBBBB;
    
padding-bottom0px;
}
#noticias {
    
height94px;
    
background-color#F5F5F5;
    
margin-left0%;
    
width74%;
    
floatleft;
    
margin0px;
    
margin-top: -3px;
    
padding0px;
    
text-aligncenter;
    
border-left1px solid #BBBBBB;
    
border-bottom1px solid #BBBBBB;
    
border-top1px solid #BBBBBB;
}
#encuestas {
    
floatleft;
    
background-color:#F5F5F5;
    
displayblock;
    
top0px;
    
heightauto;
    
width152px;
    
vertical-aligntop;
}
.
input {
    
height15px;
}

#logo {
display:none;
}
html>body #logo { 
    
display:none;
}
.
encuestaForm {
    
font9px VerdanaArialHelveticasans-serif;
}
#h3 {
    
font-familyVerdanaArialHelveticasans-serif;
    
font-size100%;
    
color#C4102D;
    
margin0px;
    
padding0px;
    
font-weightbold;
}
.
h4_noticias {
    
font-familyArial,sans-serif;
    
font-size60%;
    
font-weightbold;
    
color#004E90;
    
margin0px;
    
padding0px;
    
text-alignleft;
}
.
mas_noticias {
    
font-familyArial,sans-serif;
    
font-size60%;
    
font-weightbold;
    
color#C4102D;
    
margin0px;
    
padding0px;
    
text-alignleft;
}
.
h4_noticias2 {
    
font-familyArial,sans-serif;
    
font-size80%;
    
font-weightbold;
    
color#004E90;
    
margin0px;
    
padding0px;
    
text-alignleft;
}
#h3_2 {
    
font-familyVerdanaArialHelveticasans-serif;
    
font-size80%;
    
color#C4102D;
    
margin0px;
    
padding0px;
    
font-weightbold;
}
.
mas_noticias2{
    
font-familyArial,sans-serif;
    
font-size80%;
    
font-weightbold;
    
color#C4102D;
    
margin0px;
    
padding0px;
    
text-alignleft;
}
.
linea_roja {
    
border-left1px solid #C4102D;
    
border-right1px solid #C4102D;
}
#descargas {
    
floatleft;
    
background-color:#F5F5F5;
    
displayblock;
    
top2px;
    
heightauto;
    
width152px;
    
vertical-aligntop;
    
border-top1px solid #BBBBBB;
}
.
descargas_titles {
    
font-familyArial,sans-serif;
    
font-size60%;
    
font-weightnormal;
    
color#004E90;
    
margin0px;
    
padding0px;
    
text-alignleft;
}
/**************************************************/
/*           menu nuevo                             */
/*******************************************************/

#nav {
    
margin0padding0;
    
width25%;
    
float:left;
    
background-color:#F5F5F5;
}
html>body #nav {
    
margin0padding0;
    
width25%;
    
float:left;
    
background-color:#F5F5F5;
    
margin-top40px;
}
#nav p {
    
background#C4102D;
    
color#fff;
    
fontbold 70verdanaarialsans-serif;
    
/*letter-spacing: -1;*/
    
padding2px 2px 2px 3px;
    
margin0;
    
/*width: 100%;*/
    
border-bottomsolid #004E90 1px;
    
display:block;
}
html>body #nav p {
    
background#C4102D;
    
color#fff;
    
fontbold 70verdanaarialsans-serif;
    
/*letter-spacing: -1;*/
    
padding2px 2px 2px 3px;
    
margin0;
    
/*width: 100%;*/
    
border-bottomsolid #004E90 1px;
    
display:block;
}
html>body #nav p.extend {
    
background-color#F5F5F5;
    
color#004E90;
    
font-familyVerdanaArialHelveticasans-serif;
    
displayblock;
}
#nav p.extend {
    
background-color#F5F5F5;
    
color#004E90;
    
font-familyVerdanaArialHelveticasans-serif;
    
displayblock;
}
html>body #nav p.extend {
    
background-color#F5F5F5;
    
color#004E90;
    
font-familyVerdanaArialHelveticasans-serif;
    
font-size:12px;
    
displayblock;
}
html>body #nav p a {
    
text-decorationnone;
    
color#004E90;
    
displayblock;
    
width100%;
    
font-familyVerdanaArialHelveticasans-serif;
    
font-size80%;
    
font-weightnormal;
}
html>body #nav p a {
    
text-decorationnone;
    
color#004E90;
    
displayblock;
    
width100%;
    
font-familyVerdanaArialHelveticasans-serif;
    
font-size80%;
    
font-weightnormal;
}
#nav p a {
    
text-decorationnone;
    
color#004E90;
    
displayblock;
    
width100%;
    
font-familyVerdanaArialHelveticasans-serif;
    
font-size80%;
    
font-weightnormal;
}
html>body #nav p a:hover {
    
color#ffffff;
    
background-color#004E90;
    
width100%;
    
height100%;
    
displayblock;
}
#nav p a:hover {
    
color#ffffff;
    
background-color#004E90;
    
width100%;
    
height100%;
    
displayblock;
}
html>body #nav ul {
    
displaynone;
    list-
stylenone;
    
margin0padding0;
}
html>body #nav ul {
    
displaynone;
    list-
stylenone;
    
margin0padding0;
}
html>body #nav ul {
    
displaynone;
    list-
stylenone;
    
margin0padding0;
}
#nav ul {
    
displaynone;
    list-
stylenone;
    
margin0padding0;
}
html>body #nav ul li {
    
color#c4102d;
    
font9px verdanaarialsans-serif;
    
margin0px 0px 0px 5px;
    
padding0px;
    
border-bottom1px solid #c4102d;
    
background-color#F5F5F5;
    
letter-spacing0px;
    
word-spacing:-1px;
}
#nav ul li {
    
color#c4102d;
    
font9px verdanaarialsans-serif;
    
margin0px 0px 0px 5px;
    
padding0px;
    
border-bottom1px solid #c4102d;
    
background-color#F5F5F5;
    
letter-spacing0px;
    
word-spacing:-1px;
}
html>body #nav ul li a {
    
text-decorationnone;
    
color#c4102d;
    
displayblock;
    
padding0px 0px 0px 0px;
    
margin0px 0px 0px 0px;
}
#nav ul li a {
    
text-decorationnone;
    
color#c4102d;
    
displayblock;
    
padding0px 0px 0px 0px;
    
margin0px 0px 0px 0px;
}
#nav ul li a:hover {
    
text-decorationnone;
    
color#FFFFFF;
    
background-color#930209;
}
html>body #nav ul li ul {
    
displaynone;
    list-
stylenone;
    
margin0px;
    
padding0px;
}
html>body #nav ul li ul li {
    
bordernone;

__________________
www.dataautos.com
  #4 (permalink)  
Antiguo 10/05/2005, 16:12
Avatar de asinox  
Fecha de Ingreso: enero-2002
Ubicación: Santo Domingo
Mensajes: 2.712
Antigüedad: 15 años, 10 meses
Puntos: 6
Stylo de Impresion:
Código PHP:
#encuestas{    display:none;}
#noticias { display:none;}
#navBar {display:none;}
#breadCrumb {display:none;}
#globalNav {display:none;}
#headlines {display:none;}
#masthead {display:none;}
#botones {display:none;}
#division {display:none;}
.division {display:none;}
.
botones {display:none;}
#masthead {    display:none;}
#globalNav {display:none;}
#globalNav img {display:none;}
#globalNav a{display:none;}
#descargas {display:none;}
#nav {display:none;}
#pageName {display:none;}

#content {
    
color#000;
    
padding5px 5px 5px 5px;
    
margin0 auto;
    
width:100%;
    
background-color:#FFF;
    /*background-image: url(../sombra.png);
    background-repeat: repeat-y;
    background-position: right 5px;*/
  
}
  
html>body #content {
    
color#000;
    
padding5px 5px 5px 5px;
    
margin0 auto;
    
width:98.5%;
    
background-color:#FFF;
    /*background-image: url(../sombra.png);
    background-repeat: repeat-y;
    background-position: right 5px;*/
  
}
 
#contenedor {
    
color#000;
    
width7in;
    
/*padding: 0;*/
    
padding5px 5px 5px 5px;
    
margin0 auto;
    
background-color:#FFF;
    
border1px solid #000000;
    
background-imageurl(../sombra.png);
    
background-repeatrepeat-y;
    
background-positionright 4px;
  }
html>body #contenedor {
    
color#000;
    
width7in;
    
/*padding: 0;*/
    
padding5px 5px 5px 5px;
    
margin0 auto;
    
background-color:#FFF;
    
border1px solid #000000;
    
background-imageurl(../sombra.png);
    
background-repeatrepeat-y;
    
background-positionright 5px;
  }
body 
    
background-color:#ACA899;
 
}
a{
    
color#006699;
    
text-decorationnone;
}
a:link{
    
color#006699;
    
text-decorationnone;
}

a:visited{
    
color#006699;
    
text-decorationnone;
}

a:hover{
    
color#006699;
    
text-decorationunderline;
}
#siteInfo{
    
clearboth;
    
font-size10px;
    
font-family:VerdanaArialHelveticasans-serif;
    
color#cccccc;
    
padding10px 10px 10px 10px;
    
width:80%;
    
/*width: 7in;
    background-color: #FFFFFF;
    background-image: url(../sombra.png);
    background-repeat: repeat-y;
    background-position: right 5px;*/
}
html>body #siteInfo{
    
clearboth;
    
font-size10px;
    
font-family:VerdanaArialHelveticasans-serif;
    
color#cccccc;
    
padding10px 10px 10px 10px;
    
width90%;
    }
/*#sombra {
    /*background-color:#FFFFFF;
    width: 7.1in;
    display:none;
    }*/
#logo { display:block;}
html>body #logo { display:block;} 
y los llamo de esta forma:
Código PHP:
<link rel="alternate stylesheet" href="print_css.css" type="text/css" title="title"/>
<
link rel="stylesheet" href="3col_leftNav.css" type="text/css"/> 
__________________
www.dataautos.com
  #5 (permalink)  
Antiguo 10/05/2005, 16:12
Avatar de asinox  
Fecha de Ingreso: enero-2002
Ubicación: Santo Domingo
Mensajes: 2.712
Antigüedad: 15 años, 10 meses
Puntos: 6
El styleswitcher.js con que cambio los estilos:
Código PHP:
function setActiveStyleSheet(title) {
  var 
iamain;
  for(
i=0; (document.getElementsByTagName("link")[i]); i++) {
    if(
a.getAttribute("rel").indexOf("style") != -&& a.getAttribute("title")) {
      
a.disabled true;
      if(
a.getAttribute("title") == titlea.disabled false;
    }
  }
}

function 
getActiveStyleSheet() {
  var 
ia;
  for(
i=0; (document.getElementsByTagName("link")[i]); i++) {
    if(
a.getAttribute("rel").indexOf("style") != -&& a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return 
null;
}

function 
getPreferredStyleSheet() {
  var 
ia;
  for(
i=0; (document.getElementsByTagName("link")[i]); i++) {
    if(
a.getAttribute("rel").indexOf("style") != -1
       
&& a.getAttribute("rel").indexOf("alt") == -1
       
&& a.getAttribute("title")
       ) return 
a.getAttribute("title");
  }
  return 
null;
}

function 
createCookie(name,value,days) {
  if (
days) {
    var 
date = new Date();
    
date.setTime(date.getTime()+(days*24*60*60*1000));
    var 
expires "; expires="+date.toGMTString();
  }
  else 
expires "";
  
document.cookie name+"="+value+expires+"; path=/";
}

function 
readCookie(name) {
  var 
nameEQ name "=";
  var 
ca document.cookie.split(';');
  for(var 
i=0;ca.length;i++) {
    var 
ca[i];
    while (
c.charAt(0)==' 'c.substring(1,c.length);
    if (
c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return 
null;
}

window.onload = function(e) {
  var 
cookie readCookie("style");
  var 
title cookie cookie getPreferredStyleSheet();
  
setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var 
title getActiveStyleSheet();
  
createCookie("style"title365);
}

var 
cookie readCookie("style");
var 
title cookie cookie getPreferredStyleSheet();
setActiveStyleSheet(title); 
__________________
www.dataautos.com
  #6 (permalink)  
Antiguo 10/05/2005, 16:14
Avatar de asinox  
Fecha de Ingreso: enero-2002
Ubicación: Santo Domingo
Mensajes: 2.712
Antigüedad: 15 años, 10 meses
Puntos: 6
y link para tomar x estilos:
Código PHP:
<a href="#" onclick="setActiveStyleSheet('standard'); return false;">Normal</a>
<
a href="#" onclick="setActiveStyleSheet('title'); return false;">Normal</a

A ver si alguien me da una mano
__________________
www.dataautos.com
  #7 (permalink)  
Antiguo 11/05/2005, 02:54
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
asinox, no necesitas el javascript para cambiar de estilos, lo que necesitas es enlazar tu css para impresion de esta manera:

<link rel="alternate stylesheet" href="print_css.css" type="text/css" media="print"/>


y automaticamente el navegador lo toma al momento de imprimir, sin necesidad de javascript.

ve este otro articulo:
http://www.alistapart.com/articles/goingtoprint/
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #8 (permalink)  
Antiguo 11/05/2005, 07:26
Avatar de asinox  
Fecha de Ingreso: enero-2002
Ubicación: Santo Domingo
Mensajes: 2.712
Antigüedad: 15 años, 10 meses
Puntos: 6
si eso lo se kemie, pero mi problema no es que se imprima el documento , sino que los usuarios puedan ver la web en la forma en que va salir impresa sin tener que ir a Print Preview....me doy a entender?
__________________
www.dataautos.com
  #9 (permalink)  
Antiguo 11/05/2005, 09:09
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
de cualquier manera especifica tu css de impresión con media=print además de con tu switcher, de esa manera te aseguras que es la que se va a ausar al momento de imprimir.
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #10 (permalink)  
Antiguo 12/05/2005, 12:11
Avatar de asinox  
Fecha de Ingreso: enero-2002
Ubicación: Santo Domingo
Mensajes: 2.712
Antigüedad: 15 años, 10 meses
Puntos: 6
pues gracias :) , ayer logre solucionarlo
__________________
www.dataautos.com
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:14.