Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS Print Problem

Posted on 2004-10-28
44
Medium Priority
?
1,382 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
Comment
Question by:jezella
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 21
  • 11
  • 9
  • +1
44 Comments
 
LVL 4

Expert Comment

by:Magic55
ID: 12432435
0
 
LVL 3

Expert Comment

by:KvdnBerg
ID: 12432564
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
ID: 12432833
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:jezella
ID: 12432996
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
ID: 12433035
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
ID: 12433314
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
ID: 12433393
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
ID: 12433730
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
ID: 12433804
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
ID: 12433886
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
ID: 12434240
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
ID: 12434249
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
ID: 12434361
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
ID: 12434409
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
ID: 12434481
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
ID: 12434613
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
ID: 12434658
I think that's where mreuring's comment comes in.
0
 

Author Comment

by:jezella
ID: 12434749
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
ID: 12434849
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
ID: 12434855
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
ID: 12434868
Forgot the body tag to go with the above javascript

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

Expert Comment

by:mreuring
ID: 12434985
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
ID: 12435041
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
ID: 12435254
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
ID: 12435728
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
ID: 12435801
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
ID: 12435954
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
ID: 12436559
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
ID: 12436669
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
ID: 12437440
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
ID: 12437881
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
ID: 12437961
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
ID: 12439160
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:
mreuring earned 2000 total points
ID: 12439272
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
ID: 12439397
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
ID: 12441788
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
ID: 12443189
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
ID: 12444527
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
ID: 12445384
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
ID: 12445392
Points adjusted I think

Jezella
0
 

Author Comment

by:jezella
ID: 12445468
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
ID: 12445509
The above code also provides a min. table width.
0
 
LVL 17

Expert Comment

by:mreuring
ID: 12445572
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
ID: 12472202
Martin is it possible to centre (on screen) the above table.

Jezella
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

610 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