Front Page design mode and @media CSS.

[Viken Karaguesian]

Hello everyone,

Using FP2003. When I add an @media print command to my CSS file, the
Design view in FP2003 defaults to the style of the @media print, not to
the style of the @ media screen.

All styling is lost. All I see is Times New Roman text with no
formatting or styling. If I remove @media print from my style sheet,
the Design view shows a more normal layout, with only a few items that
don't have styling.

Is this a bug or is it just how the program is? Is there any way to
change this behavior? Thanks in advance.

Viken K.

 

[Murray]

Show me your page, please.

 

[Viken Karaguesian]

Murray, do you want a screen shot of my site in FP's design view? One
thing I seem to have not made very clear is that my site looks right in
Preview mode, but not in design mode.

Let me know if you want some screen shots.

Viken K.

 

[Murray]

One

thing I seem to have not made very clear is that my site looks right in
Preview mode, but not in design mode.

I got that.

No - I want to see the markup on the page, which is where all answers are
found! 8)

 

[Viken Karaguesian]

You can go to:

www.ssaes.org/test_site

This is the site I'm working on. I'm sure you know how to view the
source and CSS :>)

Just for fun, here are the screen shots:

Design mode: http://home.comcast.net/~vikenk/design_mode.jpg
Preview mode: http://home.comcast.net/~vikenk/preview_mode.jpg

Design mode used to look much more like Preview mode until I added
"@media print".

Thanks.

Viken K.

 

[Murray]

Nice site. It would be a good one to direct people to who claim that FP
writes crap code.

You have this -

<link rel="stylesheet" type="text/css" href="style_main.css"
media="screen,print">
<link rel="stylesheet" type="text/css" href="style_noscript.css">

and in the first stylesheet you have used the individual @media screen and
@media print rules. I suspect that FP is becoming confused with that. Have
you tried splitting those rules out into a separate stylesheet, e.g.,

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

without using the @media rules?

 

[Viken Karaguesian]

Nice site. It would be a good one to direct people to who claim that FP

writes crap code.
Thanks.

<link rel="stylesheet" type="text/css" href="style_main.css"
media="screen,print">
<link rel="stylesheet" type="text/css" href="style_noscript.css">

and in the first stylesheet you have used the individual @media screen and
@media print rules. I suspect that FP is becoming confused with that. Have
you tried splitting those rules out into a separate stylesheet, e.g.,

<link rel="stylesheet" type="text/css" href="style_main_screen.css"
media="screen">
<link rel="stylesheet" type="text/css" href="style_main_print.css"
media="print">
without using the @media rules?

I think I tried that once, but it was still happening. It seems like as
long as the @media print rule is in a style sheet, it confuses
FrontPage. I'll try again though, just to doublecheck. If I understand
you right, you think I should make a separate stylesheet for print, but
not include the @media rule in it. Putting "media="print" in the
stylesheet link would then make it print as I want? I'll have to give
it a try.

I'm not a total CSS expert, but I thought I had to put "@media print"
in my style sheet to make it work.

Viken K.

 

[Murray]

Take those rules OUT of the stylesheet. If you have separate ones for print
and screen you don't need the @media rules.

Putting "media="print" in the
stylesheet link would then make it print as I want?

Theoretically, yes.

I'm not a total CSS expert, but I thought I had to put "@media print"
in my style sheet to make it work.

Only if you are trying to share a single stylesheet among different media.

 

[Viken Karaguesian]

Murray,

Sorry it took me so long to get back to you. I had a busy afternoon at work.
Your suggestion worked! By splitting the screen and print stylesheets and
removing the @media rule, the design view in FP is much more normal looking
now. Thanks a lot.

 

[Murray]

You're welcome!

 

[Viken Karaguesian]

BTW Murray, I sent an e-mail to your reply-to address. Keep an eye out for
it :>)

 

[Murray]

Same to ya.... 8)