13 replies [Last post]
katamail
katamail's picture
Offline
newbie
Last seen: 7 years 9 weeks ago
Timezone: GMT+2
Joined: 2014-09-25
Posts: 10
Points: 12

Hello!
I'm an absloute beginner in CSS, so please have patience
I'm having a problem when printing a text area on my homepage, text will appear to the right of the preview printing page and of course on the A4-paper when I try to print, and I'm not able to figure out how to center it.
what do I need to do to center the text on the printing page?

Here is the HTML:

<---printable area--->

and here is the CSS:

@media print {
body * {
visibility:hidden;
}
#printable, #printable * {
visibility:visible;
}
#printable { /* aligning the printable area */
position:absolute;
left:40;
top:40;
}
}

Thanks in advance for any help

Max

dirtslayer
dirtslayer's picture
Offline
newbie
canada
Last seen: 7 years 9 weeks ago
canada
Timezone: GMT-6
Joined: 2014-09-19
Posts: 7
Points: 7

forgot units for left and top

katamail
katamail's picture
Offline
newbie
Last seen: 7 years 9 weeks ago
Timezone: GMT+2
Joined: 2014-09-25
Posts: 10
Points: 12

Forgot to put code to begin and end of the HTML

Here is the HTML

<div id="printable">

<---printable area--->

</div>

and here is the CSS:

@media print {
body * {
visibility:hidden;
}
#printable, #printable * {
visibility:visible;
}
#printable { /* aligning the printable area */
position:absolute;
left:40px;
top:40px;
}
}

katamail
katamail's picture
Offline
newbie
Last seen: 7 years 9 weeks ago
Timezone: GMT+2
Joined: 2014-09-25
Posts: 10
Points: 12

left and top unit

to dirtslayer

Setting unit px to left "40px" and top "40px" didn't help, still printing with text on the right of the page

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 16 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Positioned ancestor?

Is there a positioned ancestor to #printable?

Besides the css, the html source is necessary to properly debug. Can you provide a link?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

katamail
katamail's picture
Offline
newbie
Last seen: 7 years 9 weeks ago
Timezone: GMT+2
Joined: 2014-09-25
Posts: 10
Points: 12

Positioned ancestor?

Hi!
My website is not yet published so I can't give you a link, wat I can do is to post the entire code of my index HTML:

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>under costruction</title>
<meta name="robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]><link href="css/iehacks.css" rel="stylesheet" type="text/css" /><![endif]-->
<script type="text/javascript" src="js/jquery.js"></script>
<!--[if IE 6]>
	<script type="text/javascript" src="js/ie6pngfix.js"></script>
	<script type="text/javascript">
		DD_belatedPNG.fix('img, ul, ol, li, div, p, a, h1, h2, h3, h4, h5, h6');
	</script>
<![endif]-->
</head>
<body id="page">
<div class="rapidxwpr floatholder">
	<div id="middle"><div class="inner_copy"></div>
		<div id="left" class="clearingfix">
			<a href="#"><img id="logo" class="correct-png" src="" alt="" title="" /></a>
 
			<div class="menu">
				<ul>
 
                                        <li><a href="" class="welcome">Welcome</a></li>
                                        <li><a href="index.htm" class="home">Home</a></li>
					<li><a href="index.htm" class="citronkaka">citronkaka</a></li>
                                        <li><a href="index.htm" class="citronkaka">citronkaka</a></li>
                                        <li><a href="index.htm" class="citronkaka">citronkaka</a></li>
					<li><a href="index.htm" class="citronkaka">citronkaka</a></li>
                                        <li><a href="index.htm" class="citronkaka">citronkaka</a></li>
                                        <li><a href="index.htm" class="citronkaka">citronkaka</a></li>
                                        <li><a href="index.htm" class="citronkaka">citronkaka</a></li>
					<li><a href="#raptors"><img src="citron.jpg"></a></li>
 
 
 
				</ul>
			</div>
		</div>
		<div id="main">
			<div id="main_container" class="clearingfix">
				<div id="mainmiddle" class="floatbox withright">
					<div class="">
						<h2></h2></div>
					<div class="">
                                        <div id="printable">
 
 
						<h2><center><p><strong>Citronkrämkaka</strong></p></center></h2><br /><br />
 
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
                                                   nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
                                                   volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
                                                   ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
                                                   Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
                                                   molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero 
                                                   eros et accumsan et iusto odio dignissim qui blandit praesent luptatum 
                                                   zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber 
                                                   tempor cum soluta nobis eleifend option congue nihil imperdiet doming 
                                                   id quod mazim placerat facer possim assum. Typi non habent claritatem 
                                                   insitam; est usus legentis in iis qui facit eorum claritatem. 
                                                   Investigationes demonstraverunt lectores legere me lius quod ii 
                                                   legunt saepius. Claritas est etiam processus dynamicus, qui sequitur 
                                                   mutationem consuetudium lectorum. Mirum est notare quam littera gothica, 
                                                   quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis 
                                                   per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis 
                                                   videntur parum clari, fiant sollemnes in futurum.<br /><br /><br /></p>
 
                                                <center><img src="citron.jpg" alt="Citronkrämkaka" width="300" height="200"></a></center>
                                        </div>                   
					</div>  
				</div>
			</div>
		</div>
	</div>
 
 
 
	<div id="footer">
		<center>
			<div class="</div>
			<div class="fright">Design by Massimo<a href=""></a></div>
			<a href="" target="_blank"></a>.  <a href="" title=""></a> 
		</center>
	</div>
</div>
</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 16 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

That wil help

And the rest of the css?

BTW, css and javascript hacks for ie6&7 should be left off until you have a working page. It's actually pretty simple to allow for old versions of IE without special scripts and only minor hacks in the css.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

jitu jee2
Offline
newbie
Last seen: 7 years 9 weeks ago
Timezone: GMT+5.5
Joined: 2014-09-26
Posts: 1
Points: 1

See

See more
http://techgurulab.com/course/css-quiz-online/

//Mod edit: Be careful. This has every appearance of being spam. Spamming the forum is not allowed. ~gt

katamail
katamail's picture
Offline
newbie
Last seen: 7 years 9 weeks ago
Timezone: GMT+2
Joined: 2014-09-25
Posts: 10
Points: 12

HTML+ CSS x2

HTML:

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>under costruction</title>
<meta name="robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]><link href="css/iehacks.css" rel="stylesheet" type="text/css" /><![endif]-->
<script type="text/javascript" src="js/jquery.js"></script>
<!--[if IE 6]>
	<script type="text/javascript" src="js/ie6pngfix.js"></script>
	<script type="text/javascript">
		DD_belatedPNG.fix('img, ul, ol, li, div, p, a, h1, h2, h3, h4, h5, h6');
	</script>
<![endif]-->
</head>
<body id="page">
<div class="rapidxwpr floatholder">
	<div id="middle"><div class="inner_copy"></div>
		<div id="left" class="clearingfix">
			<a href="#"><img id="logo" class="correct-png" src="" alt="" title="" /></a>
 
			<div class="menu">
				<ul>
 
                                        <li><a href="" class="welcome">Welcome</a></li>
                                        <li><a href="index.htm" class="home">Home</a></li>
					<li><a href="index.htm" class="citronkaka">citronkaka</a></li>
                                        <li><a href="index.htm" class="citronkaka">citronkaka</a></li>
                                        <li><a href="index.htm" class="citronkaka">citronkaka</a></li>
					<li><a href="index.htm" class="citronkaka">citronkaka</a></li>
                                        <li><a href="index.htm" class="citronkaka">citronkaka</a></li>
                                        <li><a href="index.htm" class="citronkaka">citronkaka</a></li>
                                        <li><a href="index.htm" class="citronkaka">citronkaka</a></li>
					<li><a href="#raptors"><img src="citron.jpg"></a></li>
 
 
 
				</ul>
			</div>
		</div>
		<div id="main">
			<div id="main_container" class="clearingfix">
				<div id="mainmiddle" class="floatbox withright">
					<div class="">
						<h2></h2></div>
					<div class="">
                                        <div id="printable">
 
 
						<h2><center><p><strong>Citronkrämkaka</strong></p></center></h2><br /><br />
 
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
                                                   nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
                                                   volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
                                                   ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
                                                   Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
                                                   molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero 
                                                   eros et accumsan et iusto odio dignissim qui blandit praesent luptatum 
                                                   zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber 
                                                   tempor cum soluta nobis eleifend option congue nihil imperdiet doming 
                                                   id quod mazim placerat facer possim assum. Typi non habent claritatem 
                                                   insitam; est usus legentis in iis qui facit eorum claritatem. 
                                                   Investigationes demonstraverunt lectores legere me lius quod ii 
                                                   legunt saepius. Claritas est etiam processus dynamicus, qui sequitur 
                                                   mutationem consuetudium lectorum. Mirum est notare quam littera gothica, 
                                                   quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis 
                                                   per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis 
                                                   videntur parum clari, fiant sollemnes in futurum.<br /><br /><br /></p>
 
                                                <center><img src="citron.jpg" alt="Citronkrämkaka" width="300" height="200"></a></center>
                                        </div>                   
					</div>  
				</div>
			</div>
		</div>
	</div>
 
 
 
	<div id="footer">
		<center>
			<div class="</div>
			<div class="fright">Design by Massimo<a href=""></a></div>
			<a href="" target="_blank"></a>.  <a href="" title=""></a> 
		</center>
	</div>
</div>
</body>
</html>

CSS-1:

body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,blockquote,th,td {margin:0;padding:0}
fieldset,img {border:0}
html {height:100%;margin-bottom:1px}
body {position:relative}
:focus {outline:none}
a {color:#222;text-decoration:none}
a:hover {color:#008cff;text-decoration:underline}
h1, h2, h3, h4, h5, h6 {font-family:Arial, Helvetica, sans-serif;font-weight:bold}
h1 {font-size:300%;color:#000}
h2 {font-size:150%;color:#600}
h3 {font-size:200%;color:#000}
h4 {font-size:175%;color:#000}
h5 {font-size:150%;color:#787878}
h6 {font-size:125%;color:#000}
body {background:url(../images/page_bg.jpg);font-family:Arial, Helvetica, sans-serif;line-height: no-repeat;140%;color:#000;font-size:14px}
div.rapidxwpr {margin:auto;width:860px;background:url(../images/wrapper-bg.png) 0 0 no-repeat}
.fleft {float:left}
.fright {float:right}
.fclear {clear:both}
.inner_copy, .inner_copy a {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
div#header {position:relative;height:150px;margin:0}
span#logo, img#logo {width:211px;height:252px;border:0;margin:10px 0 0 0}
div#middle {width:auto;margin:0;clear:both}
div#left {width:222px;position:relative;z-index:10;float:left;padding:0}
div#main {width:auto;background:url(../images/content-top.png) 0 50px no-repeat;margin:0 0 0 222px;padding:109px 0 0 0;z-index:100;position:relative}
div#main_container {background:url(../images/content-bottom.png) 0 100% no-repeat;padding:0 0 59px 0}
div#mainmiddle {margin:0;background:url(../images/content-bg.png) 0 0 repeat-y;padding:10px 59px 0 59px}
div#footer {margin:auto;padding:10px 0 20px 222px;clear:both;color:#baac7e;text-align:center;font-size:12px}
div#footer a {color:#baac7e;text-decoration:none}
div#footer a:hover {text-decoration:underline}
.clearingfix:after {content:".";display:block;line-height:0;clear:both;visibility:hidden}
.clearingfix {display:block}
.floatbox {overflow:hidden}
div.menu {margin:30px 0 0 0}
div.menu ul {padding:0;margin:0 0 0 50px;list-style:none;float:left}
div.menu ul li {margin:5px 0 0 0}
div.menu a {display:block;position:relative;padding:0;overflow:hidden;color:#fff;width:222px;text-indent:-9999px}
div.menu a:hover {text-decoration:none}
div.menu a.welcome {background:url(../images/welcome.png) 40px 0 no-repeat;height:44px}
div.menu a.home {background:url(../images/menu-home.png) 40px 0 no-repeat;height:44px}
div.menu a.citronkaka {background:url(../images/citronkaka.png) 0 0 no-repeat;height:40px}
div.menu a.organic {background:url(../images/menu-organic.png) 0 0 no-repeat;height:42px}
div.menu a.delivery {background:url(../images/menu-delivery.png) 20px 0 no-repeat;height:49px}
div.menu a.contact {background:url(../images/menu-contact.png) 15px 0 no-repeat;height:38px}
div.menu a.caffekaka {background:url(../images/caffekaka.png) -20px no-repeat;height:35px}
 
 
 
@media print {
body * {
visibility:hidden;
}
#printable, #printable * {
visibility:visible;
}
#printable { /* aligning the printable area */
position:absolute;
left:40px;
top:40px;
}
}

CSS-2:

.clearingfix{display:inline-block}
/* Hides from IE-mac \*/
* html .clearingfix{height:1%}
.clearingfix{display:block}
/* End hide from IE-mac */
* html .floatbox{width:100%}
.ie_fix_floats{width:100%;padding:0 1px 0 1px;margin:0 -1px 0 -1px;overflow:hidden}
/* Escaping Floats Bug */
/* Hides from IE-mac \*/
.floatholder{height:1%}
/* End hide from IE-mac */
/* Peekaboo Bug */
/* * html #left{position:relative}*/
/* * html #right{position:relative}*/
/* * html #main{position:relative}*/
/* force hasLayout */
#wrapper, #header, #top, #middle, #bottom{zoom:1}
/* Doubled Float Margins */
* html #left{display:inline}
* html #right{display:inline}
* html .float-left{display:inline}
* html .float-right{display:inline}
/* IE and italics Problem */
* html #left_container{overflow:visible}
* html #right_container{overflow:visible}
* html #main_container{overflow:visible}
* html i, * html em{overflow:visible;display:inline-block}
/* Expanding Box Problem */
* html #left_container{word-wrap:break-word}
* html #right_container{word-wrap:break-word}
* html #main_container{word-wrap:break-word}
/* Disappearing List-Background Bug */
/* * html ul{position:relative}*/
/* * html ol{position:relative}*/
/* * html dl{position:relative}*/
/* * html blockquote{zoom:1 }*/
/* IE/Win Guillotine Bug */
a, a:hover{background:transparent}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 16 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Thanks

I'll run that as soon as possible to see what's happening ... or not happening.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

katamail
katamail's picture
Offline
newbie
Last seen: 7 years 9 weeks ago
Timezone: GMT+2
Joined: 2014-09-25
Posts: 10
Points: 12

new stuff

I've been told to use display:none; instead of visibility:hidden;

in display none the printpreview seems perfectly centered but the textarea its all black:

AttachmentSize
displaynone.jpg 195.29 KB
visibilityhidden.jpg 265.89 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 16 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Minimal test case

A few comments first:

I see you're using a global reset. Don't. It only makes extra work, makes maintenance more expensive and is a total waste of effort.

The same applies to the various IE bug hacks. Those are aimed at IE6, which used an extremely buggy rendering engine. In IE7, MSFT built in the fixes worked out by several people who worked out pretty much where the bugs lay. Tony Aslett, our host developed the original clearfix hack. Tony's hack has been pretty much obsoleted by increased knowledge of the specs and browsers' support.

When writing your markup, use a sane indentation. Two spaces are sane. (I find three spaces are easier to read for programming, e.g. javascript, C/C++, or PHP, though Lisp is OK at two spaces Tabs should not be used unless your editor saves tabs as the desired number of spaces. Most source viewers (and editors) treat tabs as eight spaces. A few levels of nesting and your line begins half way across the page.

Use consistent formatting for your css. Use a separate line for each rule,and indent from the selector's position. Use my format as seen in the code below as a good guide. (Of course it's a good model. If it weren't, I'd do it another way. Wink )

Here is a simplified version of your page which does, I think, what you want.

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test document</title>
  <style type="text/css">
/*<![CDATA[*/
 
  body {
    background-color: white;
    color: black;
    font: 100%/1.25 Arial, Helvetica, sans-serif;
    margin:0;
    padding:0
    }
 
  p {
    font-size: 1em;
    }
 
  /* Not a good idea — links should be obvious */
  a {
    color: #222;
    text-decoration:none
    }
 
  a:hover {
    color: #008cff;
    text-decoration: underline
    }
 
  #wrapper {
    margin:auto;
    width:860px;
    background:url(../images/wrapper-bg.png) 0 0 no-repeat
    }
 
  #main {
    overflow: hidden;
    }
 
  #nav {
    float: left;
    width: 222px;
    }
 
  #menu {
    list-style: none;
    padding: 0;
    }
 
  #content {
    overflow: hidden;
    }
 
  #footer {
    color: #BAAC7E;
    font-size: .75em;
    padding: 10px 0 20px;
    text-align: center;
    }
 
  #footer a {
    color: #baac7e;
    }
 
  @media print {
    #header,
    #nav,
    #footer {
      display: none;
      }
 
    .printable {
      display: block;
      }
 
    .printable h1 {
      text-align: center;
      }
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <div id="wrapper">
    <div id="main">
      <div id="nav">
        <p><a href="#"><img alt="fill image / logo"
             id="logo"
             src="wmark-test-image.gif"
             title=""></a></p>
 
        <ul id="menu">
          <li><a class="welcome"
             href="">Welcome</a></li>
 
          <li><a class="home"
             href="index.htm">Home</a></li>
 
          <li><a class="citronkaka"
             href="index.htm">citronkaka</a></li>
 
          <li><a class="citronkaka"
             href="index.htm">citronkaka</a></li>
 
          <li><a class="citronkaka"
             href="index.htm">citronkaka</a></li>
 
          <li><a class="citronkaka"
             href="index.htm">citronkaka</a></li>
 
          <li><a class="citronkaka"
             href="index.htm">citronkaka</a></li>
 
          <li><a class="citronkaka"
             href="index.htm">citronkaka</a></li>
 
          <li><a class="citronkaka"
             href="index.htm">citronkaka</a></li>
 
          <li><a href="#raptors"><img alt="Citronkrämkaka"
               src="citron.jpg"></a></li>
        </ul>
      </div>
 
      <div class="printable"
           id="content">
        <h1>Citronkrämkaka</h1>
 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
        volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
        ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
        molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
        eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
        zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber
        tempor cum soluta nobis eleifend option congue nihil imperdiet doming
        id quod mazim placerat facer possim assum. Typi non habent claritatem
        insitam; est usus legentis in iis qui facit eorum claritatem.
        Investigationes demonstraverunt lectores legere me lius quod ii legunt
        saepius. Claritas est etiam processus dynamicus, qui sequitur
        mutationem consuetudium lectorum. Mirum est notare quam littera
        gothica, quam nunc putamus parum claram, anteposuerit litterarum formas
        humanitatis per seacula quarta decima et quinta decima. Eodem modo
        typi, qui nunc nobis videntur parum clari, fiant sollemnes in
        futurum.</p>
 
        <div id="footer">
          <p><img alt="Citronkrämkaka"
               height="200"
               src="citron.jpg"
               width="300"></p>
 
          <p><a href="http://sample.com">Design by Massimo</a></p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Do ask if you're not sure about what I did and why.

cheers,

gary

AttachmentSize
wmark-test-image.gif 1.64 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

katamail
katamail's picture
Offline
newbie
Last seen: 7 years 9 weeks ago
Timezone: GMT+2
Joined: 2014-09-25
Posts: 10
Points: 12

Thank you!

You are a genius! Thank you very much Smile

Now everything is working great, again..thank you very much for your time and your help!

Regards
Max

emilyngo
emilyngo's picture
Offline
newbie
Sydney
Last seen: 7 years 6 weeks ago
Sydney
Timezone: GMT+11
Joined: 2014-10-19
Posts: 1
Points: 1

Great help indeed

I was having the same problem. Its a great help. Thanks to all the forum members for their time and effort.