Messing up style and/or layout

[tjwalker]

Greetings,
Forgive me creating a new thread for something that may have already been covered - but didn't know where to start searching.

Has anyone had problems with snippetmaster pro messing up the layout of sites because it inserts extra code into edited pages?

I'm using it on a template based site using a css file - but after editing sections of a page - other parts of the page get all wacky - tables/cells and such.  This happens when I try to edit using the Whole File option or the snippet options that is limited to the main content area of the page.

For example:  Take a look at this normal page - please note how the main banner with clouds expands and contracts with the browser window and also notice the footer area in the teal color:
http://columbiainstitute.org/new/about-us.html

Now look at this one that allowed editing in the main orange/tan/white areas - look at the footer at the bottom:
http://columbiainstitute.org/new/online-courses.html

Another malfunction that occurs can be seen on the main page - widen your browser window and see how the main banner (the clouds) no longer expands correctly - and that area of the HTML isn't included in the snippet area?

Any ideas?

[admin]

Snippetmaster will "edit" whatever code you put into the WYSIWYG editor, and it will convert any non-xhtml code into compliant html code.

If you are editing only a specific portion of HTML code (Snippet Tag), then it should work fine.. as long as your Snippet Tags are valid and the code between them is valid.

(ie: You can't put a snippet opening tag "outside" a table, and a snippet closing tag "inside" a table.)

If you edit the "WHOLE FILE", then be sure your entire file is valid, etc...  It is always better to just use the snippet tags and edit only what is needed.

In the example file you gave for "about-us.html", if you edit the SNIPPET, then it should not be messing up any of your html that is outside the snippet tags.

Inside that html code you have some invalid code:

background-image: url('images/1-m1-dr.gif');

You need to replace the HTML codes for the " with a single quote. ie: Change it to:

background-image: url('images/1-m1-dr.gif');

Also, what you might want to do is start with nothing in the Snippet Tag area..  then edit the page and just save it.  You want to make sure it works before and after saving, even with NOTHING in the Snippet Tag editable region area.

Then add one table and then the next, and test each time to see if anything breaks.

I hope that helps...

[tjwalker]

Thanks, I will look at those things.  I know The snippet tags are placed OK - I did that myself.  However, I can't speak the same for the HTML - that was a client purchased template from templatemonster.  I'll do a universal find/replace and try and clean up the code.

[tjwalker]

OK - finally got around to looking at this.
Question - when snippetmaster rewrites a page to redo the snippet area - does it rewrite all the code even outside the snippet area - it must because I'm finding some of the problems.

I'm looking at the original copies of the source code - and they have lines like this - a little different than you mentioned:
background-image: url(images/t-l-t.gif) - this, BTW is outside the snippet areas.

But snippetmaster is rewriting that line to be:
background-image: url('images/t-r-r.gif');

And, also from the original source there are many instances of this type of code:
<td style="width:1px;"><img alt="" src="images/spacer.gif" width="1" height="1"><br></td>
            <td style="width:69%;">

and snippetmaster rewrites it to this (notice it removes the trailing ";" in the style variables:
<td style="width: 1px"><img src="images/spacer.gif" height="1" width="1"><br>
         </td>
         <td style="width: 69%">

For some reason, this totally messes up the layout of the page.
Live page for this example is http://columbiainstitute.org/new/online-courses.html

Attached are two text files - one with the snippet area that works (before it was ever edited via snippetmaster) and the one that is Broken (after edit and rewrite).

Any help would be appreciated. I really hate to dump all the work on this template.

Thanks,

[admin]

Question - when snippetmaster rewrites a page to redo the snippet area - does it rewrite all the code even outside the snippet area - it must because I'm finding some of the problems.

No, Snippetmaster will not touch your HTML or web page outside the Snippet Tags. 

If anything is being modified, and you are choosing to edit the SNIPPET, then it is because your snippet tag is either incorrectly located or you are actually choosing to modify the ENTIRE FILE.

let me know...

[tjwalker]

OK - let's figure out if the snippet tags are in the correct place first.
Attached is the raw html for the entire page including the current placement of the snippet tags.

Regardless of that, why does snippetmaster remove the trailing ";" from the style tags - which messes up the entire layout of the page.

Let's start with the above.  I will place a new copy of the original page code on the server and test again to see if, in fact, code outside the snippet area (assuming the tags are in the correct positions) is being rewritten.  If it appears to be so, I will put a fresh copy up and let you test yourself.

Thanks,

[Jenkinhill]

why does snippetmaster remove the trailing ";" from the style tags - which messes up the entire layout of the page.

Trailing semi-colons are not required as a terminator for in-line styles. See http://www.w3.org/TR/css-style-attr 

The codesweeper in the editor tries to ensure that any saved code is valid XHTML, so it will "correct" syntax errors. If simply opening the snippet in SnippetMaster and saving it causes the template to break then that suggests other code issues. The template code is something of a mess before editing so I can see that it may be difficult to spot where the problem lies. It would be a good idea to run the page code through the W3C validator before editing with SM as that may provide a clue - but note that your Doctype is HTML 4.01 transitional while the editor in SnippetMaster is constructed to work to XHTML 1.0 transitional standard as a minimum.

In the example you attached the snippet tags not correctly located. The start tag is before a <tr> so the closing tag should be immediately after a </tr>. A start tag placed within a table should not be paired with an end tag outside of that table, or the editor will remove the unmatched tag - such as </table>. That certainly would break your template.

[tjwalker]

Hi - thanks for replying.

Is there any easy way to convert older html 4.0 code into xhtml 1.0?

Also, I'm confused about the placement of the snippet tags.  In the sample I sent - the starting tag is here:

<!-- #BeginSnippet name="Main Body" --><table  cellspacing="0" cellpadding="0">

content, content, etc
and the closing tag is AFTER the closing table tag:
</table><!-- #EndSnippet -->

Opening tag directly before the start of the table, closing tag directly after the close of the table - what's wrong with this placement?

[tjwalker]

OK - disregard previous. I found HTML Tidy to convert to xhtml.
I found the possible incorrect placement of the snippet tags.

HOWEVER, and I've asked this several times and it appears to be the only thing still message up the site.  For some reason, snippet master is taking lines like this:

background-image: url(images/t-l-dr.gif);

and doing this to them:

background-image: url(&#39;images/t-l-dr.gif&#39;);

The added &#39; are messing up that line of code and therefore the page layout.

This happens even if such code is well outside the designated snippet area.

[Jenkinhill]

Sorry, I lost my way in the nested tables and missed to table tag adjacent to the opening snippet. Looking again, I think that the closing snippet tag is still in the wrong place - looks like it should be after the next </table> in the code - ie 3 lines lower.

You can use HTML Tidy or Dreamweaver to convert the pages to XHTML - but would need to correct any code errors first. You would also be better off shifting all those in-line styles into your style sheet, but that is a lot of work!

I note the source of the template. Corbis have been pursuing TemplateMonster for image piracy (see here) and have issued a lot of claims against web developers for image copyright infringement. I'd make sure that the images are definitely royalty free.

[Jenkinhill]

This happens even if such code is well outside the designated snippet area.

I don't see how that can happen if you are only editing the Snippet. I'll test something like that tomorrow when my mind is fresh!

[tjwalker]

OK - let's disregard everything for now until I do more testing.

The one page that was most of the problems works fine now after I ran it through html tidy and moved the closing snippet tag where it should have been.

I will do the same to the rest of the pages and test.

BTW, a couple of years ago, I purchased a membership with templateblowout.com (disappeared now except in archive.org).  It appears they were using photos without license.  I just received a 6 page letter from gettyimages.com demanding a $1200 fine/payment for using one of their photos without license (from a template obtained via templateblowout). 

They said it was ultimately the end-user's responsibility to make sure they have proper license to use.  I'd like to know how I'm supposed to do that if I'm told by the company I buy the template from that it is fully licensed.  Am I supposed to contact every photographer in the world to make sure they don't own it?

Thanks for all your help - if the fixes work on the rest of the pages - I'll post back so others can watch for the same situations.

[admin]

One thing you can also try is to remove all the HTML content "inside" your Snippet Tags.  Then open the file for editing (choose the SNIPPET file, and not the WHOLE FILE) and save.

There should be absolutely no difference before and after saving since the Snippet Tag was "empty".

Now slowly add your HTML code back into the snippet tag, one table at a time.. and do a open/save between each one to see how it looks. 

By doing this sort of "slow debugging", you can quickly see what part of your HTML code that is inside the Snippet Tags is incorrect.

I hope that helps.

(BTW - Jenkinhill, thanks for your help in the forums!)

[tjwalker]

OK - Almost all the pages work now.

I am here to testify - triple check the placement of snippet tags - especially on nested tables!!!! And, if using older HTML code, run it through HTML tidy or similar program.

However, that being said,  This one question remains, as it is still messing up some of the content.

Why, oh why is snippetmaster doing the following?  What does it think is wrong, what is it trying to do?

background-image: url(images/t-l-dr.gif);

and doing this to them:

background-image: url(&#39;images/t-l-dr.gif&#39;);

[admin]

Try changing it to this:

background-image: url('images/t-l-dr.gif');

If that doesn't work, then try double quotes instead:

background-image: url("images/t-l-dr.gif");

But.. to be honest.. why are you asking Snippetmaster to load this into the editor?  If you're using Snippet Tags, then that kind of CSS should not be on your page content beind loaded...