CSS - Css Style Sheet Print Media Warning

Or do I have to replicate every CSS class in print? That would double the size of my CSS file! What's the correct way?

Will this work as I hope?
Code:

div.news {
    width:690px;
    padding:10px;
    margin:0;
    float:left;
    background-color: #DDDDDD;
}

.button_div {
    width:180px;
    padding:10px;
    background-color:#953956;
    cursor:pointer;
}

.body_text {
    color:#284186;
    line-height:130%;
    font-size:11px;
}

@media print {

 div.news {background-color:#EEEEEE;}
 .button_div {display:none;}
 .body_text {color:#000000;}
}

Also, is it ok to do this? Any issues I should be aware of?
Code:

// CSS
p.italic {font-style: italic;}
p.large {font-size: 150%;}

// HTML
<p class="italic large">Italic and large.</p>

Thanks,

Hi,

For some reason my css sheet for printing is producing huge text on the printouts in the main section of the page and I can't figure out why.

style sheet included by:
<link rel='stylesheet' href='print.css' type='text/css' media='print'>

section in question:

.pr{color : #000000;
font-family: verdana;
font-size: 10px}

for some reason the font size is being ignored and the text come s out massive.

the whole code for the page is too long to post but the section in question has a lot of tables enclosed in:

<span class='pr'>
</span>

I know the stylesheet is being included properly cos it is hiding lots of other sections.

Anyone got any ideas?

Thanks

I've looked over my syntax a hundred times, but I can't get the print preview in IE to match the style declarations I've put in my css document. None of them work, so obviously it's something i've messed up in the overall structure of the code, and not minor errors.

This is at the end of my .css document that I linked to my html:

Code:

 @media print {body {font-family: arial, helvetica, sans-serif}
               a {text-decoration: none; color:pink}
               img {border-width: 0px}
               #hideprint {display: none}
               #instruction {display: none}
               #lpmap {page-break-after: always}
               .notes {page-break-inside: avoid; margin: 30px 30px 30px 30px; }}

Thanks

Hello! Newbie back again. I'm rolling along on using CSS for the first time (hooray!) including that wonderful bit of coding in order to center a #Container. The threads here have been *very* helpful.

Due to printing problems with having everything centered at a fixed width (text on the right getting chopped off), I've created a style for media="screen" AND media="print" which works just fine in Netscape and IE.

Question: When I pull the style out of the page so that I can reference it as an external css, do I need to create TWO files?

Also, I would appreciate any/all comments about my first attempt so far. Is there a better way I should be designating font-family and margins for my elements?

<style type="text/css" media="screen">

h1 {color:#003366; font-family:sans-serif; font-size:100%; font-weight:bold; margin:0.4cm 0.4cm}
p {font-family:sans-serif; font-size:85%; margin:0.4cm 0.4cm}
ul {list-style-image: url("redarrow.gif"); font-family:sans-serif; font-size:85%; margin:1cm 1cm}
a:link {color:#003366} a:visited {color:#003366} a:hover {background:#ccccff; text-decoration:none}
html, body {margin: 0; padding: 0; text-align: center; /*for IE stupidity*/}

#container
{
position: relative; /*The container must be positioned
/*in order to contain positioned
/*elements*/
margin: 0 auto; /*This is the proper way to center an element*/
width: 700px;
border: 1px solid gray;
text-align: left; /*corrects for IE hack*/
padding: 0px;
}
</style>

<style type="text/css" media="print">

h1 {color:#003366; font-family:sans-serif; font-size:100%; font-weight:bold}
p {font-family:sans-serif; font-size:85%}
ul {list-style-image: url("redarrow.gif"); font-family:sans-serif; font-size:85%}
a:link {color:#003366} a:visited {color:#003366} a:hover {background:#ccccff; text-decoration:none}
</style>

And here's the page I'm working with so far:

http://www.accd.edu/sac/lrc/librns/celita/design/linktest.htm

Thanks so much for all your help.

Hi

I have a legacy site which is laid out in tables, and rather large. There is a cell holding a table which holds, amongst other things, a link to a couple of js scripts which generate a dynamic menu.

I have been trying to use a media=print stylesheet to set display:none on that cell (which I have given an ID). This works fine in terms of the static content in that cell - the adjacent 100% width cell 'expands' leftwards to fill the gap, which is what I want, but the menu is still being generated over the top. The links to the two scripts are within the <td> which has been hidden by the css, but the menu is still being generated.

I would convert the whole site to css pos if I had the time...

Hi,

I have a style sheet which works fine on my mac, but not on my PC in IE7. I know how to substitute stle sheets based on browsers, but here's the issue at hand. I have 2 styles for the <ul> which follow:
ul.nav{
clear:both;
width:192px;
padding: 0px;
display: block;
background-color:#000000;
margin-top:-11px;
margin-left:0px;
float:left;

}

and

ul.bodyText{
font-color:#000000
font-size:12px;
font-family:helvetica, arial, sans-serif;
}


it appears that "ul.bodyText is taking on the characteristics of "ul.nav" Or, for some reason, the <ul><li>'s in my Mac look fine, but on my PC, they do not have the indent preceeded by the dot.

Here's the site
http://www.caillouette.com/NewestSelvan/English/aboutUs.php

can anyone tell me why?

thanks
-Sean

Hi all!

Hope you are well! Anyway, I have the following in my style sheet.... should this work?

PHP Code:
 td {
text-align: centre;
} 





or not?

Hi there. I have a print style that won't display images when printing..

img {display: none;}

I have a certain page where I need the print style sheet but will like the images to print. How can I override the print style for the images?

A bit of background. I've just started an IT degree and the first assignment is to create a web page about myself. (I'll post it here once it's up and running). We've got to use a separate as opposed to inline style sheet, and our pages must be validated as part of the assessment. I don't have any trouble validating my XHTML (strict) code but even the simplest style sheet (only a single command) get's rejected. I'm also following the rules set out in the text I've got (The Web Wizards guide to XHTML by Cheryl. M. Hughes).
Question. Do I need a DOCTYPE statement in a style sheet?

Hi guys,

done a few other pages (such as reports and things e.t.c which are basically white pages with text and i get the rightfloat that is on my normal pages appearing all the time!?!?


Anyone give me an idea why? tried it on a blank page and still nothing... black page here >>>

http://www.generating-sets.com/showissue.php

CSS below!

Charlie



PHP Code:
 html {height:100%;}
body {
margin:0; padding:0; height:100%;
background-image:url(images/newback.jpg);
background-position:top right;
background-repeat:repeat-y;
background-color:#ffffff;
font-family: sans-serif; 
font-size: .7em;
}
#wrap {
background-image:url(images/newback150px.jpg);
background-position:top left;
background-repeat:repeat-y;
min-height:100%;
}
* html #wrap {height:100%}

div#navbar {padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px}

div#formbox {
color: #000000;
padding: 2%;
border: #000044 solid 1px;
}
div.displaybox {
color: #000000;
padding: 2%;
margin: 1%;
border: #000044 solid 1px;
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;
font-size: 1.1em;
}
div#userbar {padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px}

div#topleveladminbar {
padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px
}

#header {
background-color: #000044;
background-image:url(images/wel.jpg);
width: 100%;
background-repeat: repeat;
border-bottom: 2px #000000 solid;
color: #ffffff; 
margin:0; padding:0;
height:100px;
}


#left {
float:left;
width:149px;
background-image:url(images/newback.jpg);
background-repeat: repeat;
color: #ffffff; 
text-align:center;
background-color: #000044;
border-right: 1px #000000 solid; 
}
#main {
position:relative;
margin-left:200px;
}

#content {
text-align:center;
padding:4px;
margin-right:200px;
margin-bottom:150px;
text-align:left;
}

#clearfooter {
clear:both;
height:80px;
overflow:hidden;
}
#footer {
height:40px;
background-color: #000044;
border-top: 2px #000000 solid;
margin:0; padding:0;
background-image:url(images/newback.jpg);
background-repeat: repeat;
margin-top:-0px;
color: #ffffff; 
text-align:center;
}
div#newsbar {padding: 0%; 
text-align: left;
height:150px; 
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff;
margin-left: +150px;
margin-right: +10px; 
margin-top: -180px;
border: 2px #000000 solid;  
width: auto;} 

code {
font-size:0.8em;
border:1px solid navy;
background-color:white;
color:#333333;
padding:10px;
display:block;
width:80%;
margin:10px auto;
overflow:auto;
}

h1 {font-size: 1.4em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h2 {font-size: 1.3em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h3 {font-size: 1.2em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h4 {font-size: 1.1em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h5 {font-size: 1em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
} 

a:link {color: #ffffff; 
text-decoration: underline;} 

a:visited { 
    color: #ffffff; 
    text-decoration: underline;}     

a:hover {color: #ffffff;
background-color: #0000FF;
text-decoration: underline;} 

.displaybox a:link {color: #0000FF; 
text-decoration: underline;} 

.displaybox a:visited { 
    color: #0000FF; 
    text-decoration: underline;}     

.displaybox a:hover {color: #000044;
background-color: #EEEEEE;
text-decoration: underline;} 

.redtext {
color: #ff0000;
font-weight: bold;
}
.greentext {
color: #00ff00;
font-weight: bold;
} 

Please can anyone tell me why my style sheet is not applying to this page http://www.on-line-biz.com ?

Ok, I just started a new website. I have been putting all of the html on every page. So, when I change one small thing on my Nav Bar, I have to go to every single page and change it! There has to be an easier way, right? Isn't it by using external sytle sheets? I tried this code in my homepage, but it isn't working:
Code:

<head>

<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
  @import url(http://www.freewebs.com/ohhdanggggraphics/BASIC.css);
  -->
</STYLE>

</head>

Basically on my site the only thing I want to change from page to page is the information in the center table. How would I do this? Thanks for your help

My Website

Hello

I'm having trouble with displaying a background image in a div.

It worked fine with embedded CSS but when I changed the CSS to external, the text loads but the bg image doesnt.

I'll post some code to explain it...

This is in the external style sheet:

#navbgtop {
position:absolute;
left:38px;
top:185px;
width:194px;
height:18px;
z-index:2;
background-image: url(images/navbartop.jpg);
}








and yes of course I have made the proper link to it in the <head> tag:
<link rel="stylesheet" type="text/css" href="css/nav.css" media="all" />


For some reason the background image wont display. Any ideas?



One more question also, does it matter if I use media="all" for the whole website? Or do I even need to bother using media=xyz ? I heard most browsers don't even read that as of yet.

I have a tables layout and for some reason everytime I go to add something to the layout (eg. cutenews) the background disappears. By that I also mean it disappears completely from the html coding in index.
This is the style for my layout:

body, table, td{

font-size: 9px;
font-family: sans-serif;
color: #66CCCC;
letter-spacing: 1px;
margin: 0;

}

.navi{

font-size: 9px;
font-family: sans-serif;
margin-top: 5px;
text-align: left;
}


.navhead{

width: 100px;
height: 38px;
padding-top: 21px;
padding-right: 0px;
font-size: 10px;
text-align: right;
color: #CCCCCC;
margin-bottom:10px;
font-family: monospace;
text-transform: lowercase;
letter-spacing: 5px;
background: black url(Bilder/navheader.jpg);

}

.head{

width: 310px;
height: 38px;
padding-top: 10px;
padding-left: 25px;
font-size: 10px;
text-align: left;
color: #CCCCCC;
margin-bottom: 20px;
margin-top: 20px;
font-family: monospace;
text-transform: lowercase;
letter-spacing: 5px;
background: black url(Bilder/header.jpg);

}

.content{

width: 310;
padding-left: 10px;
padding-right: 10px;
color: #66CCCC;
text-align: justify;

}




a:link,
a:visited,
a:active {
text-decoration: none;
color: #009999;


}

a:hover {
text-decoration: none;
color: #00CC33;


}

Where and what code can I use for a fixed background?

Hello.... As I'm sure many that post to this board are, I'm pretty new to CSS. I've been reading about it for years, studying it for several months, dabbling with it for a few weeks, and writing my first useful, semi-complex CSS page for about 2 days....

My page looks exactly like i want it to (at least with my half dozen little tests so far) in Firefox. i started with no CSS, then added more and more, trial and error, until I got it just how I like it. Then I opened it in IE! OH BOY! It doesn't even look close to what it is in FF!!!!! I've read enough about CSS to assume that Firefox rendered it as it's supposed to be rendered, and IE did whatever was convenient for them.

Here's the page: http://www.triptrop.com/main.html

My intent: I want a header, footer, and 2 equal columns split right down the middle. Each column will contain any number of blocks one right after the other, and independent of the blocks in the other column.

Don't pick on my about the colors, I'm just messin around right now

Any help would be helpful (by definition)