DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Site Building & Maintenance

Reply
 
Thread Tools Display Modes
Old 02-13-2006, 07:20 PM   #1
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default print media CSS

HELP!

Can anyone tell me why I can't get the top and left margin on my online resume to follow the print.css? I seems the banner image and left nav area go away, but the space they take is still showing up on print preview.

Is there any way to get rid of that white space?

Thanks,

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 02-14-2006, 12:11 AM   #2
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dacoyle
HELP!

Can anyone tell me why I can't get the top and left margin on my online resume to follow the print.css? I seems the banner image and left nav area go away, but the space they take is still showing up on print preview.

Is there any way to get rid of that white space?
What are you previewing with?

Going to your print CSS, the first thing I notice is that you don't have anything set for html, and you don't have any margin or pading set for body either; start by setting all of those to zero. (Remember? don't leave anything to a browser's internal stylsheet but be specific what you want!)
Also, I see:
Code:
.pagehead {display: none;}
(that will get rid of the page head) and
Code:
#margin {margin-top: 10px; margin-right: .5in; margin-left: .5in; }
That div seems to contain the whole page?? But those margins are added to the browser's own settings for body margins (because you haven't defined them): set the margins (and padding) on the body instead.

Your normal stylesheets have media="all" (so they apply to print as well), the print stylesheet has media="print" (so it doesn't replace but merely override the regular stylesheets). Finally, you have some selectors in your stylesheets in UPPERCASE; a browser may ignore those (and apply its internal styles) because you're using XHTML which is lowercase only; match the selector case in CSS with the case of your selectors targets in HTML. Case in your print stylesheet doesn't match case in your regular stylesheet either so there's a possible cause of confusion here: the overriding mechanism may not work because of the case mismatches.

Then go to your browser's preview setup and check your margin settings there - that's where some browsers locate the "extra's" like date, url, page numbers, etc. (If you set them to zero, those things will disappear in Mozilla, even if they are configured - but it can help in "debugging" your print preview.) And remember that most printers do have (need) physical margins because they cannot print to the very edge of the paper.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 02-14-2006, 05:23 AM   #3
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Marjolein,

Thanks! That advice mostly fixed it. I did have margins set in the body section earlier, but it wasn't effecting anything... I've previewed in Firefox and IE but it seems that the browsers defaults are adding margin to the margins in the CSS. Is there anyway around that?

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 02-14-2006, 06:00 AM   #4
LoisWakeman
Staff
 
LoisWakeman's Avatar
 
Join Date: Jan 2005
Location: Uplyme, Devon, England
Posts: 1,402
Default

Dennis: in FF, it looks as I would expect with the (default 12.7mm) margins in page setup. Do you perhaps have the margins set to a bigger value than you want?
LoisWakeman is offline   Reply With Quote
Old 02-14-2006, 07:26 AM   #5
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dacoyle
Thanks! That advice mostly fixed it. I did have margins set in the body section earlier, but it wasn't effecting anything... I've previewed in Firefox and IE but it seems that the browsers defaults are adding margin to the margins in the CSS. Is there anyway around that?
I usually start by setting both margins and padding to zero - for html as well as body. This is because some browsers have zero "internal" margins but non-zero padding, and others do it the other way round: there are no rules for this so browser makers simply design an internal stylesheet that ensures a decent layout when in the document no style is defined. What you think is "added margin" may actually be padding... if you want, you can find out by defining a "debug" one-pixel solid colored border: padding is inside the border, margin is outside it. Don't forget to (pre)view in Opera: that's the one that usually does it differently than most other browsers. ;-)

The single-pixel border is my standard debugging trick for all positioning (varying colors):
Code:
    border: 1px solid red;    /* DEBUG */
If the border gets in the way I simply "move" the '/*' to the start of the line but leave the lines in place until the stylesheet is fully debugged. Sometimes supplemented with colored backgrounds, commented in the same style. Using simple color names instead of hexadecimal color specs also helps to distiguish them as debugging rules.

Being specific about margins and padding is especially important for those elements where browsers tend to have very different internal stylesheets. In my experience the most important ones are body, lists and headings.

Some other stupid "debugging" tricks:
  • every property on a single line (indented)
  • rigorously consistent code formatting, using tabs to line up comments (at least for groups of styles), and specifying properties always in the same order
  • lots and lots of comments, not about what but about why (like a margin being set at 205 pixels because that is the sum of the width of an image and its margins); I also note browser quirks here ("does not work in Opera", "IE needs 15px instead of 10px"...) and other than the debugging comments these comments are never removed: they are necessary for later maintenance
  • whitespace between groups of related styles

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 02-15-2006, 12:32 PM   #6
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Haven't had a chance to play with it much, though thanks for the tip on testing in Opera... just got quite a shock. The background image is showing up in Opera's print preview.

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 02-15-2006, 12:53 PM   #7
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dacoyle
Haven't had a chance to play with it much, though thanks for the tip on testing in Opera... just got quite a shock. The background image is showing up in Opera's print preview.
I noted that in my Opera 7.23 but didn't mention it - I assumed it was a bug that would/should have been fixed in the current version. But had no time to test in my 8.x (not even the latest).

But it could have been caused by the character case mismatch between both stylesheets - another reason I didn't mention what I saw in 7.23. Do you still see it with case corrected (all lowercase for all element selectors) and the latest Opera? And if so - is it in the preview only or also in the actual print? (Not a frivolous question since I found earlier print preview in Firefox could (still can?) differ considerably from the actual print).

Fun, isn't it? Not.

I hate Opera.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog

Last edited by iamback; 02-15-2006 at 02:48 PM.
iamback is offline   Reply With Quote
Old 02-15-2006, 03:28 PM   #8
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Quote:
Originally Posted by iamback
I noted that in my Opera 7.23 but didn't mention it - I assumed it was a bug that would/should have been fixed in the current version. But had no time to test in my 8.x (not even the latest).

But it could have been caused by the character case mismatch between both stylesheets - another reason I didn't mention what I saw in 7.23. Do you still see it with case corrected (all lowercase for all element selectors) and the latest Opera? And if so - is it in the preview only or also in the actual print? (Not a frivolous question since I found earlier print preview in Firefox could (still can?) differ considerably from the actual print).

Fun, isn't it? Not.

I hate Opera.
I don't hate Opera, but I'm not much of a fan. I just upgraded to 8.51, changed the CSS case, and the background image still shows up. I thought Opera was supposed to be very good at CSS standards but this is a really bad bug. Don't most browsers NOT print background images by default anyway?

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 02-15-2006, 03:58 PM   #9
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dacoyle
I don't hate Opera, but I'm not much of a fan. I just upgraded to 8.51, changed the CSS case, and the background image still shows up. I thought Opera was supposed to be very good at CSS standards but this is a really bad bug. Don't most browsers NOT print background images by default anyway?
I really don't know what the default is - let alone what in which browser - for printing backgrounds. But now you have me wondering whether Opera (7.23 at least) is maybe letting my print setup (with printing background on?) override the print stylesheet. (Right, I do have Print page background checked in Print options.) That would make some sense, sort of. A little.

(Now I really need that nightcap to fall asleep.)

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 02-15-2006, 04:59 PM   #10
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Quote:
Originally Posted by iamback
I really don't know what the default is - let alone what in which browser - for printing backgrounds. But now you have me wondering whether Opera (7.23 at least) is maybe letting my print setup (with printing background on?) override the print stylesheet. (Right, I do have Print page background checked in Print options.) That would make some sense, sort of. A little.

(Now I really need that nightcap to fall asleep.)
Netscape and Firefox/Mozilla turn off background images by default. I find it rather silly Opera can override the CSS without using custom CSS. I still consider it a bug. But that's my opinion.

Just settling into an evening of the Olympics here.

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
media players john_b The Corner Pub 5 02-25-2007 10:15 AM
New Red Paw Media Plugins (Win) Andrew B. Software 3 10-15-2006 01:20 PM
Media Temple web host? ktinkel General Publishing Topics 5 07-10-2006 12:31 PM
Intelliscanner Media Collector? ktinkel General Publishing Topics 10 11-21-2005 04:31 PM
Red Paw Media Plugins Andrew B. Software 13 05-31-2005 09:02 AM


All times are GMT -8. The time now is 11:25 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.