How can I make it impossible for my client to change the width of a table?

[iharding]

I have built a web site for a client for her restaurant. She has no desire to know anything about how her web site works, all she want to be able to do is to change her menus on a very regular basis.

This is my first time using SnippetMaster, and without being able to promise my client that she would be able to easily do what she wanted without messing up the structure of the site I wouldn't have got the job - so YAY for SnippetMaster!

OK - I should have checked this out more thoroughly before I took her deposit, but I didn't, and so I'm here hoping that someone has an idea of how to fix this.

So here's what the problem is:

I tried making the menus using only css, but it wasn't working well enough, so I thought I'd try using tables for what they're actually intended for. It looks (in my opinion) great on the page, but when I go into SnippetMaster to change the contents, firstly the font is wrong, but way more importantly when you click on a table to change the information within it, you get little white squares at each corner and on the sides which allow you to randomly change the size of the table. This is far too risky for this particular client, especially when she specifically asked for something that she couldn't possibly mess up.

I do have other options of how to set the menus up not using tables, but I've invested a little time into this project and I'd rather just try to fix this simply - assuming that there is a simple fix.

Any help would be greatly appreciated.

Ian

[admin]

Using CSS is the best way to do it, as Snippetmaster will "find" your css styles and use them, etc..

But, if you want to use tables, then my recomendation is to put the menu *inside* another table that has the width hardcoded into the table tag.  Then put the "editable" portion inside that table's TD tag.  Something like this:

<table width="550">
<tr>
    <td>
       <!-- Start snippet tag goes here -->
           <table>
              <tr>
                  <td>Blah blah blah</td>
               </tr>
            </table>
         <!-- Ending snippet tag goes here -->
       </td>
    </tr>
</table>

This way, they can't edit the "wrapper" table, which controls the sizing...

[iharding]

Thank you - simple and elegant.

I would prefer to use only CSS but I was having trouble making it work just right so I decided that tables would do for now for the cafe menus. This is a work in progress and I intend to get rid of the tables as soon as I can - but for now - thank you very much!

Ian

[iharding]

I just tried your suggestion but unfortunately it didn't work. It is still possible and all too easy to change the width of the table.

Do you have any other ideas or should I go back to my original idea of doing it with CSS?

Thanks in advance for any help.

Ian

[admin]

Hi Ian,

If the Snippet Tag is "under" the table that contains the width specification, then it is impossible to change it with Snippetmaster. (Since they can't edit the "wrapping" table at all...)

It should work exactly as you desire it to work.

Can you point me to the page where you have created the Snippet Tag and I can take a look?

[iharding]

Hi

Thanks for helping.

I've tried many different versions of what you suggested but unfortunately I can't figure out how to make it work.

So I made a simple test page, I thought there might have been a problem with my css or something so I did the test page as simple as it could possibly be. You can see it at www.suzzcafe.com/test.html - when I go into SnippetMaster it is possible to change the width of the table even with such a simple page.

To see the page(s) I'm trying to make safe please look at www.suzzcafe.com/lunch.html

Any help would be wonderful, I showed the site to my client today and she likes it and she assures me that she will be careful not to mess anything up - but I know I'll be getting an anxious phone call from her in a day or so when it's all gone pear-shaped.

Thank you

Ian

[Jenkinhill]

I have not tested this, but it "ought" to work. Here I'm assuming that your table width is specified in a CSS file.

Find the file tiny_mce.js in snippetmaster/includes/tinymce_mce and open in a good text editor such as NoteTab (not a word processor)

Locate the lines:

Code:

table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],-
tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],thead[id|class],tfoot[id|class],-
td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],-
th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],-

Remove the width and height parameters - width|height| - for each line and save.

Then try again.

[iharding]

Thanks - I just tried what you suggested and made the alterations to the tiny_mce.js file but unfortunately it didn't work so I put the original tiny_mce.js back.

I appreciate the effort to try to  help me though - thank you.

Ian

[Jenkinhill]

OK, although this will not work with older browsers, a working solution is to use the ! important CSS rule for the table width. So in your linked style sheet put something like:

#fixedtable {
   width:200px; ! important
   }   

In this case use  id="fixedtable" in the table tag. This will override any attempt to widen the table, although the drag markers are sill shown in the editor. You could also use a similar approach to fix the height.

[iharding]

Thank you so much!!! It works!

Clearly I still have a lot to learn.

Thank you for taking the time to help.

Ian