I'm trying to get a print only style sheet to work. The problem I'm having is with my border I can't get it to "turn off". Sorry about posting all my code here. I'm at work and external FTP is not allowed. Any help is appreciated.
Tom
HTML Page:
<html>
<head>
<title>BPM – WBI Modeler Learnign Hub – HomePage</title>
<meta name="keywords" content="WBI Modeler, WBI, WBI Home, BPM, Modeler">
<meta name="title" content="WBI Modeler Learnign Hub">
<meta name="comments" content="WBI Modeler Learnign Hub HomePage.">
<link rel=stylesheet href=http://www.webdeveloper.com/forum/archive/index.php/"/styles/sitestyles_all.css" type="text/css">
<link rel="stylesheet" type="text/css" media="print" href=http://www.webdeveloper.com/forum/archive/index.php/"include/print.css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"/iss-edu/include/footer.css" rel="stylesheet" type="text/css">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"/iss/bpm/include/bpm.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" link="#000099" vlink="#000099">
<div id="header">
<!--#include virtual="/include/rd_subheader.htm"-->
</div>
<div id="content">
<div id="logo">
<object classid="clsid
27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://Download .macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="748" height="100">
<param name="movie" value="/iss/bpm/logo/llogo3.swf">
<param name="quality" value="high">
<embed src=http://www.webdeveloper.com/forum/archive/index.php/"/iss/bpm/logo/llogo3.swf" width="748" height="100" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</div>
<div id="body">testing to see what's going on here.</div>
<div id="footer">
<!--#include virtual="/include/hf_footer.htm"-->
</div>
<div id="contact">
<!--#include virtual="include/bpm_content_footer.htm" -->
<div align="center" class="contentowner">Content last reviewed: 3/3/2004</div>
</div>
</div>
</body>
</html>
bmp.css
#footer {
margin-top: -20px;
margin-bottom: -15px;
}
#content {
width: 760px;
}
#logo {
border: 6px solid #B8E25E;
}
#body {
border-top: 0px;
border-right: 6px solid #B8E25E;
border-bottom: 6px solid #B8E25E;
border-left: 6px solid #B8E25E;
}
print.css
#header, #footer {
display: none;
}
#content {
width: 100%;
}
#logo {
border: 0px;
}
#body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24pt;
font-weight: bold;
border: 0px;
}I would normally avoid having element ids the same as a different elements name. Change #body to something else.Thank you, I took care of that. Any idea why the borders are still showing when I print the page?The borders go away for me in FF/print preview. I inlined the sheets for test purposes. Don't know if that is making a difference.Thanks Ray, I think it may just be an IE only problem. Our company only uses IE so that's all I've been designing for. I solved the problem by giving my visual style sheet a media type of screen.
<link rel="stylesheet" type="text/css" media="screen" href=http://www.webdeveloper.com/forum/archive/index.php/"include/bpm.css">
Tom
HTML Page:
<html>
<head>
<title>BPM – WBI Modeler Learnign Hub – HomePage</title>
<meta name="keywords" content="WBI Modeler, WBI, WBI Home, BPM, Modeler">
<meta name="title" content="WBI Modeler Learnign Hub">
<meta name="comments" content="WBI Modeler Learnign Hub HomePage.">
<link rel=stylesheet href=http://www.webdeveloper.com/forum/archive/index.php/"/styles/sitestyles_all.css" type="text/css">
<link rel="stylesheet" type="text/css" media="print" href=http://www.webdeveloper.com/forum/archive/index.php/"include/print.css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"/iss-edu/include/footer.css" rel="stylesheet" type="text/css">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"/iss/bpm/include/bpm.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" link="#000099" vlink="#000099">
<div id="header">
<!--#include virtual="/include/rd_subheader.htm"-->
</div>
<div id="content">
<div id="logo">
<object classid="clsid
27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://Download .macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="748" height="100"><param name="movie" value="/iss/bpm/logo/llogo3.swf">
<param name="quality" value="high">
<embed src=http://www.webdeveloper.com/forum/archive/index.php/"/iss/bpm/logo/llogo3.swf" width="748" height="100" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</div>
<div id="body">testing to see what's going on here.</div>
<div id="footer">
<!--#include virtual="/include/hf_footer.htm"-->
</div>
<div id="contact">
<!--#include virtual="include/bpm_content_footer.htm" -->
<div align="center" class="contentowner">Content last reviewed: 3/3/2004</div>
</div>
</div>
</body>
</html>
bmp.css
#footer {
margin-top: -20px;
margin-bottom: -15px;
}
#content {
width: 760px;
}
#logo {
border: 6px solid #B8E25E;
}
#body {
border-top: 0px;
border-right: 6px solid #B8E25E;
border-bottom: 6px solid #B8E25E;
border-left: 6px solid #B8E25E;
}
print.css
#header, #footer {
display: none;
}
#content {
width: 100%;
}
#logo {
border: 0px;
}
#body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24pt;
font-weight: bold;
border: 0px;
}I would normally avoid having element ids the same as a different elements name. Change #body to something else.Thank you, I took care of that. Any idea why the borders are still showing when I print the page?The borders go away for me in FF/print preview. I inlined the sheets for test purposes. Don't know if that is making a difference.Thanks Ray, I think it may just be an IE only problem. Our company only uses IE so that's all I've been designing for. I solved the problem by giving my visual style sheet a media type of screen.
<link rel="stylesheet" type="text/css" media="screen" href=http://www.webdeveloper.com/forum/archive/index.php/"include/bpm.css">