SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict dionsiseire's Avatar
    Join Date
    Apr 2005
    Location
    Dublin
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css in print the text breaks the box

    im running a page that will be printed, the content of which could be anything.

    the generated page will consist of a few div's which are nested inside an outer Div called box and a content div

    the box div

    HTML Code:
     #box 
     {
     	margin: auto;
     	padding: 0;
     	text-align: center;
     	width: 1000px;
     	border : solid 1px #000000;
     	background: #FFFFFF;
     }
    This Div is around the entire site

    there is then a header div, and a content div

    the content div is open and inside that div will be the sites main content

    HTML Code:
     #content 
     {
     	margin: auto;
     	padding: 6px;
     	text-align: left;
     	width: 980px;
     	font: 9pt verdana, arial;
     	color: #000;
     	background: #FFFFFF;	
     }
    now most of the site looks fine but i have 2 problems relating to the same issue

    my first problem is a page which generates a lot of content, that will eventually get printed

    im using Div's to seperate out the content as different parts of the page need seperation. so i have a details div.

    HTML Code:
     #details
     {
     	border : solid 1px #000000;
     	margin-bottom: 10px;
     	background-color: #ffe;
     	text-align: left;	
     }

    now this div is giving me my 2 problems

    firstly, sometimes when the generated content contains a table, the table breaks the border of the div even though the table itself may not be too wide, and the height of the div should just expand like it does if text was entered.

    Also when i print, it looks ok but some of the words go outside the div, its mostly only 1 word which breaks over the border, but it looks crap for a printed report even if it is legible.

    is there any way to force this overflow content to stay within the div without generating scroll bars, and for print, without making it disapear?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    firstly, sometimes when the generated content contains a table, the table breaks the border of the div even though the table itself may not be too wide, and the height of the div should just expand like it does if text was entered.

    You will need to provide a working example of exactly what ou describe and then somebody will try to help (full html and css). There is notenough information in your post to make any judgement about what this may be because any number of factors could come into play here .

    It could be that you are not clearing floats or it could be that your table is simply too big to fit and breaks the parent div. The only way we could give an answer is if you provide the full details and preferably display a working version that exhibits the exact problem. It doesn't matter if your site is dynamic as you can simply copy the code from your dynamic site in the situation that causes the problem (view source) and adjust the code to be a stand-alone version.

    In essence that is what you are asking us to do without providing the means to do it .

    Print stylesheets are limited in their abilities of dictating page size because this is ultimately handled by the browsers and printers controls. I usually set widths to auto in the print stylesheet so that the text will wrap as required. You can't really get the same look on print as you can on screen as you don't have the ultimate control over the medium.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •