Solved

CSS Print Problem

Posted on 2004-10-28
1,329 Views
Last Modified: 2013-11-19
Hi experts, I'm using the following style in a linked CSS where this style limits the max and min width of a table.  The problem I'm having is that in print preview and print also, my table width is exceeding the page print area and therefore the whole table content is not being printed.


#table1
{
     border:1px solid black;
     min-width:750px;
     max-width:950px;
     width: expression((this.parentNode.clientWidth > 950)?950+"px":(this.parentNode.clientWidth <= 750 + 0)?750+"px":"100%")
}

The questions are how do I restrict my table width for the purpose of printing but maintain the above style for screen viewing and where should style be added to achieve this?

Many thanks

Jezella
0
Question by:jezella
    44 Comments
     
    LVL 4

    Expert Comment

    by:Magic55
    0
     
    LVL 3

    Expert Comment

    by:KvdnBerg
    You can use @media print in your stylesheet to define styles used only for printing:

    Example:
    @media print {
        #table1
        {
            max-width: 600px;
        }
    }
    0
     

    Author Comment

    by:jezella
    Thanks Magic55.  I've tried so many ways now buth still not got it working.  I've ordered a book on CSS but have to wait for it to arrive.

    KvdnBerg, ta.  I can see what you are getting at here.  The downside, I think, from reading the code is max-width: x

    Examples follow:-

    http://www.ashley-wedding-cars.co.uk/yell2.htm

    The above example works just as I wish on the PC monitor though not for print.

    In the case of the following, this is ideal for printing both in landscape and portrait though I loose table width control as in http://www.ashley-wedding-cars.co.uk/yell2.htm where the media is screen.

    http://www.ashley-wedding-cars.co.uk/matching-wedding-cars.htm

    However, in the case of this:=

    @media print {
        #table1
        {
            max-width: 600px;
        }
    }

    Which linked CSS ought it go into.  Print.CSS or Screen.CSS

    Jezella

    0
     

    Author Comment

    by:jezella
    I might have got it. I am now using the following in both my Screen and Print .CSS

    #table1
    {
         border:1px solid black;
         min-width:750px;
         max-width:950px;
         width: expression((this.parentNode.clientWidth > 950)?950+"px":(this.parentNode.clientWidth <= 750 + 0)?750+"px":"100%")
    }

    Let me get back to you after a few trials.

    Jezella
    0
     
    LVL 3

    Expert Comment

    by:KvdnBerg
    The max width I was displaying was just an example to show the use of @media print, that you could use in the same style sheet or, you could set the style sheet link with media=print in the document. Works the same way: it will select those styles for printing, the others for normal display
    0
     

    Author Comment

    by:jezella
    I realize that 600 is an example but still unable to get this working.  The CSS links in my html are like this:-

    <!-- print -->
          <link rel="stylesheet" type="text/css" media="print" href="styles/print.css" />

          <!-- main styles -->
          <link rel="stylesheet" type="text/css" media="screen,projection" href="styles/awc.css" />


    The code for my print.CSS is below

    @media print {
        #table1
        {
            max-width: 600px;
        }
    }




    #navbar {
    display : none !important;
    }
    .udm {
    display : none;
    }
    .brochure_but {
    display : none;
    }
    .noprint , .skipCode , .accessLinksMiddle , #footerSearch {
    display : none !important;
    }
    * {
    color : #000;
    background-color : #fff;
    }
    a , strong {
    margin : 0;
    padding : 0;
    }
    abbr , acronym {
    border-bottom : medium none inherit;
    }
    abbr:after , acronym:after {
    content : " (" attr(title) ")";
    }

    And my main CSS awc.CSS is as below


    #table1
    {
         border:1px solid black;
         min-width:750px;
         max-width:950px;
         width: expression((this.parentNode.clientWidth > 950)?950+"px":(this.parentNode.clientWidth <= 750 + 0)?750+"px":"100%")
    }


    .p2          { font-family: Arial; font-size: 12pt; color: #000080; text-align: left;
                   margin-left: 10px; margin-right: 10px }
    .p1          { color: #FF0000; font-family: Arial; font-size: 12pt }

    .p3          { font-family: Arial; font-size: 10pt; color: #000080; text-align: center}
    .rear_nav          { font-family: Arial; font-size: 10pt; color: #000080; text-align: left}
    .brochure_but       { font-family: Arial; font-size: 10pt; color: #000080; text-align: left}

    .picture      {margin-left: 10px; margin-right: 30px }


    Where do you think I may be going wrong?

    Jezella
    0
     
    LVL 3

    Expert Comment

    by:KvdnBerg
    I think it might not like the two media print things. I am no expert on this but you're already saying media print in the link to the style sheet so the whole style sheet would be used for printing, not sure what it then does with the @media IN that stylesheet.
    0
     

    Author Comment

    by:jezella
    I tried the @media print only after your suggestion.  With or without the @media print within the print.CSS does not appear to make any difference to the results, as whatever method I've tried so far has resulted in failure.

    Jezella
    0
     
    LVL 3

    Expert Comment

    by:KvdnBerg
    Are you saying that none of the things in print.css are being used when printing? Otherwise, try a simple html page with one style sheet, with something like this:

    body {
    font-size: 8pt;
    }

    @media print {
    font-size: 30pt;
    color: #FFFF00;
    }

    If this doesn't work either maybe your browser isn't compatible with the media print
    If it does, try defining the print style as your main style sheet and no print css, then try printing and see if that has the result you are looking for.
    0
     
    LVL 4

    Expert Comment

    by:Magic55
    i'm not sure, but maybe you must have all you css between @media {  ... }

    example:

    @media screen {
              all screen css here
                  }
    @media print  {
                 all print css here
                  }

    and no css here ....

    0
     
    LVL 17

    Expert Comment

    by:mreuring
    I'm still testing with the file you supplied, but you've certainly ran into some serious implementation bug on IE's part.
    IE somehow leaks the styleshsheet you've set for media screen and projection into the printer layout. Removing it form play results in a printable layout, even worse setting it as the print stylesheet only will even result in a printable layout. As I said, I'm still testing, but this is a complete mess.
    0
     

    Author Comment

    by:jezella
    KvdnBerg the print.CSS is being read as font colour is changed from blue to black.

    Magic, where do you suggest above example goes.
    0
     
    LVL 3

    Expert Comment

    by:KvdnBerg
    If the print is read for printing than that at least is not the problem. Have you tried my suggestion of setting the css settings you want for printing as default, taking out the media=print link and then seeing if printing works as desired?
    0
     
    LVL 4

    Expert Comment

    by:Magic55
    This simple example work for me. The text is blue on the screen and red on the print preview.

    <html>
    <head>

    <style>
    @media screen
    {
          .test
          {
                color: #0000ff;
          }
    }
    @media print  
    {
          .test
          {
                color: #ff0000;
          }
    }

    </style>
    </head>
    <body>

    <div class="test">Test</div>

    </body>
    </html>

    / TK
    0
     
    LVL 17

    Expert Comment

    by:mreuring
    Ok, bad news :(

    That expression you use looks like one I've written some months ago, it works nice and cool for webpages shown on screen but turns out to have a nasty side-effect. The expression gets linked with the object as a sort of event-driven javascript. That's all cool and well as long as things are shown on-screen but it goes bump once you try to switch to printing it instead :(. The result is downright nasty, whatever value was last set. Allas, there's no way of overuling this, not even the @media print, however setup, either in the css file or in the link rel.

    As a test case which proofs my point, open the above mentioned test-page, set the browser to max-width and check the print-preview, then set the browser to the minimum width and test the print-preview again. Try running this scriptlet while at max-width: javascript:void(document.getElementById("table1").style.width="auto") and you'll see that the print-preview again looks all nice and snug.

    Still trying to figure out a way around this,

      Martin
    0
     

    Author Comment

    by:jezella
    I have no doubt that my print.css is being read as format does change.  What is causing the problem is this code in main.css

    #table1
    {
         border:1px solid black;
         min-width:750px;
         max-width:950px;
         width: expression((this.parentNode.clientWidth > 950)?950+"px":(this.parentNode.clientWidth <= 750 + 0)?750+"px":"100%")
    }


    Once the above code is removed from main.css, problem solved.  What I am unable to understade is that if the print.css is being read upon printview command, then why is the above code causing a problem in print view when it is in the main.css.

    Jezella
    0
     
    LVL 3

    Expert Comment

    by:KvdnBerg
    I think that's where mreuring's comment comes in.
    0
     

    Author Comment

    by:jezella
    Seanpowell gave me a hand in the following question.


    This could well be a question not asked before as it is only recent that monitor sizes could become an issue.

    The question:-

    Is possible to restrict a table width to x% subject to a maximum pixel width.

    The question here may not be clear so consider that 1 pc monitor is of 15' and another is of 23'.  In the case of the 15' monitor having a table width of 95% would result in a page without scroll bars as the table would be lengthened instead.  However, in the case of the 23' monitor, the contents of the table could become unacceptable.  Now, should the table width be set in pixels and the page viewed on a small monitor or one where the history pane remains visable, where pixels have been specified to determine width, this again results in scroll bars.  Hence, is possible to restrict a table width to x% subject to a maximum pixel width.

    ------------

    This lead me to use the following code in my main.css

    #table1
    {
         border:1px solid black;
         min-width:750px;
         max-width:950px;
         width: expression((this.parentNode.clientWidth > 950)?950+"px":(this.parentNode.clientWidth <= 750 + 0)?750+"px":"100%")
    }

    And all seemed to work fine until print preview and print.

    Would the following work

    #table1
    {
         border:1px solid black;
         min-width:750px;
         max-width:950px;
    }
    0
     
    LVL 17

    Expert Comment

    by:mreuring
    I found a fix, to you to judge if you want to go ahead and use it, change your body tag to:
    <body onbeforeprint="document.printing=true;document.recalc();" onafterprint="document.printing=false;document.recalc();">

    And alter the expression like this:
         width: expression((!document.printing)?(this.parentNode.clientWidth > 950)?950+"px":(this.parentNode.clientWidth <= 750 + 0)?750+"px":"100%":"auto")

    It looked like it was working on my screen. Basically I'm forcing IE to recalculate the width of the table when it wants to print and after it's done drawing the printer output it recalculates again so that it looks good on screen once more.

    Hope it helps,

      Martin
    0
     
    LVL 3

    Expert Comment

    by:KvdnBerg
    There might be another way to solve that width problem, that is setting the class or id of the mentioned table by javascript when the window size is changed and on loading the body. I used the following script to change the class (you're using id here though) of an element with id="center". I'm not sure if you can change id's with javascript in the same manner or at all.  This particular function was used for a div that had to stay centered but where the left part would go ofscreen when the window size was smaller than the div, so the class "left" would align it left instead. Perhaps you can use this to change the settings you need, so you don't need the expression in your css that gives problems.

    <script language="JavaScript">
    <!--
    function init() {
    var winW = 630, winH = 460;

    if (parseInt(navigator.appVersion)>3) {
     if (navigator.appName=="Netscape") {
      winW = window.innerWidth;
      winH = window.innerHeight;
     }
     if (navigator.appName.indexOf("Microsoft")!=-1) {
      winW = document.body.offsetWidth;
      winH = document.body.offsetHeight;
     }
    }

    if (winW < 810)
    {
       document.getElementById("center").className = "left";
    }
    else
    {
       document.getElementById("center").className = "center";
    }

    }
    -->    
    </script>
    0
     
    LVL 3

    Expert Comment

    by:KvdnBerg
    Forgot the body tag to go with the above javascript

    <BODY onload="init();" onResize="init();">
    0
     
    LVL 17

    Expert Comment

    by:mreuring
    One small adition before I go home for the day, in case any other browsers are thinking of supporting onbeforeprint events, this might be better for the body tag:
    <body onbeforeprint="if (document.recalc) { document.printing=true;document.recalc(); }" onafterprint="if (document.recalc) { document.printing=false;document.recalc(); }">

    Good luck,

     Martin
    0
     

    Author Comment

    by:jezella
    Oooh dear. I'm not at all good with all this CSS and scripts etc. and am now totally lost. I have do idea what goes where.  Forgive me I'm trying to improve on my usual FP created pages.

    Mr Sorry
    0
     

    Author Comment

    by:jezella
    So do I understand this correct.  The following code goes into each html page and the code causing the problem in the main.css is removed.

    the main.css remains as does the print.css

    <HEAD>


    </HEAD>

    <BODY onload="init();" onResize="init();">

    <script language="JavaScript">
    <!--
    function init() {
    var winW = 630, winH = 460;

    if (parseInt(navigator.appVersion)>3) {
     if (navigator.appName=="Netscape") {
      winW = window.innerWidth;
      winH = window.innerHeight;
     }
     if (navigator.appName.indexOf("Microsoft")!=-1) {
      winW = document.body.offsetWidth;
      winH = document.body.offsetHeight;
     }
    }

    if (winW < 810)
    {
       document.getElementById("center").className = "left";
    }
    else
    {
       document.getElementById("center").className = "center";
    }

    }
    -->    
    </script>


    CONTENT
    CONTENT
    CONTENT

    </BODY>
    0
     

    Author Comment

    by:jezella
    Tried the following Berg and this did not set the table width.



    <!-- print -->
          <link rel="stylesheet" type="text/css" media="print" href="styles/print.css" />

          <!-- main styles -->
          <link rel="stylesheet" type="text/css" media="screen,projection" href="styles/awc3.css" />
    </head>





    <BODY onload="init();" onResize="init();">

    <script language="JavaScript">
    <!--
    function init() {
    var winW = 630, winH = 460;

    if (parseInt(navigator.appVersion)>3) {
     if (navigator.appName=="Netscape") {
      winW = window.innerWidth;
      winH = window.innerHeight;
     }
     if (navigator.appName.indexOf("Microsoft")!=-1) {
      winW = document.body.offsetWidth;
      winH = document.body.offsetHeight;
     }
    }

    if (winW < 810)
    {
       document.getElementById("center").className = "left";
    }
    else
    {
       document.getElementById("center").className = "center";
    }

    }
    -->    
    </script>

    <table border="0" id="table1" width="100%">
          <tr>
                <td height="110">
                      <table border="0" width="100%" id="table3" cellpadding="3">
                            <tr>
                                  <td>
                      <img border="0" src="img/common/co-name-tel.jpg" width="429" height="104"></td>
                                  <td>
                                  <p>Kings North<br>77 Portsmouth

    The table I'm trying to control is id="table1"

    Jezella
    0
     
    LVL 3

    Expert Comment

    by:KvdnBerg
    Yes, basically but I've just pasted my own code so you'll have to adapt it. First of all I've used classes which you set in css with something like
    .table 1 {
    stylesGoHere
    }
    instead of
    #table1 {
    }

    than in the html code you'll have something like id=table1, you need to replace that by class=table1, however, you'll also need an id in that table to set the class with the javascript (am i losing you yet?). So:

    <table class="table1" id="maintable">

    css:
    .table1 { .... }

    javascript:

    document.getElementById("maintable").className = "table1";

    and for printing:

    document.getElementById("center").className =  "table2";  

    In css you'll add a .table2 to conform with the size in the javascript condition

    I hope this is clear enough, I am afraid I don't have time right now to explain in more detail


    0
     

    Author Comment

    by:jezella
    Yet I did get lost.  I'll go through this again a bit later and see if I can understand it better.  I mentioned above in these post that I'm not googd at CSS and will recieve a book soon in the post.  So perhaps I'll get a better understanding once I've read som of that.

    Jezella
    0
     
    LVL 17

    Expert Comment

    by:mreuring
    Not to rain on your parade KvdnBerg but, as far as I can read, jezella does not know much about css yet, nor does she seem to comprehend what you want to do with your javascript. I also have the distinct feeling that she doesn't know how to adapt the javascript to do what you propose. And the worst part is, it's not going to work either. Please construct your own testcase using the link she provided and try to get it to work. Then come with a well-constructed answer that will get her set in the right direction.
    I have done some more tests, and although some idea's were sparked about using classes for setting this beast up, I don't particularly want to go there, in a question regarding max and minwidth we had decided to use the expression that I scripted, the same one SeanPowell now suggested to Jezella and that seems to work well enough except for printing. So once again I propose going from there on out and fix the printing problem. Due to the nature of expression that meens we have to alter the behaviour of the expression, simply applying different classes or media-types is not going to work. If someone wants a detailed description of why, ask me, and I will try and explain it, for now, please trust my judgement when I say, the expression will overrule ANY stylesheet that gets applied after the fact.
    Having said that, here's a link to a working and fixed version of the provided testlink: http://www.windgazer.nl/eexchange/yell2.htm

    I'm going to try and provide an even more complex expression, that will be easy to setup for use in site like these, but for now please see my comment above http:#12434849 to see how I've managed to do this.

    Catch you later,

      Martin
    0
     

    Author Comment

    by:jezella
    What a can of worms I appear to have opened.  I must say that the results achieved from what SwanPowell provided seemed to be such a simple and straight forward answer.  A dream answered in some respects as it catered for both narrow and wide screens and would allow view - explored bar etc.  Ideal.  However, I was so very dissapointed when I realize that print preview and print would not work.

    I always have a good go at anything before I post a question as I feel that it is unfair to expect an answer to a question that you have not made an attempt to answer yourself.

    As for the comments on this thread. I am really greatful that so much input has been provided.  The effort of so many experts is a real godsend to those that need help in this vast world of code etc.

    Many thanks to all at EE.

    Jezella
    0
     
    LVL 17

    Expert Comment

    by:mreuring
    It's a bit of a can of worms indeed :) I'm just surpriced we didn't run into this when I came up with that expression last time. but I'm well on my way to fixing it all in one expression, so that you yet again have the solution nice and tidy in your css-file.

    If you feel like my remark was based on your ability to ask a question, I must apologies. Your question was to the point and the most relevant information was there, you later supplied a link with a page in which the bug was easily noticed. I was remarking on some of the solutions being provided as incomplete and possibly beyond the comprehension of you.  I feel that in providing solutions to a question with a link to a clear-cut testcase we, as experts, should supply you with a fully working and tested solution, where possible.

    Work on my expression got interrupted, but I'll most likely post a new one within half an hour. And I'm happy to have someone around asking the tough riddles for us experts :)

     Martin
    0
     
    LVL 17

    Expert Comment

    by:mreuring
    It took me a bit longer then expected, but, this, I think should do the trick. Replace the current expression in your css file with the following:
    width: expression(window.status=(((minw=750) && (maxw=950) && (scr="100%") && (prt="100%") && (offset=1) && (document.body.onbeforeprint = function(){if (document.recalc) { document.printing=true;document.recalc(); }}) && (document.body.onafterprint = function(){if (document.recalc) { document.printing=false;document.recalc(); }}) && (!document.printing))?((this.parentNode.clientWidth > maxw)?maxw+"px":((this.parentNode.clientWidth <= minw + offset)?minw+"px":scr)):prt));

    See this page for more info in what caused the problem and how to configure this new beast of an expression. http://www.windgazer.nl/eexchange/Q_21186031.html

    Off to bed,

     Martin

    P.S. I changed the testlink at http://www.windgazer.nl/eexchange/yell2.htm to use this new expression.
    0
     

    Author Comment

    by:jezella
    Martin I did not feel that your remark was based on my ability.  Far from it. I have been a member of EE for about 2 years now and can say with hand on heart that only attention seekers have ever been rude or made unfair remarks. And, I hassen to add, none to me. I feel that experts exchange is without a doubt the most comprehensive and mature site of its kind.  Only once have I seen remarks that were inappropriate.  This was by a user of the service who demanded an answer and complained when one was not received within half a day.  Needless to say that the answers then received were not to the users benefit. I and all should realize that we are members of a community were help is sought and due to the good will of the experts, then received.  Nobody is compelled in anyway what-so-ever.  This is how I feel about EE.

    Anyway, back to the above.  I await the solution where it will be most appreciated and I thank you for your time.

    Jezella
    0
     

    Author Comment

    by:jezella
    Wow we gee wiz.  That's how I sum this up.  It is beyond belief how helpful an internet pal can be. And I'll not say that I can start to understand how this works cos I can't.

    Martin I'll do some testing and get back to you.  Only had a few problems in getting it going and had to cheat and import from your site to www.ashley-wedding-cars.co.uk/trial/trial/yell.htm .  Working well as is so now I need to study the imported CSS and html files.

    Cheers

    Jezella
    0
     
    LVL 17

    Accepted Solution

    by:
    I did a last fast check on EE before going to bed, I assume you'll read this in the morning :)
    All that I truly changed was the awc.css file and then only one line, the first block of css which was:
    #table1
    {
         border:1px solid black;
         min-width:750px;
         max-width:950px;
         width: expression((this.parentNode.clientWidth > 950)?950+"px":(this.parentNode.clientWidth <= 750 + 0)?750+"px":"100%")
    }

    Should become:
    #table1
    {
         border:1px solid black;
         min-width:750px;
         max-width:950px;
         width: expression(window.status=(((minw=750) && (maxw=950) && (scr="100%") && (prt="100%") && (offset=1) && (document.body.onbeforeprint = function(){if (document.recalc) { document.printing=true;document.recalc(); }}) && (document.body.onafterprint = function(){if (document.recalc) { document.printing=false;document.recalc(); }}) && (!document.printing))?((this.parentNode.clientWidth > maxw)?maxw+"px":((this.parentNode.clientWidth <= minw + offset)?minw+"px":scr)):prt));
    }

    Hope it helps,

     Martin
    0
     

    Author Comment

    by:jezella
    Ah that explains a lot Martin as I was not sure what had been changed.  I think you deserve a good sleep.

    I'm checking this brilliant code in various browsers but have to download them first.  Opera, strange one that.

    Talk to you soon.

    Jezella
    0
     
    LVL 17

    Expert Comment

    by:mreuring
    And a good morningto you Jezella,

    Most browsers these days should pick up the min-width and max-width values, but I'm a bit concerned with width expression being left out to dry. It's something that only works in IE, but complicated as that line of code now is, I wouldn't like other browsers trying to see if they should implement any of it, so, here's a bit of css magicry that will tell all the other browsers that all they oughta do is just set the width automagically:

    #table1
    {
         border:1px solid black;
         min-width:750px;
         max-width:950px;
         width: auto !important;
         width: expression(window.status=(((minw=750) && (maxw=950) && (scr="100%") && (prt="100%") && (offset=1) && (document.body.onbeforeprint = function(){if (document.recalc) { document.printing=true;document.recalc(); }}) && (document.body.onafterprint = function(){if (document.recalc) { document.printing=false;document.recalc(); }}) && (!document.printing))?((this.parentNode.clientWidth > maxw)?maxw+"px":((this.parentNode.clientWidth <= minw + offset)?minw+"px":scr)):prt));
    }

    And with that I think we should have all the evildoing caged and cornered,

      Martin
    0
     

    Author Comment

    by:jezella
    Martin good morning or afternoon to you. Am sorry I have not got back a bit sooner.  Been testing, testing, testing and thought I had made a few errors.

    I must say that this code really is great but it seems that in the update version v1.01 the width: auto; may cause a problem or this may have been intentional in the design.

    The inclusion of this code, from my point of view, is to restrict table width so were viewed on very large screens the page does not become over wide and over short.  I think you will understand the point here.

    The following link http://www.ashley-wedding-cars.co.uk/examples/styles1/index1.htm uses you code v1.00 as supplied last night and really does appear to work perfect.

    In the case of http://www.ashley-wedding-cars.co.uk/examples/styles2/index2.htm code v1.01 is used and here it appears that table width in not being restricted at to max-width:950px;  The min width is fine where scroll bars kick in at about 750px

    What is the width: auto supposed to do.

    Jezella

    0
     
    LVL 17

    Expert Comment

    by:mreuring
    Afternoon, I'm on CEST :)

    My most humble apologies, the v1.00 code seems to be the better option here, an honest mistake on my part...

    Well, I was, wrongfully, under the impression that when set to width: auto the browser would look to other means of determining the table width, but only for non-IE browsers as IE would then get the expression to determin it's width and all. However, I seem to have been wrong on two counts, browsers seem to not limit width: auto by the max-width and IE also seems to pick up this behaviour.

    So, instead of trying to be polite to the non-IE browsers I think our best chances remain with the v1.0 solution.

    Just shout if you want more info,

      Martin
    0
     

    Author Comment

    by:jezella
    Martin I think that you have done a very fine job here are you are without doubt and EXPERT in this field. I realize that the experts at EE do not help others for the points, but more for the love of what they do.  However, the original 250 points seems unfair for the effort involved so I shall increase this to 500.

    As this is related to another more original question, see link

    http://www.experts-exchange.com/Applications/MS_Office/FrontPage/Q_21175849.html

    I feel that this question warrents a place where the original question is asked and the above full answer can be seen in one place.  I'm not sure how this would be achieved though.  Further, for future readers comments incorporated into the above v1.00 code would no doubt be much appreciated.

    Once again, thanks Martin, could not have done this without you. Oh, I received my book on CSS this morning, very interesting indeed.

    BFN

    Jezella
    0
     

    Author Comment

    by:jezella
    Points adjusted I think

    Jezella
    0
     

    Author Comment

    by:jezella
    The question:-

    Is possible to restrict a table width to x% subject to a maximum pixel width.

    The question here may not be clear so consider that 1 pc monitor is of 15' and another is of 23'.  In the case of the 15' monitor having a table width of 95% would result in a page without scroll bars as the table would be lengthened instead.  However, in the case of the 23' monitor, the contents of the table could become unacceptable.  Now, should the table width be set in pixels and the page viewed on a small monitor or one where the history pane remains visable, where pixels have been specified to determine width, this again results in scroll bars.  Hence, is possible to restrict a table width to x% subject to a maximum pixel width.

    The Solution

    #table1
    {
         border:1px solid black;
         min-width:750px;
         max-width:950px;
           width: expression((((minw=750) && (maxw=950) && (scr="100%") && (prt="100%") && (offset=1) && (document.body.onbeforeprint = function(){if (document.recalc) { document.printing=true;document.recalc(); }}) && (document.body.onafterprint = function(){if (document.recalc) { document.printing=false;document.recalc(); }}) && (!document.printing))?((this.parentNode.clientWidth > maxw)?maxw+"px":((this.parentNode.clientWidth <= minw + offset)?minw+"px":scr)):prt));
    }


    Helpful Link

    http://www.windgazer.nl/eexchange/Q_21186031.html
    0
     

    Author Comment

    by:jezella
    The above code also provides a min. table width.
    0
     
    LVL 17

    Expert Comment

    by:mreuring
    Thank you, although the points are not usually my goal, it is a verry effective way of getting some notion of how well respected we are. And thus, thank you for the appreciation, and thank you for posting such a nice puzzlebox :)

    Martin
    0
     

    Author Comment

    by:jezella
    Martin is it possible to centre (on screen) the above table.

    Jezella
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Suggested Solutions

    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

    846 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    5 Experts available now in Live!

    Get 1:1 Help Now