PDA

View Full Version : HTML/CSS question for an expert


sidney
April 7th, 2007, 08:40 PM
I know that we have some people here who know their HTML and CSS, and maybe you can answer this question.

If I look at the print-friendly view of an article in the New York Daily News, for example this article (http://www.nydailynews.com/news/2007/04/07/2007-04-07_banned_easter_egg_treats_are_on_sale_in_-1_print.html), and then try to save it, for example using Firefox to Save Page As in the Web page, complete format. When I view the page from the web server the font is small and the text flows around the picture which is embedded in the upper right corner of the text column. If I load the saved file into my web browser, that style information is not there.

I have tried View Source and saved from that, downloaded the html and the css files separately, but whatever I do I don't see the style when I view the saved files that I see when I view the page on the web server.

Does anyone have any ideas as to where the style information comes from and how I can duplicate the identical look of what I see on the server?

I'm trying to generate a PDF version of an article from that site with some slight formatting change so I would like to be able to start from what is there.

davidh
April 7th, 2007, 09:34 PM
I am running FF 2.0 on Win 98.

I don't see any "print friendly view".

Maybe irrelevant, but the text does not flow around the picture for me, at all (in web view).

The FF View | Page Style menu lets me change the layout slightly, but still no text flow.

Don't ask me any questions about HTML or CSS tho'.

DH

sidney
April 7th, 2007, 10:05 PM
The FF View | Page Style menu lets me change the layout slightly, but still no text flow

Ah, that was a good hint, although I still don't have the complete answer.

The "print view" is that URL that I posted. That URL is what you get when you click on the print view link in the original article. The text flow I'm talking about can only be seen when you maker the window wide enough. I guess I keep my window wider than yours and so I thought the page had a text flow until you mentioned your results.

When I save the page using Save Page As to save it as "html, complete" and then load the saved disk file, the results are different from viewing the page on the web server, even though all the CSS files are there and referenced.

But you have given me a good hint. When I look at the page on the web server, if I select View | Page Style | Basic Page Style, I see the page with the formatting. If I select View | Page Style | No Style I see exactly what I do when I load the saved disk file. Now the question is why there is no page style when I read it from the disk.

Judy G. Russell
April 7th, 2007, 10:22 PM
I have tried View Source and saved from that, downloaded the html and the css files separately, but whatever I do I don't see the style when I view the saved files that I see when I view the page on the web server.Sidney, the attached image has the printview on the left, and, on the right, what I see in Firefox when I download it and open the file. Are you saying you want what's on the LEFT and not what's on the RIGHT?

davidh
April 7th, 2007, 11:45 PM
When I view it with basic page style the text column is narrow and does NOT fill the width of my browser window.

With "no page style" the text expands to full window width and a horizontal separator appears too.

That's with FF 2.0.

Maybe I'll try Opera to see what happens.

DH

davidh
April 7th, 2007, 11:56 PM
When I view it with basic page style the text column is narrow and does NOT fill the width of my browser window.

With "no page style" the text expands to full window width and a horizontal separator appears too.

That's with FF 2.0.

Maybe I'll try Opera to see what happens.

DH Internet Explorer 6 is like FF 2.0 with basic style, BUT in MS IE the left margin is wide but in FF 2.0 the left margin is nothing.

I wonder maybe there is a bug in the HTML or maybe there is something that is browser-peculiar and not just a matter of CSS ?

DH

davidh
April 8th, 2007, 12:22 AM
With Opera 9 there are a lot of View | Style options. Most of it I don't understand.

Furthermore, the HTML shows /css/print.css under the style...whatever tag. I searched my whole HD to find any CSS files while Opera was running the web view of the page. No "print.css" showed up on HD at all.

Possibilities ?:
1. file is in local PC memory only, not disk ?
2. file is missing from server and so not DL'd ?
3. file is on my local PC HD, but renamed to something else ?
4. for some reason whatever, browser is using some local default CSS files and the defaults are different depending on view from web or view from disk ?
etc....

DH

sidney
April 8th, 2007, 12:26 AM
Are you saying you want what's on the LEFT and not what's on the RIGHT?

Exactly. I notice other differences now that I'm comparing them side by side, such as the headline being in an all uppercase font on the left and not on the right, even though viewing the page source shows that the headline text itself is mixed case.

So where is the styling information that the one on the left is using that you don't get when you produce the one on the right? It sure looks like the CSS file is being saved and is used by the HTML page that you save.

-- sidney

sidney
April 8th, 2007, 12:51 AM
It turns out that Save As in the Web Page, Complete format does not always do the right thing, and there is a Firefox extension Save Complete (https://addons.mozilla.org/en-US/firefox/addon/2925) that was written just for that reason. Actually I tried the development version that is mentioned on that page, so I don't know for sure if the release version would have done the job, but the complete page I saved that way does have the full styling. Have to go to dinner now, but afterwards I'll compare the saved files to see where the styling was brought in from.

[update]

Here's the snippet from the web page that is not handled by Firefox's File | Save As even when you save as a complete web page

<style type="text/css" media="screen">
<!--
@import "/css/print.css";
@import "/css/slides_article.css";
-->
</style>

Because Save As doesn't recognize it, it does not save the css files and change the references to point to the saved files. The Save Complete extension handles that fine.

Judy G. Russell
April 8th, 2007, 11:21 AM
Because Save As doesn't recognize it, it does not save the css files and change the references to point to the saved files. The Save Complete extension handles that fine.Very interesting! And thanks for coming back with the answer.

Now... word of warning... that print version isn't readable to somebody with old eyes like mine. So even if you use the basic format, I'd sure increase the font size.

sidney
April 8th, 2007, 10:21 PM
f you use the basic format, I'd sure increase the font size.

That's how I got into this mess in the first place :) I wanted to generate a legible PDF of an article, which means being able to change the formatting.

-- sidney

Judy G. Russell
April 9th, 2007, 10:14 AM
That's how I got into this mess in the first place :) I wanted to generate a legible PDF of an article, which means being able to change the formatting.Errr... now I'm really confused. Why wouldn't the CSS that WAS downloaded be as good as the print CSS for that purpose? ANY style can be changed in terms of size etc.

sidney
April 10th, 2007, 10:43 AM
Why wouldn't the CSS that WAS downloaded be as good as the print CSS for that purpose?

I saw this web page that looked ok except for the font being a bit small, and I did a File|Print to make a PDF and that was ok except for the font being too small, so I did a File|Save As to get the file on disk so I could tweak the formatting just a little bit.

Then I loaded the saved file from disk into the browser and it looked all different. I didn't realize that the two CSS files in what appeared to be an HTML comment were actually being used, especially since Save As in web complete format didn't realize they were being used either.

If I had given up, my next step would have to have been to try and write CSS from scratch to get the look I wanted.

Judy G. Russell
April 10th, 2007, 03:27 PM
I didn't realize that the two CSS files in what appeared to be an HTML comment were actually being used, especially since Save As in web complete format didn't realize they were being used either.Aha! Now I understand. Actually, I'd have to test this out to see whether the Save As actually did recognize the command, since what I think happens with a Save As Web Page command is that it pulls the appropriate CSS file for web display, rather than the CSS file for printing.