Limiting content width - DIV or BODY?

M

Michael Laplante

I'm trying to produce a "print friendly" version of a page. I used:

<body style="width: 75%; margin-left: auto; margin-right: auto;">

In Netscape and FF, this produced a page with a margin about it nicely
centered on the page.
However, IE's output is clear across the page with no margins.

Best way to solve this problem?

Use a div instead?
Use a table for a brute force method?
Tweak my <body> tag somehow for IE?

I'm relatively new to CSS.

M
 
B

BootNic

Michael Laplante said:
I'm trying to produce a "print friendly" version of a page. I used:

<body style="width: 75%; margin-left: auto; margin-right: auto;">

In Netscape and FF, this produced a page with a margin about it
nicely centered on the page.
However, IE's output is clear across the page with no margins.

Best way to solve this problem?

Use a div instead?
Use a table for a brute force method?
Tweak my <body> tag somehow for IE?

I'm relatively new to CSS.
Click to expand...

Are you using any kind of Document Type?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
M

Michael Laplante

Toby Inkster said:
Michael Laplante wrote:
Click to expand...
Stop trying. Use a print stylesheet instead.
Click to expand...

Not very helpful, I'm afraid. From:
http://css-discuss.incutio.com/?page=PrintStylesheets
--Quote--
When printing Web documents, margins are set in the browser's Page Setup (or
Print Setup) dialog box. These margin settings, although set within the
browser, are controlled at the operating system/printer driver level and are
not controllable at the HTML/CSS/DOM level. (For CSS-controlled printed page
headers and footers see PrintingHeaders.)
....
When subsequently printing pages, you may find that the top or bottom line
of text is "cut off", or find even worse page-break mangling (see "Page
Breaks" below). If so, slightly increase the top or bottom margin
respectively. Experiments with my own sites suggest that a generous bottom
margin will reduce page-break problems (it forms a kind of overflow area).
However, adjusting margins is under the control of browser users rather than
developers and you can place no reliance on its having been done at all, let
alone well.
In your site's screen stylesheet, you may have chosen to set margins and
padding on the <body> element (browsers set their own default values). If
you have a print stylesheet, you will probably want to set the values for
margin and padding to zero since the user's "print margins", as described
above, must be assumed to be sufficient (and what the user wants).
-- End quote--

So that tells me that a print stylesheet won't necessarily guarantee the
margins I'm looking for. For now, I've used the table "brute force" method
which works in both IE and FF. The CSS equivalent -- to my mind -- would be
a "container" of suitably narrowl fixed width, centered on the page. I
figured that <body> or <div> could be the containers, but apparently it's
not that easy.

If anyone has an elegant -- and relatively simple -- CSS method, please let
me know.

M
 
K

kchayka

Michael said:
Not very helpful, I'm afraid. From:
http://css-discuss.incutio.com/?page=PrintStylesheets
Click to expand...

Hmmm... That article was written 3 years ago. Browsers change, except
for IE, anyway. ;) FWIW, I use print stylesheets all the time and
rarely have a problem with them.
So that tells me that a print stylesheet won't necessarily guarantee the
margins I'm looking for.
Click to expand...

Why do you need specific margins? If you are trying to print something
like a form, you may be much better off providing the print version as
a PDF instead.
For now, I've used the table "brute force" method
which works in both IE and FF.
Click to expand...

For some value of "works", I'm sure. :-\

You've decided on the solution without properly identifying the
problem, so the answer may not be what you think. Post a URL, so we
can see what you're on about.
 
M

Michael Laplante

kchayka said:
Michael Laplante wrote:
Click to expand...
Why do you need specific margins? If you are trying to print something
like a form, you may be much better off providing the print version as
a PDF instead.
Click to expand...

I never said I needed specific margins or even margins at all. I simply want
some sort of margin to make the printed output more visually appealing to
the end user. I simply wanted to know why my one line CSS solution didn't
work and what SIMPLE alternatives existed.
For some value of "works", I'm sure. :-\
??

You've decided on the solution without properly identifying the
problem
Click to expand...

I would think that I'm the best person to identify my problem, doncha think?
By presuming to identify my problem, you've made some incorrect assumptions
about the situation. That, in turn, led you to propose a solution that has
nothing to do with what I am trying to accomplish.

However, if you re-read my original post, you could help me with a SOLUTION
to the problem as I identified it.

FWIW, a sample page is here:
http://www.bcfirstaid.com/adult.htm

Halfway down you see a link to a print version. Right now I've used "brute
force" technique -- a single cell table of fixed width that produces the
same output in IE, FF and Netscape. Unsophisticated but entirely sufficient
with only six simple tags required.

Print stylesheets have some merit, but aren't without their own issues. Can
you propose a simpler technique? Can you tell me why my original solution
wouldn't work? I look forward to your reply.

M
 
M

Mark Parnell

Deciding to do something for the good of humanity, Michael Laplante
I never said I needed specific margins or even margins at all.
Click to expand...

Yes you did:
So that tells me that a print stylesheet won't necessarily guarantee the
margins I'm looking for.
Click to expand...

Message-id: said:
I simply want
some sort of margin to make the printed output more visually appealing to
the end user.
Click to expand...

See? You said it again.
I simply wanted to know why my one line CSS solution didn't
work and what SIMPLE alternatives existed.
Click to expand...

Get rid of all that absolute positioning. You're making it far more
complicated than it needs to be.
I would think that I'm the best person to identify my problem, doncha think?
Click to expand...

Not necessarily. Given the evidence available, I'd say certainly not.
By presuming to identify my problem, you've made some incorrect assumptions
about the situation.
Click to expand...

Only because you didn't provide enough information in the first place,
namely a URL.
FWIW, a sample page is here:
http://www.bcfirstaid.com/adult.htm
Click to expand...

As I said above, most likely it's all the absolute positioning that's
causing problems.
Print stylesheets have some merit, but aren't without their own issues.
Click to expand...

Such as? I haven't ever had problems with them.
 
M

Michael Laplante

Mark Parnell said:
Deciding to do something for the good of humanity, Michael Laplante


Yes you did:

Get rid of all that absolute positioning. You're making it far more
complicated than it needs to be.
Click to expand...

How so? Why does absolute positioning make it complicated? What would you do
to "simplify it?" How does this relate to my wanting (not needing) a margin
for aesthetic purposes?
Not necessarily. Given the evidence available, I'd say certainly not.
Click to expand...

Do you have a solution or not?
Only because you didn't provide enough information in the first place,
namely a URL.


As I said above, most likely it's all the absolute positioning that's
causing problems.
Click to expand...

"Most likely?" So you aren't sure? Should I use relative positioning? Will
that give me margins with my original body tag?
Such as? I haven't ever had problems with them.
Click to expand...

A printsheet is a SIMPLE CSS solution to my margins issue? Can you point me
to a sample of one of your print stylesheets that would give me margins.

Aside from vague comments and guesses you haven't demonstrated any depth of
knowledge here. Are you considered one of the experts in this ng?

Please go "help" someone else. . .
 
D

dorayme

Michael Laplante said:
Aside from vague comments and guesses you haven't demonstrated any depth of
knowledge here. Are you considered one of the experts in this ng?

Please go "help" someone else. . .
Click to expand...

Yes, he is an expert and a good mate of mine (he has been seen
trying to disown me in pubs around Sydney, but so what? Haven't
you heard of the concept of unrequited mateship?)

Your html at http://www.bcfirstaid.com/adult.htm does not
validate.

Your chances of getting folk here to look at code auto-generated
by software is low. There are too many issues with the codes so
generated generally.

It is good advice to be rid of tricky absolute positioning if you
can do without it.

Your blue menu floats to sometimes obscure text or look oddly
misplaced (it looks to have no place!). And it breaks badly when
text is enlarged.
 
M

Michael Laplante

dorayme said:
It is good advice to be rid of tricky absolute positioning if you
can do without it.
Click to expand...

Because. . .? Your mate said the same thing but didn't offer up a reason.
Even point me to a tutorial on the evils of absolute positioning and I'll be
impressed and grateful.
Your blue menu floats to sometimes obscure text or look oddly
misplaced (it looks to have no place!). And it breaks badly when
text is enlarged.
Click to expand...

You're the first one who has ever mentioned this. Nor can I can replicate
this behaviour in any of my three browsers. What browser / version are you
using? Do you use a personalized stylesheet?

"It looks to have no place!" Can you expand on that?

What do you mean by "breaks badly?' Lots of pages -- even ones that
validate -- break badly when text is enlarged.

Any suggestions re: my original request for margins? I don't need 'em
necessarily, nor do I need a specific size as some earlier respondants
assumed. I can always leave it up to the user to do it via their printer
settings. For me it's just a "nice to do" thing. Toby Inkster suggested
print stylesheets but they aren't going to be simple -- in this case -- from
what I've been reading. (DIVS not printing across pages, tables breaking at
inconvenient points, pagebreak not recognized by all browsers, etc.)

Thanks. . .

M
Click to expand...
 
J

Jose

It is good advice to be rid of tricky absolute positioning if you
Because. . .?
Click to expand...

Because absolute positioning depends on the user having the same
settings that you have. She doesn't. She has a bigger screen (or a
smaller one) and doesn't have or want the entire window covered with
your content - she is doing something else in another window at the same
time. She can't see very well so she has increased her default font
size (making a mess of your pixel perfect layout).
What do you mean by "breaks badly?' Lots of pages -- even ones that
validate -- break badly when text is enlarged.
Click to expand...

.... because they are badly designed. Pages can validate perfectly and
be awful.
Any suggestions re: my original request for [printer?] margins?
Click to expand...

You can't do it (reliably). If you want layout on the printed page, use
a LINK to a .pdf version of your page.

Jose
 
J

Jonathan N. Little

Michael said:
dorayme said:
Because. . .? Your mate said the same thing but didn't offer up a reason.
Even point me to a tutorial on the evils of absolute positioning and I'll be
impressed and grateful.
Click to expand...

Because absolute breaks out of the flow of the document and all your
positioning is defined in pixels. But you have

a) no control over what fonts the user has installed on his computer
b) what his default font site is set to
c) what his browser default margin sizes are set to

so with pixels position placed blocks within the document the text may
or MAY NOT fit properly when printed.

You can either design with more flexible layout where placement is
proportional to the text or if you must have precision printing use PDF.
You're the first one who has ever mentioned this. Nor can I can replicate
this behaviour in any of my three browsers. What browser / version are you
using? Do you use a personalized stylesheet?

"It looks to have no place!" Can you expand on that?

What do you mean by "breaks badly?' Lots of pages -- even ones that
validate -- break badly when text is enlarged.
Click to expand...

In Gecko browsers, (Firefox, SeaMonkey, Netscape, et al.) If you hit
CTRL + just twice the menu text grows larger than the block element LI
so the bottom of the text is chop off. I'd call that broken. The height
is constrained with absolute values rather than proportional to the text.

Which browsers have you check it in, IE only?
Any suggestions re: my original request for margins? I don't need 'em
necessarily, nor do I need a specific size as some earlier respondants
assumed. I can always leave it up to the user to do it via their printer
settings. For me it's just a "nice to do" thing. Toby Inkster suggested
print stylesheets but they aren't going to be simple -- in this case -- from
what I've been reading. (DIVS not printing across pages, tables breaking at
inconvenient points, pagebreak not recognized by all browsers, etc.)
Click to expand...

BTW your markup a hodge-podge of deprecated markup and CSS. At least 6
years out of date. Update your markup and your results will work better
with modern browsers.
Click to expand...
 
M

Mark Parnell

Deciding to do something for the good of humanity, dorayme
Yes, he is an expert and a good mate of mine
Click to expand...

Why, thank you ma'am.
(he has been seen
trying to disown me in pubs around Sydney, but so what? Haven't
you heard of the concept of unrequited mateship?)
Click to expand...

You owe me a drink. ;-)
 
K

kchayka

Michael said:
I would think that I'm the best person to identify my problem, doncha think?
Click to expand...

No, I think you're trying to fix the wrong problem. You just don't
realize it.
By presuming to identify my problem, you've made some incorrect assumptions
Click to expand...

No, I neither identified your problem, nor assumed anything. I merely
made a suggestion based on a hypothetical situation, because I didn't
know what your real problem was.
if you re-read my original post, you could help me with a SOLUTION
to the problem as I identified it.
Click to expand...

Sorry, but you didn't really identify the problem. You identified some
symptoms, but the underlying problem was still a mystery.
FWIW, a sample page is here:
http://www.bcfirstaid.com/adult.htm
Click to expand...

Your sample page pretty much confirms my suspicion that you are
hacking away at something without really understanding what you're
doing. If you did, it is extremely unlikely the stylesheet would
include things like height:9001px

Stuff like that is a dead give-away that you don't understand it.
Halfway down you see a link to a print version. Right now I've used "brute
force" technique -- a single cell table of fixed width that produces the
same output in IE, FF and Netscape. Unsophisticated but entirely sufficient
Click to expand...

And should be entirely unnecessary.
Print stylesheets have some merit, but aren't without their own issues.
Click to expand...

There is no reason *not* to use a simple print stylesheet. They work
remarkably well if you know how to use them properly.
Can you tell me why my original solution wouldn't work?
Click to expand...

Sorry, but your code is ugly and not worth fixing. Your HTML doesn't
validate. You're mixing HTML style attributes with CSS, and mixing
inline and external CSS. Consider yourself lucky that anything "works"
at all.

You should start over and do it right from the beginning, instead of
more hacking away at this thing. Why don't you go get some ready-made
CSS templates that are already well-tested out? You might learn from
them. Here is a place to start:
I look forward to your reply.
Click to expand...

Maybe, but you probably don't like it now that you've heard it. ;)

BTW, Mark gave you good advice about dropping all the positioning.
Chances are you don't need any at all, but in the event you do, don't
use it unless you first understand how it works and what the
repercussions are. That goes for both absolute and relative
positioning, as well as floats.

CSS is not something that you can learn overnight. It takes time,
patience and practice. Just don't be close-minded about it and things
will get easier.
 
M

Michael Laplante

Because absolute positioning depends on the user having the same settings
that you have.
Click to expand...

I essentially designed my site for 800x600 px screensize and up, using a
<div align=center> container which keeps everything relative to the screen.
I've checked out some award-winning websites and this is technique seems
common. So the absolute positioning is only relative to the container not
the screen.

Refs:
http://www.aawebmasters.com/
http://www.webaward.org/

However, a picture = 1K words. Can you give me a URL for a site that uses
only relative positioning so I can study it? Better yet if I can see the
stylesheet behind it. Something that mixes a variety of staggered containers
with images and text among them. I can't visualize how it can be done.
She can't see very well so she has increased her default font size (making
a mess of your pixel perfect layout).
Click to expand...

I've never come a across a site of any sophistication that can't be "messed
up" by increasing font size, particulary in Gecko browsers so I don't think
this observation is valid. (Unless you're sticking with simple columns which
isn't what I'd call sophisticated.) But again, showing me a URL to prove
your point would be educational.
... because they are badly designed. Pages can validate perfectly and be
awful.
Click to expand...

Well, once again, I re-iterate I've been to award-winning websites that
"break" with enlarged text so I don't think you can attribute them to bad
design. Otherwise, the definition of good design simply becomes any website
simple enough that it doesn't break. (circular logic and all. . .)

But once again, show me a URL to a reasonably sophisticated website that
validates, uses a good mix of graphics and text in a variety of staggered
containers and I'll check it out.
Any suggestions re: my original request for [printer?] margins?
Click to expand...

You can't do it (reliably). If you want layout on the printed page, use a
LINK to a .pdf version of your page.
Click to expand...

I think you may be right here.

Thanks for responding with some meaningful comments. If you can feed me some
URLs that illustrate your points I'd like to check them out.

HTML novice,

M
 
M

Michael Laplante

Jonathan N. Little said:
Michael Laplante wrote:
Click to expand...
so with pixels position placed blocks within the document the text may or
MAY NOT fit properly when printed.
Click to expand...

I agree. However, in theory, a print stylesheet would "redesign" the page
for print. I've been experimenting with print stylesheets. Essentially I
turn off all the graphic elements, and re-size the center container and the
text containers. However, I run into one of two issues:

In Gecko browser, DIV elements don't print across pages. But, if I get rid
of the DIV, I then encounter the margin problem in IE.
I haven't figured out a way around this and haven't come across any
references that offer a fool proof way around it either.
You can either design with more flexible layout where placement is
proportional to the text or if you must have precision printing use PDF.
Click to expand...

Agree that PDF seems to be the only sure way right now.
In Gecko browsers, (Firefox, SeaMonkey, Netscape, et al.) If you hit CTRL
+ just twice the menu text grows larger than the block element LI so the
bottom of the text is chop off. I'd call that broken. The height is
constrained with absolute values rather than proportional to the text.
Click to expand...

Aah, there's something I didn't know. I can set up containers that will
re-size and maintain their relative vertical spacing with changing text
size. How do I do this? (URL to a tutorial?)
BTW your markup a hodge-podge of deprecated markup and CSS.
Click to expand...

No argument. Thass why I'm here. . . :)

M
 
T

Toby Inkster

Michael said:
In Gecko browser, DIV elements don't print across pages.
Click to expand...

You're probably using absolute positioning in your print style sheet -- a
recipe for disaster.

Try the following print CSS:

#Osidebar, #Owbkgd, #Ohrtbt, #Otitle, #Ocuff,
#Ofadebar, #Obluesdbr, #Onavmenu, #Ovan
{ display: none; }
#Ologo, #Opagetitle
{ text-align: center; }
#Ocontent
{ margin: 0 2em; }

Save that as "print.css". Now replace this:

<link type="text/css" href="mystyles.css" rel="stylesheet" />

with this:

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

Jose

I essentially designed my site for 800x600 px screensize and up, using a
<div align=center> container which keeps everything relative to the screen.
I've checked out some award-winning websites and this is technique seems
common. So the absolute positioning is only relative to the container not
the screen.
Click to expand...

This goes to show that awards are not useful indicators of website
"goodness". By forcing your visitors to use up 800x600 of their screen
in order to see your site, you are doing them a disservice. Sadly, on
the web people are getting inured to disservice, but nonetheless,
somebody has to stick up for the cattl... customers. :)

Do not design for an 800x600 viewport. Design for an arbitrary
viewport, and let your design flow smoothly whatever size of screen your
visitor has, or deigns to release to you.
However, a picture = 1K words. Can you give me a URL for a site that uses
only relative positioning so I can study it?
Click to expand...

I could do that, but then I'd have to kill you.

The site I run uses only relative positioning. However I commit other
sins, so keep that in mind.
http://www.flying20club.org
I do not use CSS (I don't know it yet - I just recently rescued this
site from a previous webmaster who used FrontPlague), and I do use
tables for layout (although I do very little that requires layout).
There are other sins of which I am aware and I doubt the site validates;
this is an interim solution. Further, since I don't have control over
the account, I don't have the tools to set some things up properly (such
as .php and server side scripting). The site is not "sophisticated" at
all, but there is nothing on the site that wants sophistication, and
misplaced sophistication is a Bad Thing.

However, I have endeavored to make the site fluid, so that any viewport
size would work, and I have endeavored to respect user preferences.

Sometime in the future I intend to learn how to do .php so that
maintanance is easier, and I will be looking into CSS (though I've seen
so much bad CSS done I enter with trepidation).
Otherwise, the definition of good design simply becomes any website
simple enough that it doesn't break...
Click to expand...

My definition is one that
1: respects the user's preferences
2: accomplishes the goal of the USER (not the necessarily the webmaster)
3: is easy to use and not distracting
4: is not more sophisticated than necessary.

Jose
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with my responsive home page 2
Flip-Cards with Local Images 1
When draggable=false & draggable=true dont work ? 1
Working on mobile css menu with plenty of frustration! 2
Help with code 0
Im having trouble containing a title an image and a button 2
DIV drawing on other div 4
Vertical Align a <DIV> 1

Members online

No members online now.
Total: 38 (members: 1, guests: 37)
Robots: 226

Forum statistics

Threads
473,764
Messages
2,569,567
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top