«

I'm in the process of converting a large site (school district) from
table based layout to css. Prior to implementing the css pages I
didn't know that a lot of the pages are being printed within the
district for demonstration and/or editing/proof reading purposes.

On the pages that are linked to an external stylesheet I've changed
that code to read:

<link rel="stylesheet" href="curriculum_style.css" type="text/css"
media="screen">
<link rel="stylesheet" href="curriculum_style.css" type="textcss"
media="print">

Prior to adding "screen/print" the pages printed in a long narrow box
down the center of the page, now they print pretty much the same as
the page is seen online.

What I haven't been able to figure out is what code I need to add to
the pages that aren't linked to an external stylesheet, but have
inline code. My plan is to eventually have all pages linked to
external stylesheets, but for now I need to address my problem of the
proper syntax for inline code.

One of the pages with the external stylesheet is at:
http://www.clinton.k12.ia.us/curricu...l_studies.html

The page with inline code is at:
http://www.clinton.k12.ia.us/chs.html

Both pages validate as HTML 4.01 Transitional and CSS, but feel free
to critique my code if you'd like. Constructive criticism is always
welcome and appreciated!

Thank you,

Leslie

Leslie wrote:

> <link rel="stylesheet" href="curriculum_style.css" type="text/css"
> media="screen">
> <link rel="stylesheet" href="curriculum_style.css" type="textcss"
> media="print">

First of all, I hope that that second one is "text/css" and not "textcss"
and you just made a mistake copying it over from the real site!

> http://www.clinton.k12.ia.us/curricu...l_studies.html

Oh no, the mistake is on the real site too.

> but for now I need to address my problem of the
> proper syntax for inline code.

You can't really. Inline style applies to *all* media -- it can't be fine
tuned for screen, print, handheld, tv, projection, etc, etc...

You would be better off concentrating your efforts on:

> My plan is to eventually have all pages linked to
> external stylesheets

And better yet, get rid of that "s" from the end -- link all the pages to
one style sheet. That way, a change of:

body {
background: white;
}

to:

body {
background: aqua;
}

will effect the whole site instead of just one page! (Although an aqua
background is probably a mistake!)

Getting back to:

> <link rel="stylesheet" href="curriculum_style.css" type="text/css"
> media="screen">
> <link rel="stylesheet" href="curriculum_style.css" type="textcss"
> media="print">

One of the best things about CSS (and there are many great things about
CSS!) is that you can use *different* styles for different media. By using
something like this:

<link rel="stylesheet" href="master_style.css" type="text/css"
media="screen,projection">
<link rel="stylesheet" href="print_style.css" type="text/css"
media="print">

You can make the page look different printed and on screen. For example,
on print, you might want to hide the site navigation areas using the CSS
"display:none;" property. Why? Because you can't click links on a piece of
paper!

> Both pages validate as HTML 4.01 Transitional and CSS, but feel free
> to critique my code if you'd like. Constructive criticism is always
> welcome and appreciated!

Well, I hope you saw my criticism as constructive -- it was certainly
meant that way.

Regards,

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

On Sat, 22 Nov 2003 19:15:03 +0000, Toby A Inkster
<> wrote:

>Leslie wrote:
>
>> <link rel="stylesheet" href="curriculum_style.css" type="text/css"
>> media="screen">
>> <link rel="stylesheet" href="curriculum_style.css" type="textcss"
>> media="print">
>
>First of all, I hope that that second one is "text/css" and not "textcss"
>and you just made a mistake copying it over from the real site!
>
>> http://www.clinton.k12.ia.us/curricu...l_studies.html
>
>Oh no, the mistake is on the real site too.

That was a definite OOPS! Wonder why if validated and print previewed
correctly?

Anyway, I've fixed that and now find that it print previews as a
narrow box down the middle of the page. Could that be because I'm
using the same stylesheet for screen & print? I know I should be
using separate sheets for each type of media, but this was meant to be
a quick fix for a problem I didn't know existed until this week.
>
>> but for now I need to address my problem of the
>> proper syntax for inline code.
>
>You can't really. Inline style applies to *all* media -- it can't be fine
>tuned for screen, print, handheld, tv, projection, etc, etc...
>
>You would be better off concentrating your efforts on:
>
>> My plan is to eventually have all pages linked to
>> external stylesheets
>
>And better yet, get rid of that "s" from the end -- link all the pages to
>one style sheet.

*snip*

Right now I'm working on each section of the site having its own
stylesheet. I'm nowhere near proficient with css yet to be
comfortable with only one stylesheet for the entire site because each
dept./school has different criteria for the way they want their pages
laid out. All are very similar and eventually I'll have them all
conform to the same layout, but right now I'm just trying to keep my
head above water with the request for updates as they come in. It's
either feast or famine - a week or two with no requests (that's when I
work on converting to css) or a few weeks with enough requests to keep
an army of people busy.
>
>Getting back to:
>
>> <link rel="stylesheet" href="curriculum_style.css" type="text/css"
>> media="screen">
>> <link rel="stylesheet" href="curriculum_style.css" type="textcss"
>> media="print">
>
>One of the best things about CSS (and there are many great things about
>CSS!) is that you can use *different* styles for different media. By using
>something like this:
>
><link rel="stylesheet" href="master_style.css" type="text/css"
>media="screen,projection">
><link rel="stylesheet" href="print_style.css" type="text/css"
>media="print">
>
>You can make the page look different printed and on screen. For example,
>on print, you might want to hide the site navigation areas using the CSS
>"display:none;" property. Why? Because you can't click links on a piece of
>paper!

That's definitely my goal, but as mentioned above this different media
concerns with css is something I just learned about this week. Right
now using the same stylesheet for screen & print was a quick fix, but
will change as I learn more about css and its possibilities.

As green as I still am at css I can't imagine ever going back to using
tables for layout.
>
>> Both pages validate as HTML 4.01 Transitional and CSS, but feel free
>> to critique my code if you'd like. Constructive criticism is always
>> welcome and appreciated!
>
>Well, I hope you saw my criticism as constructive -- it was certainly
>meant that way.

I certainly do, and I'm most appreciative! Thank you!

Leslie

In message <>, Leslie
<> writes
[snip]

>
>One of the pages with the external stylesheet is at:
>http://www.clinton.k12.ia.us/curricu...l_studies.html
>
>The page with inline code is at:
>http://www.clinton.k12.ia.us/chs.html
>
>Both pages validate as HTML 4.01 Transitional and CSS, but feel free
>to critique my code if you'd like. Constructive criticism is always
>welcome and appreciated!

Putting the school details (phone/fax/address/NAME) in a graphic and
displaying them as a background makes them invisible to non-visual
browsers/screen-readers.
>
>Thank you,
>
>Leslie

--
Jake

On Sat, 22 Nov 2003 21:05:17 +0000, jake <>
wrote:

>In message <>, Leslie
><> writes
>[snip]
>
>>
>>One of the pages with the external stylesheet is at:
>>http://www.clinton.k12.ia.us/curricu...l_studies.html
>>
>>The page with inline code is at:
>>http://www.clinton.k12.ia.us/chs.html
>>
>>Both pages validate as HTML 4.01 Transitional and CSS, but feel free
>>to critique my code if you'd like. Constructive criticism is always
>>welcome and appreciated!
>
>Putting the school details (phone/fax/address/NAME) in a graphic and
>displaying them as a background makes them invisible to non-visual
>browsers/screen-readers.

Hadn't thought of that. Thank you! With the pages that are table
based the graphic has minimal contact info in the alt tag, but I can
see that the contact info should be made accessible to all browsers.

Thanks for the heads up!

Leslie

Leslie <> wrote in
news::

> That was a definite OOPS! Wonder why if validated and print previewed
> correctly?

It validated because the HTML DTD just says that the content of a <link>'s
type attribute must be CDATA, which in SGML terms means pretty much
anything. A validator can only check that the structure is correct, not
the content.

The correct print preview was probably because the browser wasn't applying
any external stylesheet during printing.

Gazing into my crystal ball I observed Leslie <>
writing in news::

> That was a definite OOPS! Wonder why if validated and print previewed
> correctly?
>
> Anyway, I've fixed that and now find that it print previews as a
> narrow box down the middle of the page. Could that be because I'm
> using the same stylesheet for screen & print? I know I should be
> using separate sheets for each type of media, but this was meant to be
> a quick fix for a problem I didn't know existed until this week.

Actually, I use the same stylesheet for media and print, but I use @media
print. Like this:

/* all except print */
#footer {border:1px solid #000;}
/* end all except print */
/* for printing */
@media print {
#footer {display:none}
}
/* end printing */


--
Adrienne Boswell
Please respond to the group so others can share
http://www.arbpen.com