|
CSS - Using Css To Generate Printer-friendly Webpage For Ie, Netscape, And Firefox
I am using CSS to generate a printer-friendly webpage for Internet Explorer. The same CSS however is not working with Netscape or FireFox.
I am using the following doctype in my html file. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> The contents within the <DIV> and <P> tags I am trying to hide using Print CSS works correctly in Internet Explorer 6.0. However, the contents are getting printed when Netscape 7.1 or FireFox is used. Can someone help? Similar TutorialsHi All I hope i have landed in the right forum. its kind of information overload for me. Anyway Here is my question I have a HTML page with large number of text boxes and buttons. I want to print this page but without the text boxes and buttons. Is there any easy way to do it? TIA Nevermind Hello I am very new to css. Can someone tell me if css is the way to go when making a printer friendly page? or if there are any usefull tutorials on this out there that would be really helpfull. just so i know where to start from. Thanks Hi, I'd like to have each page of my website print out "scaled to fit" on regular letter-sized paper in landscape orientation. The size of the background element that all page content fits on is 950px w x 750px h. So, even if the user scaled one of the web pages onscreen, when they print it out on their inkjet, it should still print the full page, scaled to fit on the letter-sized paper. These are the steps I know to take, but I am missing some info. Can anyone help me fill in the missing steps/info? If you would keep it in bulleted (1,2,3) format that'd be easiest for me to understand (still new at web work). I really appreciate it! 1. Put this code in the head section of each html web page: <link href="print.css" rel="stylesheet" type="text/css" media="print" /> 2. Create a print.css file (What code goes in here?) 3. Link the print.css file to each html web page. 4. Upload all html web pages, and put the print.css file in the same root folder Thank you! Dear all, I want to add a print icon to my pages, which would print an alternate page (a printer friendly version). I have the following code: <link href="print.php?cli_id=2" rel="alternate" media="print" /> This works fine if I use the print icon in my browser, but if I use javascript:window.print(); within the page, it seems to ignore the alternate printer friendly page. My page appears in frames, and I plan to remove the browser toolbar and replace with a custom one in the page once the application is complete. Any ideas anyone? many thanks, Mark I am having a problem changing the bg colors of my tables in netscape and firefox using CSS... Ive tried everything i know, You can view the pages at RateHQ.com look at it in IE and Netscape Any ideas would be great! Thanks, Derek Does anyone know why firefox and netscape would interpret a div differently than IE6 and Opera? Here is my CSS: Code: #featured_prod{
background-image:url(images/featured_prod.jpg);
background-repeat:no-repeat;
color:#000000;
font:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
width:350px;
height:200px;
position:absolute;
padding:160px 20px 20px 130px;
left:16px;
top:21px;
}
and the markup: Code: <div id="featured_prod"> <a class="mylinks" href="">Click here for more information.</a> </div> Okay, everything looks okay to me in the code but it does this in both firefox and netscape: cick for image Notice that the red highlight is the outline of the div. And this is how it looks in both IE6 and Opera7: click for image The problem is that the text "Click here for more information" does not line up correctly due to the different browser interpretations. Any wisdom? I'm trying to learn this CSS thing (driving me crazy!!) and I'm having problems. I validated my HTML (using HTML 4.01 Transitional) and it came back 100% perfect. I validated the CSS, and I did as many of the corrections as I could figure, and I got back this when I re-validated the .css file: Quote: To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML. Warnings URI : file://localhost/U:\iQuire2\stylesheets\indexstyles1.css Line : 15 (Level : 1) You have no background-color with your color : a:link Line : 16 (Level : 1) You have no background-color with your color : a:hover Line : 18 (Level : 1) You have no background-color with your color : a:visited Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 This is my .css file as it stands now: css Code: Original - css Code body {background:#ffffff; color:#000000; padding:0 0 0 0; margin:0 0 0 0; width:100%;} /* Page DIV Tag Stylesheet Codes */ div { position:absolute; top:1px; right:90%; bottom:auto; left:0px; } /* Hyperlink 'a href' Tags Handling */ a:link {color:#0000ff; background:transparent; font-weight:bold; text-decoration:none;} a:hover {color:#0000ff; background:transparent; font-weight:bold; text-decoration:underline;} a:active {color:#0000ff; background:#ffff00; font-weight:bold; text-decoration:none;} a:visited {color:#800000; background:transparent; font-weight:bold; text-decoration:none;} /* Text Formatting Primary Tags */ h1,h2,h3,h4,h5,h6 { font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#000080; } h1,h2,h3 {text-align:center;} h4,h5,h6 {text-align:left;} h1 {font-size:2em;} h2,h4 {font-size:1.5em;} h3,h5 {font-size:1em;} h6 {font-size:.75em;} p { font-family:TimesNR, Times, serif; font-size:.875em; text-align:left; } p.ctr { font-family:TimesNR, Times, serif; font-size:.875em; text-align:center; } p.arial { font-family:Arial, Helvetica, sans-serif; font-size:.75em; text-align:left; } p.arialc { font-family:Arial, Helvetica, sans-serif; font-size:.75em; text-align:center; } p.footertxt { font-family:Arial, Helvetica, sans-serif; font-size:.75em; text-align:center; font-weight:bold; } p.fineprint { font-family:Arial, Helvetica, sans-serif; font-size:.5em; text-align:center; font-weight:bold; } p.breadcrumbs { font-family:Arial, Helvetica, sans-serif; font-size:.5em; font-weight:bold; text-align:left; } /* SPAN Tag Text Formatting */ span.bold {font-weight:bold;} span.ital {font-style:italic;} span.und {text-decoration:underline;} span.boldital {font-weight:bold; font-style:italic;} span.boldund {font-weight:bold; text-decoration:underline;} span.bolditalund {font-weight:bold; font-style:italic; text-decoration:underline;} span.italund {font-style:italic; text-decoration:underline;} /* List Formatting */ ul {text-align:left;} li {font:normal bold normal .75em Arial, Helvetica, sans-serif;} /* Table Formatting */ table { border-width:0px; width:auto; } td { border-width:0px; width:auto; text-align:left; vertical-align:top; } table.topbanner { border-width:0px; width:100%; } td.headrlogo { border-width:0px; width:156px; text-align:center; vertical-align:middle; padding:2px; } td.headrtxt { border-width:0px; width:90%; text-align:center; vertical-align:middle; padding:2px; } td.headrbuttons { border-width:0px; width:auto; text-align:center; vertical-align:top; padding:0; background-image:url(blugradient_50x25.jpg); } table.buttontb { border-width:0px; width:auto; margin:0 0 0 0; } td.butntoplvl0 { border-width:0px; padding:1px; width:115px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:9pt; text-align:center; vertical-align:middle; } td.butntoplvl1 { border-width:0px; padding:1px; width:115px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:9pt; color:#ffffff; text-align:center; vertical-align:middle; background-color:#5984c8; } table.tborder { border-width:1.5px; border-style:solid; border-color:#000080; width:auto; margin-right:auto; margin-left:auto; } td.dborder { border-width:1px; border-style:solid; border-color:#000080; text-align:left; vertical-align:top; } td.dborderctr { border-width:1px; border-style:solid; border-color:#000080; text-align:center; vertical-align:middle; } table.footer { border-width:2px; border-style:solid; border-color:#000080; width:100%; } td.footertd { border-width:0px; width:auto; text-align:center; vertical-align:middle; padding:8px; }
With how it's written currently, it looks great in Microsoft Internet Explorer 6x. But when I try to bring up the same page that looks so well in IE in Netscape or Mozilla Firefox, everything becomes "squished" to the left-side of the browser window. So, for someone who's more comfortable with .css than I am (I'm working from books), can you tell me where I went wrong in this thing? I can understand if the hyperlink formatting might not be "up to code" so to speak (warning from W3C CSS Validator above), but would it affect the formatting of the entire document?? I want to avoid forcing the layout into a specific width, so I tried using percentages and "auto" for styles so that it will be a fluid layout. As I said, IE shows it just the way I want it to look. Firefox & Netscape squash everything down as if there were no formatting whatsoever. Do I need to have separate .css code for each browser?? I don't have a Mac, but my boss does and I'm sure he'll want the site to look good working through Safari too (can't test it) HELP!!! I have the following CSS: #main_navmenu{ padding-top:10px; width:120px; height:80%; float:left; margin-left:7px; font-size:11pt; text-align:center; padding-right:10px; } #main_navmenu a:link{ color:#777777; width:100px; background-color:#FDF4EE; text-decoration:none; font-weight:bold; border:1px solid #663333; margin-top:2px } #main_navmenu a:visited{ color:#777777; width:100px; background-color:#FDF4EE; text-decoration:none; font-weight:bold; border:1px solid #663333; } #main_navmenu a:hover{ color:#000000; width:100px; background-color:#DDD4CE; text-decoration:none; font-weight:bold; border:1px solid #663333; } why in IE do the link buttons look fine, with a width of 100px, and a nice gap between them. In FireFox, there is no gap between the buttons, and each button is only as wide as the text inside it. Thanks in advance for any help I'm a little new to the use of css for layouts and had a few little problems on the way. The major problem I haven't been able to solve can be seen in the following 2 pictures. From what I have read before IE misinterrupts the box idea a bit so it might be the fact that IE is just showing it up wrong giving me false hope. IE - URL Netscape - URL I want to have the div have a minimum height as I state in the stylesheet, and then the div will stretch to the height of the text if that is higher than the minimum height. The code I have comes out the way I wish it to in IE but in Netscape and Firefox, the background color stays to the div height given, but the text overflows. I have tried playing with the overflow options but this did not seem to work. I have a feeling it is just a simple solution but I may be far off with the way it is designed with the blocks and inline, etc. I looked at a few examples and tutorials on the web and this is what I have come up with. The actual website of this has lots more content but I am trying to not make it too complicated and then I will apply it to the site. Any help would be greatly appreciated. URL is URL Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<p>logo</p>
</div>
<div id="headerPic">
<p>headerpic</p>
</div>
</div>
<div id="menu">
menu
</div>
<div id="middle">
<div id="contentPic">
<p>d</p>
</div>
<div id="content">
<p>
overflowing text is here
</p>
</div>
</div>
<div id="footer">
<div id="footerLeft">
<p>left footer</p>
</div>
<div id="footerCenter">
<p>center footer</p>
</div>
<div id="footerRight">
<p>right footer</p>
</div>
</div>
</div>
</body>
</html>
********************************************* Code:
#wrapper {
background-color: #000000;
width: 750px;
text-align: left;
margin: auto;
}
body {
background-color: #CCCCCC;
margin: 0px;
text-align:center;
}
#header {
background-color: #FFFF00;
display: block;
height: 100px;
}
#menu{
background-color: #00FF00;
display: block;
width: 750px;
height: 50px;
}
#middle{
background-color: #CC0099;
display: block;
height: 320px;
}
#footer {
background-color: #6699CC;
display: block;
height: 30px;
}
#logo{
display: inline;
width: 200px;
height: 100px;
float: left;
}
#headerPic {
display: inline;
width: 550px;
height: 100px;
float: left;
}
#contentPic {
display: inline;
width: 200px;
height: 320px;
float: left;
}
#content {
display: inline;
width: 550px;
height: 320px;
float: left;
}
#footerLeft {
display: inline;
width: 100px;
float: left;
}
#footerCenter {
display: inline;
width: 450px;
float: left;
}
#footerRight {
display: inline;
width: 200px;
float: left;
}
I have just put my website live and it is running perfect in MS Explorer but in firefox and netscape the links at the bottom of the page are not working properly. Site URL is http://www.updatetechnology.ie here is the code i have for these links: <TD><span class="grey"><a href="copyright.htm">Copyright</a> | <a href="sitemap.htm">Sitemap</a> | <a href="links.htm">Links</a> </span></TD> and the corrseponding css class: .grey {font-family: Arial, Helvetica, san serif; font-size: 9pt; TEXT-DECORATION:NONE; COLOR:#ffffff; } .grey A{ COLOR:#ffffff; font-family: Arial, Helvetica, san serif; font-size: 9pt; font-weight: bold; font-style: normal; text-decoration: none; font-variant: normal; text-transform: none; } .grey A:HOVER{ COLOR:#000000; font-family: Arial, Helvetica, san serif; font-size: 9pt ;font-weight: bold; TEXT-DECORATION:none } .grey A:MOUSEOVER{ COLOR:#000000; font-family: Arial, Helvetica, san serif; font-size: 9pt; font-weight: bold; TEXT-DECORATION:NONE } In netscape when you roll over these links it is just keeping to the default site roll over colours whereas it should be set to the .grey class i defined.......... has anyone come across this before?? and if so is there a solution out there. Thanks Hello; Could anyone tell how to kill the scrollbars from IE, Firefox, Netscape.,please. My following code just work for IE, it doesn't not affect another browsers. #newst {overflow: scroll; overflow-y: scroll; overflow-x: hidden; overflow:-moz-scrollbars-vertical;} <textarea name="newst" id="newst" rows="10" cols="45" ></textarea> Hey CSS experts, I have a weird problem with CSS in Firefox and Netscape. I am using CSS to manage my fonts using the the div class and span class strings. However, I've noticed that Firefox and Netscape insert additional spaces between some text areas. This happens when I define things both as a div class and as a span class. What makes this increasingly weird is that I can have two nearly identical lines of code and one will display extra spaces and one will not. Case in point: These are two exaple lines of code: <tr> <td><div class="navtext">130 South Main Street</div></td> </tr> and <tr> <td><div class="navtext">Saturday - 10 a.m. to 1 p.m.</div></td> </tr> The first line doesn't end up with spaces between it, but the second line doesn't. I chose these example because only a couple lines of code seperate them. I am an extreme CSS newbie and would greatly appreciate any help with this problem. Thank you in advance! Jordan Coffey P.S. Here is a link to the site so that you can see it for yourself: www.countrysidetrvl.com Here is the site I am working on: http://testlableon.ourcampusbookstore.com/index.php There are 3 navigation bars on the template. The first one (navbar) is the black one right under the header. The second one (userbar) is right under the navbar and it is supposed to be light gray (#eeeeee). The third one is the at the bottom of the page (footerbar) and is supposed to have a black (#000000) background. If you look at the site in ie, all the background colors are displayed correctly. If you look at the site in firefox or netscape though, the userbar and footerbar are not having their background colors displayed. Any ideas? The CSS background-position: right; is not working in Firefox/Netscape, and just aligns the background image to the left. Know why? Just testing this in different browsers and noticed that the image is shown in the background but does not go to the background-position that is specified. This works for IE. Does anyone know if there is a different way of doing this? <STYLE type="text/css"> BODY { background-image:url(awesome.gif); background-repeat:no-repeat; background-position:50 220; background-attachment:fixed } </STYLE> Thank you for an insight into this little glitch. hi, im trying to get a long text to wrap in a div with a given width PHP Code: <div style=" width: 100px; word-wrap: break-word; "> aaweofajw;eofija;weoifja;weoifja;woeifja;woeifja;wieofj </div> however, the closest thing i found is "word-wrap: break-word;" which only works in IE. is there anyway i can get it to work in netscape or firefox? thanks! justin I posted this by accident in the html forum , so im asking he I have this in my CSS page: Code:
a.mainlevell:link, a.mainlevel:visited {
display: block;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin-bottom: 1px;
font-size: 12px;
}
a.mainlevell:hover {
color: #FFFF00;
font-size: 12px;
}
And I use this style for four links: Code: <a href="mobile.html" class="mainlevell">Home</a> <a href="m_about.html" class="mainlevell">About Us</a> <a href="m_games.html" class="mainlevell">Games</a> <a href="m_links.html" class="mainlevell">Links</a> When viewing in IE, all the URL's using m_* in the file name works with the CSS; the one referencing mobile.html doesn't. However, putting an m_ in front of the mobile.html makes the link work. Why? This happens only in IE. firefox/opera/netscape/etc ; the links all show up fine and work as supposed to. However, I have a similar set up for another menu that does almost the same CSS as the above: Code:
<table width="100%" border="0" cellspacing="2" cellpadding="3">
<tr>
<td align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="home" width="14" height="14" id="home"></td>
<td bgcolor="#990000"><a href="mobile.html" class="menulevel" onMouseOver="MM_swapImage('home','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Home</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="one" width="14" height="14" id="one"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('one','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="two" width="14" height="14" id="two"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('two','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="three" width="14" height="14" id="three"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('three','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="four" width="14" height="14" id="four"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('four','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="five" width="14" height="14" id="five"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('five','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="six" width="14" height="14" id="six"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('six','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
</table>
and this one works fine ( even with the mobile.html) Hey Folks, I am a newbie with designing webpages and having some problems with a website that I just created. If any of you could point to a resource of help me out, that be great. Heres the link www.pcdigger.com The middle part is messed up in firefox. HTML and CSS both are validated per www.w3.org but I guess, that doesnt do anything for firefox. Thanks, DesignFlaw |
|||||||