Controlling Header width

[Topshed71]

I am new to this site so Hi !

I am using phpMyedit and CSS to produce tables on my website

Every thing is fine apart from Header widths which destroy the look of my tables

My CSS or part of it..

table {
 border: 1px solid;
border-collapse: collapse;
font-size: 0.83em;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
td {
padding: 0.2em;
background-color: white;
}
th {
background: blue;
color: #FFFFFF;
padding: 0em;
text-align: center;
}

th a:link {
background: #A0522D;
color: yellow;
}
th a:visited {
background: #A0522D;
color: white;
}

The a links are because my headers are clickable
and there are boxes under the Header to type in a search.
The effect is this
Sending 1em numbers "123"to a flexable td cell
produces |123| A cell 3ems wide
But sending the same to a th cell in the same column produces
| 123 | A cell 7ems wide although the data from the table is only 3 wide which of coure makes the td cells do the same

[edited by: alt131 at 7:16 pm (utc) on Jul 9, 2011]
[edit reason] Thread Tidy [/edit]

[SuzyUK]

Hi Topshed71 and Welcome to WebmasterWorld!

at a guess I'd say it's because the TH font-weight is bold (by default) - but then again you have padding on the td's but not the th's so I'm not sure which it is both would likely affect the width of such tightly controlled cells

aside there's a lot, and I mean a lot of code, both HTML and CSS, that could be cleared up here; you don't need the same class names on the cell contents that you have on the cells themselves & you don't need different justify class on each rows cells when you already have a parent class on the rows too - a parent class on the rows is good and can be used to get specific for other things too :)

for example your alternate row coloring, in your (on page) CSS you have:

tr.pme-row-0{
background-color: #ffffff;
color: #000000;
}
tr.pme-row-1{
background-color: #f0f0f0;
color: #000000;
}

which doesn't work cross browser BUT if you change that CSS to:

tr.pme-row-0 td {
background-color: #ffffff;
color: #000000;
}
tr.pme-row-1 td {
background-color: #f0f0f0;
color: #000000;
}

it will work and using that same theory, of using row classes, you can also then shorten & re-use the text-align classes..

instead of

.pme-cell-0-align-center, .pme-cell-1-align-center, .pme-header-align-center {
text-align: center;
vertical-align: middle;
}
.pme-cell-0-left-justify, .pme-cell-1-left-justify, .pme-header-left-justify {
text-align: left;
vertical-align: middle;
}
.pme-header-right-justify, .pme-cell-0-right-justify, .pme-cell-1-right-justify {
text-align: right;
vertical-align: middle;

}

vertical-align: middle is the default for table cells so it's not necessary, if it was it could be put on the main td, or you could use the row classes like above to get specific to rows, so your css could be:

.tac {text-align: center;}
.tal {text-align: left;}
.tar {text-align: right;}

then remove the classes off the <a>'s and <inputs> in the first 2 rows.. if need be, those <a>'s and <inputs> can be targetted via the row and cell classes, though I can't see you're using them for now anyway? and then change your output code to use the new shorter classes, it now won't matter what row they're in

BUT, the solution below for widths should also work to set the text alignment in an easier way, and in one place too, so even these cell classes may not be necessary at all..

so, back to the question.. you can control column width using the <col> and <colgroup> elements, what width do you actually want the columns to be - maybe the same width as the inputs in the second row, they seem to be what's controlling them just now?

[Topshed71]

Hi SuzyUK
Thank you for your reply

First the links are duplicated because of where their used like white on maroon in <th> which does not work on the selectors left of screen which would be white on white

I love the tac, tar, tal. With so much less 2 finger typing.
I have started implementing that but I have a lot of files to change unless I do a site wide thing which scares me somewhat

Now my original problem stems from the large amount of data/columns to fit onto my pages there are 27 for wd and 29 for lner and at least one tiny text 255 in each table
If you look at the screen you will see that my dates are 2 separate parts Month char3 and year int unsigned 4 because I have certain problems that are helped by doing it this way
However
mm_build 'css' => array('postfix' => 'tar'),
yy_build 'css' => array('postfix' => 'tal'),

give me 8 chars wide for each half of the date which gives me
a massive blank space either side of the screen result

Also 1 or 2 char/integers result in big wide columns
I can fix it by preventing the search on a column but that defeats the object of the exercise
Which proves your point it IS the input boxes that are expanding and causing all the problem

Sorry to go on and on

Anyway thank you for your time
Regards Topshed71

[SuzyUK]

OK.. just so I understand,

Yes the inputs are dictating the width just now as they are a fixed width, but you'd like the inputs themselves to be various widths for those columns where the search phrase (e.g 3 letters for a month search) would be smaller - is that right?

This should be possible using the <colgroup> & <col> method I mentioned above, and if I have that right I'll try to put together an example for you..

as for your links still don't need to duplicate the classes onto the links because you can already target the header ones using th a {} and the column ones using td a {} to cope with the differing colors.. your header row also has a class which couljd have been used even if they had've been td's too: tr.headerclass td a {} which would differentiate them from the ones in the table

becasue you have already got odd/even row classes you will always be able to target any coloring requirements within the table itself too

just let me know if I got it right about the differing input sizes and I'll see if I can get a working sample together for you

there are only 5 properties you can control with <colgroup> & <col>; border, background, width, visibility and text-align, and it is an addition to the HTML though only in one place, but for your large table purpose it might be worth it seeing as width and text-align are 2 of the main factors in your table..

[SuzyUK]

Topshed71, I do like a puzzle ;)

..are there any particular browser support requirements or ones that can be ignored, or is it to be as cross-browser as possible?

.. unfortunately the HTML solution I'd originally thought might work best for your case, is not supported by FF or Safari, and a CSS only solution is not going very well in IE7 (so far!).. hence me asking about support levels it's solvable using one or the other

OT: I could kill FF right now! when you need a nice plain table solution they are not supporting the align property on the <colgroup> element, FF want us to use nth-child CSS selectors ** sighs **

the solution I'm trying to concentrate on, is to combine, to one place, where you can set text-alignment and width for each column, regardless of it's a header or plain table cell - without classing everything in sight. It was originally to be a mixed solution as I presume from the output of your HTML that you can programme in the physical input sizes if necessary (like the maxlength value), but FF cannot cope with alignment via the <colgroup> element (negating the reuse of those simpler text-align classes), on another try using sibling selectors, IE7 is now having a problem after column 4 .. oh grrr.. it could likely be solved by combining both methods, but who wants duplicate HTML and CSS! in this case I think I prefer IE's table handling, always have actually, for anyone producing big tables they (the table programmers) can obviously handle attributes better than CSS3 level selectors can cope! :o (shhhh!)

Ignore my rants ;), Q was, are any particular browser requirements for this?

[Topshed71]

Hi SuzyUK,
Well you have sent me into a spin with that lot, I do believe I had a Senior moment

This may sound contrary to your notes above, but my main concern is IE and FF
I do all my development in FF because I love the add-on's like the developers toolbar and stuff
Here is a snippet of the script which generates first 3 visible columns of the output

$opts['fdd']['lclas'] = array(
'css' => array('postfix' => 'tar'),
'default' => '',
'help|ACP' => 'Limit 8 characters',
'input' => '',
'maxlen' => 8,
'name' => 'Class',
// 'options' => 'ACPVDFL', //Admin options
'options' => 'VFL', //User options
'select' => 'T',
'size' => 8,
'sqlw' => 'TRIM("$val_as")',
'sort' => true
);

$opts['fdd']['class2'] = array(
'css' => array('postfix' => 'tal'),
'default' => '',
'help|ACP' => 'Limit 20 characters',
'input' => '',
'maxlen' => 20,
'name' => 'Name',
'options' => 'ACPVDFL',
'select' => 'T',
'size' => 20,
'sqlw' => 'TRIM("$val_as")',
'sort' => true
);

$opts['fdd']['br_no'] = array(
'css' => array('postfix' => 'tac'),
'default' => '',
'help|ACP' => 'Limit 4 digits',
'input' => '',
'maxlen' => 4,
'name' => 'Br #',
'options' => 'ACPVDFL',
'select' => 'T',
'size' => 4,
'sqlw' => 'TRIM("$val_as")',
'sort' => true
);

Just so you can see the code I am dealing with
Thanks again for all you time and effort

Regards Topshed71 (Roy)

[SuzyUK]

You're welcome Roy, like I said I like a puzzle, and it's playday Sunday! ;)

though I don't really understand that code out of context, I think I understand enough of it to say that from the looks of your code you probably have this solved, you are already setting the tac, tal, tar (alignment) classes and you are setting the "size" of the (search) input per column - in your original example page you had all inputs set at size="8" and it was those input sizes which I thought you could likely change more quickly than incorporate any CSS I might give you

So is it now working for you across browser then? I too use FF and IE first hand to test.. actually IE7 to test initially, because if I can get it to work in that I can get it work in anything though the debug tools in FF/Opera etc are too darned useful! ;)

...

I do now have a full CSS solution, (not boasting because in this case I really though an HTML solution would be the better option) - the selectors are really long, 20 columns of sibling selectors will do that to a stylesheet.. but the advantage would be that there is no extra classes required in the HTML (your programming code) - not even the text align ones! - just your existing row <tr> classes.. this means the code "pattern" would be reusable across other tables, so this comes down to what you're more comfortable with, your table programming or some lines of CSS, and of course if what you now have is working :o

btw way my CSS solution means you can remove <br>'s from the table headings and it still wraps where it should, and if you should decide to make a column wider or change it's text alignment you do so in one CSS rule...


..OK I'm teasing now :)

are you sorted for your needs or would you like an example based on the OP example page

Suzy

[Topshed71]

Hi SuzyUK
Unfortunately that's the code that produces the gaps
So your solution sounds perfect to fix this in a way that requires less fiddling.
As you would have seen My css ends up with enough cascades to send me into a spin.
ANYTHING you can let me have to help would be most welcome.
Thanks again

Topshed71 (Roy)

[SuzyUK]

It will take some time (and space).. & I might get into trouble! for posting so much code

but firstly what this test depends on.. you would need to eventually remove all the classes from your TD's and also any links & inputs inside them (except the exceptional inputs like search, hide and clear in those first two rows, you might need them) and then also remove the size="?" attribute from your code that targets the second row inputs, then you can remove all <br's> from, between the text in your heading cells

this code below is not complete, it goes to about column8 and takes in the first 4 rows, the heading row, the inputs row and a 'normal' row of each color, to carry it on you would need to pick the optimal width for each column and set the text alignment as required.. you'll see the pattern.. in the bit that keeps longer at the bottom of the CSS

Oh and enter yourself an Doctype at the top of your page, I used an HTML 4 one and the actual HTML is valid as it removes the XHTML style closing tags "space/>", but even without fixing code to suit, a Doctype should at least keep IE7 out of Quirks mode!

I Used:

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

I replaced links and js functions with # for brevity only Roy.. but these are bits you would need to keep, not remove! anything else that's not there compared to your original code you should not need :)

HTML, abbreviated as much as possible, but sorry for the length people!

<body>
<table class="pme-main" summary="gwr">

<tr class="pme-header">
<th><input type="submit" class="pme-hide" name="PME_sys_sw" value="Hide"><input type="submit" class="pme-clear" name="PME_sys_sw" value="Clear"></th>
<th><a href="#">Class</a></th>
<th><a href="#">class2</a></th>
<th><a href="#">Br #</a></th>
<th><a href="#">GWR Num</a></th>
<th><a href="#">Prev GWR #</a></th>
<th><a href="#">Loco Name</a></th>
<th><a href="#">Wheel</a></th>
<th><a href="#">Builder</a></th>
<th><a href="#">Build No</a></th>
<th><a href="#">Build</a></th>
<th><a href="#">Date</a></th>
<th><a href="#">Wdrn</a></th>
<th><a href="#">Date</a></th>
<th><a href="#">Shed Code</a></th>
<th><a href="#">Ultimate Allocation</a></th>
<th><a href="#">Disposal Detail</a></th>
<th><a href="#">Date</a></th>
<th><a href="#">Cut</a></th>
<th><a href="#">Notes</a></th>
</tr>

<tr class="pme-filter">
<td><input type="submit" class="pme-query" name="PME_sys_filter" value="Search"></td>
<td><input value="" type="text" name="PME_sys_qf1" maxlength="8" onkeypress="#"></td>
<td><input value="" type="text" name="PME_sys_qf2" maxlength="20" onkeypress="#"></td>
<td><input value="" type="text" name="PME_sys_qf3" maxlength="4" onkeypress="#"></td>
<td><input value="" type="text" name="PME_sys_qf4" maxlength="4" onkeypress="#"></td>
<td><input value="" type="text" name="PME_sys_qf5" maxlength="4" onkeypress="#"></td>
<td><input value="" type="text" name="PME_sys_qf6" maxlength="42" onkeypress="#"></td>
<td><input value="" type="text" name="PME_sys_qf7" maxlength="7" onkeypress="#"></td>
<td><input value="" type="text" name="PME_sys_qf8" maxlength="21" onkeypress="#"></td>
<td><input value="" type="text" name="PME_sys_qf9" maxlength="8" onkeypress="#"></td>
<td><input value="" type="text" name="PME_sys_qf10" maxlength="3" onkeypress="#"></td>
<td><input value="" type="text" name="PME_sys_qf11" maxlength="4" onkeypress="#"></td>
<td><input value="" type="text" name="PME_sys_qf12" maxlength="3" onkeypress="#"></td>
<td><input value="" type="text" name="PME_sys_qf13" maxlength="4" onkeypress="#"></td>
<td><input value="" type="text" name="PME_sys_qf14" maxlength="5" onkeypress="#"></td>
<td><input value="" type="text" name="PME_sys_qf15" maxlength="27" onkeypress="#"></td>
<td><input value="" type="text" name="PME_sys_qf16" maxlength="50" onkeypress="#"></td>
<td><input value="" type="text" name="PME_sys_qf17" maxlength="7" onkeypress="#"></td>
<td><input value="" type="text" name="PME_sys_qf18" maxlength="4" onkeypress="#"></td>
<td><input value="" type="text" name="PME_sys_qf19" maxlength="68" onkeypress="#"></td>
</tr>

<tr class="pme-sortinfo">
<td><a href="#">Clear</a></td>
<td colspan="19">Sorted By: ID ascending</td>
</tr>

<tr class="pme-row-0">
<td><a href="#"><img class="pme-navigation-0" src="./resources/images/pme-view.png" height="15" width="16" alt="View"></a></td>
<td>Unclass</td>
<td>&nbsp;</td>
<td>0</td>
<td>2</td>
<td>66</td>
<td>&nbsp;</td>
<td>0-4-4T</td>
<td>Vulcan Foundry Ltd</td>
<td>1348</td>
<td>Aug</td>
<td>1892</td>
<td>Jul</td>
<td>1924</td>
<td>BRY</td>
<td>Barry</td>
<td>Swindon Works</td>
<td>circa</td>
<td>1924</td>
<td>&nbsp;</td>
</tr>

<tr class="pme-row-1">
<td><a href="#"><img class="pme-navigation-1" src="./resources/images/pme-view.png" height="15" width="16" alt="View"></a></td>
<td>Unclass</td>
<td>&nbsp;</td>
<td>0</td>
<td>3</td>
<td>67</td>
<td>&nbsp;</td>
<td>0-4-4T</td>
<td>Vulcan Foundry Ltd</td>
<td>1349</td>
<td>Aug</td>
<td>1892</td>
<td>Apr</td>
<td>1929</td>
<td>BRY</td>
<td>Barry</td>
<td>&nbsp;</td>
<td>circa</td>
<td>1929</td>
<td>&nbsp;</td>
</tr>

</table>
</body>

CSS to go with above, is all prefixed with the "over qualified" table class as it presumed there to than one table

<style type="text/css" media="screen">
table.pme-main {
border-collapse: collapse;
font-size: 12px;
font-family: arial, sans-serif;
}

table.pme-main th {
font-weight: normal; /* remove this if you want bold text in the header row, it will increase "gaps" */
background: #A0522D;
color: #FFFFFF;
padding: 0 1px; /* for the tiniest gap between each column */
}
table.pme-main th a:link {
background: #A0522D;
color: Yellow;
}
table.pme-main th a:visited {
background: #A0522D;
color: #999999;
}

table.pme-main td { padding: 0 1px;}
table.pme-main tr.pme-filter td { padding: 0 0 0 1px;} /* remove padding from the "inputs" row */

table.pme-main img {
border: 0;
display: block;
margin: 0 auto;
}

table.pme-main .pme-row-0 td {
background-color: #ffffff;
color: #000000;
}
table.pme-main .pme-row-1 td {
background-color: #f0f0f0;
color: #000000;
}

table.pme-main .pme-filter td {
background-color: silver;
color: #000000;
}

table.pme-main .pme-sortinfo,
table.pme-main .pme-queryinfo {
background-color: #FFFF00;
color: #000000;
}

table.pme-main input {width: 100%; display: block;} /* all inputs will inherit width from parent cell, this width must be explicitly set see long rules below! */

/* column width & alignment */

/* col1 */
table.pme-main th,
table.pme-main td {text-align: center; width: 68px;}
/* col2 */
table.pme-main th+th,
table.pme-main td+td {text-align: right; width: 50px;}
/* col3 */
table.pme-main th+th+th,
table.pme-main td+td+td {text-align: left; width: 50px;}
/* col4 */
table.pme-main th+th+th+th,
table.pme-main td+td+td+td {text-align: center; width: 25px;}
/* col5 */
table.pme-main th+th+th+th+th,
table.pme-main td+td+td+td+td {text-align: center; width: 30px;}
/* col6 */
table.pme-main th+th+th+th+th+th,
table.pme-main td+td+td+td+td+td {text-align: center; width: 30px;}
/* col7 */
table.pme-main th+th+th+th+th+th+th,
table.pme-main td+td+td+td+td+td+td {text-align: left; width: 100px;}
/* col8 */
table.pme-main th+th+th+th+th+th+th+th,
table.pme-main td+td+td+td+td+td+td+td {text-align: center; width: 50px;}

/* exceptions to above widths and alignment */

table.pme-main tr.pme-sortinfo td+td {width: auto; text-align: left;} /* target the cell that spans 19 columns in row 3 */

</style>

I must go to bed now, but if you have any questions about this or how to use, or run into issues (possible as has not been completed properly) - I'll catch up with you tommorrow..

have Fun
Suzy!

[Topshed71]

Hi SuzyUK

Well you have been busy I do hope you slept well after that !

I am going to have to set up a test DIR to play and fiddle with this so I can get my head around it all
At my age the learning curve looks a bit like Everest at the moment.

I have until the end of this week to get my Site up on it's new linux host, So that comes first.
Then I can play and see if I can master the use of your Super Bells & Whistles.

BTW tac, tal, tar refused to work until I modified them to

.pme-cell-0-tal, .pme-cell-1-tal, .pme-cell-header-tal{
text-align: left;
}
etc: but the header still refuses to budge
I recon it's to do with the internals of the Playton Engine/Class

So please expect more questions in around 7 days time

Many thanks as usual

Regards
Topshed71 (Roy)

[SuzyUK]

BTW tac, tal, tar refused to work until I modified them to

.pme-cell-0-tal, .pme-cell-1-tal, .pme-cell-header-tal{
text-align: left;
}

I think this must be because of that PME thing you're using to produce table? does adding "tar" or "tal" to that array you have above then automatically append itself to the class name to produce ".pme-cell-0-tal" etc names in the HTML?

anyway no matter on the above you can use them class names just as well, and when you get to dissecting the above code you'll see that method turned out to not be the best solution anyway as I combined both the width and alignment in the same selector, with no class names required.. BUT if you're happy with that first bit and now want to set the size of the inputs by 'hardcoding' them using the "'size' => 4(8)" option in your code, you could.. I tried that, but didn't have as much success with that as as a way of sizing the inputs, as I did with the pixel way in the CSS, the CSS affords more control over the actual input size.. and ultimately the column width)

Good Luck anyway when the time arrives and other priorities allow!


and PS: I did finish the whole 20 columns, so when you get to it, if you want a complete copy just let me know
Suzy
:)

[Topshed71]

Hello SuzyUK

I am back again but I am still fighting this SS battle with pme-sys

My problem is the first column is too wide but is the Very first one that does not hold data. Containing the Hide Search & Clear buttons
I can do an instant Fix by using css with

.pme-query,
.pme-header,
.pme-filter;{
width: 60px;
}

Any one of these does the job but effects all the other columns of course.

The manual has this to say..

CSS customization
Per field, you can define field CSS class names postfix. This is especially useful in order to highlight one
column in a table.
Example 4-8. Field CSS customization
$opts[’fdd’][’col_name’][’css’] = array(
’postfix’ => ’ColName’
);

I am assuming this requires a line in the column
’postfix’ => ’ColName’
OR
’postfix’ => ’ID’

The problem is how to define one for the first column which is internally generated and not a data field so not defined in the php code generated ?

Hope this is not too..... jumbled, please help if you can

Regards
Topshed71 (Roy)

[edited by: coopster at 2:48 pm (utc) on Feb 28, 2011]

[SuzyUK]

Hi Roy

sorry really can't advise any more on the actual coding within the pme-sys as I don't know it..
and as for adding a class vis PHP I don't think you need to in this case..

..my code above, should work to detect the first column with or without class names , and as long as the table itself has a class it should be good to go.. I only advised you get rid of the excess <td> classes to tidy up the code but it does matter if your existing long ones are still there, CSS classes in the HTML don't have to be used just because they're there

take my code above

/* col1 */
table.pme-main th,
table.pme-main td {text-align: center; width: 68px;}
/* col2 */
table.pme-main th+th,
table.pme-main td+td {text-align: right; width: 50px;}

that is two rules affecting column one and column two respectively.. although without any further rules the second one will affect cols, 3, 4, 5, 6 etc.. that's why you need to keep adding them as I have done above to the cover all columns

CSS selectors are read from right to left.. so when making a selector specific it's easier, indeed common practice to interject a class or an ID not to far above (i.e. an ascendant in the HTML Tree) the element you're trying to select.. but you can usually also select elements based on some other unique characteristic they have especially using some of the lesser know selectors

In my code I've made use of the Adjacent Sibling Selector [w3.org]..

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2,

the

table.pme-main

bit means that I'm only selecting elements within a table with that class name, so that's where I stop the code parsers from having to look at matching any more elements.. that way confirming that anything prefixed with that bit of CSS is narrowed to the rendering of this particular table only

from there.. the first rule is quite easy:

table.pme-main th,
table.pme-main td

it targets every th & every td in this particular table.. i.e. it is actually targeting every single cell inside the table :o .. therefore every single column,

but then..

table.pme-main th+th,
table.pme-main td+td

read from right to left.. this targets a td/th.. immediately preceded by a SIBLING td/th who both have a common parent - that parent is actually the <tr> though we don't need it when targeting whole columns - this rule cannot apply to the first td/or th/ in a row as they don't have a preceding sibling.. it can apply to the 3rd, 4th 5th etc columns however.. so that's why we need to add a further one td+td+td to specifically get the 3rd column and beyond.. and so on.. now say columns 8 & 9 had exactly the same width and size.. you don't need to overrule column 8 (using 9th's and 9td'd) just go onto column 10.. the CSS for column 8 will apply to columns 8 & 9

if you did want to narrow which row is also affected you can add the parent <tr> and it's class name into another selector, making it more specific still.. & each of your rows already have class names.. but be aware that with widths you only need to affect one row for it affect the whole table.. but text align for example you could literally change per cell if you wanted to ;)

so for example

table.pme-main tr.yourclass td+td {}

what this means is that your whole table is selectable by row or column without adding any more class names

that first rule under /*col 1*/ is how you would affect the width/text of your first column with those inputs in them

however it is reliant on you adding the following to your code:

table.pme-main input {width: 100%; display: block;} 

this tells the inputs to be 100% of the width of the cells as you set it in the aforementioned column rows..

and I'm not sure about this but you may have to remove "size=8" attribute from all the inputs in the HTML, which will have to be done via your pme-sys.. though I think from memory of an earlier that bit's obvious ..

those pesky input elements can be a bit stubborn to tame, and if you cannot get them to the size you want they will stretch the table cells and override your td/th widths set in the CSS anyway. BUT Each of the three submit elements you mention has their own class name so there's various things we can try to force them into submission outside the 100% of table cell width rules if you cannot get to resize.. and actually I think it's the Search button that causes a problem, I seem to remember I could not get that to be much less than 68px, at least not without a bit more manipulation of the button text size borders.

does that help clarify?

[SuzyUK]

oops missed the obvious!

.pme-query,
.pme-header,
.pme-filter;{
width: 60px;
}

is not specific enough, and targets the rows.. not the inputs, lol forget about the table cells/rows. the inputs are the crux as mentioned above if they don't play they will stretch the columns anyway, regardless of the column CSS explained in the above post :)

use the input classes themselves

Snippets from your code from previously..

<input type="submit" class="pme-hide" name="PME_sys_sw" value="Hide">
<input type="submit" class="pme-clear" name="PME_sys_sw" value="Clear">

<input type="submit" class="pme-query" name="PME_sys_filter" value="Search">

therefore to target them..

table.pme-main input {width: 100%; display: block;}
table.pme-main .pme-hide {}
table.pme-main .pme-clear {}
table.pme-main .pme-query {}

you will need to specifically add the

table.pme-main

part of the selector to get it to overrule the first default rule

[Topshed71]

Hi SuzyUk

Yum thank you I am ready to give it all a go, but I need all the code so I can see it in context, so If you would send me a Zip of all your code I will work through it and hopefully learn a lot.
I have made my email available

Regards
Roy...

[SuzyUK]

Good to hear.. and the very best of!

I can't you send you an email, bit I've sent you a PM.. check your mailbox at the top

everything that is in this discussion is in the link, in the source code and commented.. if anyone else wants the link pls feel free to contact me.. the code is too long to post and it may not be online forever so I shan't post the link

have fun
Suzy