Keeping your nested TR's and TD's straight

[Stachel]

OK, what is your secret for keeping your nested TD's and TR's straight?

Is there a parser that shows TD's and TR groupings to
1) Help find errors from things like an errant TR without a </TR>
2) Help understand how the skin code maps to the end result on the screen?

It would be super-cool to somehow overlay code fragments on the actual screen.

To help see how the grid is driven by the code.

I bet all you Advanced Coders have some super secret cool tool!
(or you are so far beyond needing anything...)

Stachel

[Brandon Sheley]

dreamweaver ? macromedia..

wouldn't that work or help

[Colin F]

I use indents.

[Logikos]

The Tab button is my best friend. And i can't stress this enough. WHITESPACE!!!!!.


Wrong

<table class="class" cellpadding="0" cellspacing="0" width="100%" border="0"><tr>
<td>Hello</td>
</tr></table>

Right!

<table class="class" cellpadding="0" cellspacing="0" width="100%" border="0">
        <tr>
                <td>Hello</td>
        </tr>
</table>

They both do the same thing, but isn't the second way eaiser to read? It also Helps you see which <td>'s, <table>'s, and <tr>'s are being closed properly. Because they will be inlined with each other vertically. If your <td></td> is a small line then place it in front and back like above. If its large Then you can do this:

<table class="class" cellpadding="0" cellspacing="0" width="100%" border="0">
        <tr>
                <td>
                        something pretty long will go here. Stop looking at my code<br />
                        something pretty long will go here. Stop looking at my code<br />
                        something pretty long will go here. Stop looking at my code<br />
                        something pretty long will go here. Stop looking at my code<br />
                        something pretty long will go here. Stop looking at my code<br />
                        something pretty long will go here. Stop looking at my code<br />
                        something pretty long will go here. Stop looking at my code<br />
                </td>
        </tr>
</table>

Also If you going to put a <table> inside a <table>, then keep the tabbing going. Like This

<table class="class" cellpadding="0" cellspacing="0" width="100%" border="0">
        <tr>
                <td>
                        <table class="class" cellpadding="0" cellspacing="0" width="100%" border="0">
                                <tr>
                                        <td>Blah</td>
                                </tr>
                        </table>
                </td>
        </tr>
</table>

Its just much nicer to see code like that. IMHO And if you do it this way, your almost guaranteed that it will work will all browsers. But of course it all depends on what else the code holds and what your trying to do.

[Colin F]

Originally Posted by Live Wire

The Tab button is my best friend. And i can't stress this enough. WHITESPACE!!!!!.


Wrong

<table class="class" cellpadding="0" cellspacing="0" width="100%" border="0"><tr>
<td>Hello</td>
</tr></table>

Right!

<table class="class" cellpadding="0" cellspacing="0" width="100%" border="0">
        <tr>
                <td>Hello</td>
        </tr>
</table>

They both do the same thing, but isn't the second way eaiser to read? It also Helps you see which <td>'s, <table>'s, and <tr>'s are being closed properly. Because they will be inlined with each other vertically. If your <td></td> is a small line then place it in front and back like above. If its large Then you can do this:

<table class="class" cellpadding="0" cellspacing="0" width="100%" border="0">
        <tr>
                <td>
                        something pretty long will go here. Stop looking at my code<br />
                        something pretty long will go here. Stop looking at my code<br />
                        something pretty long will go here. Stop looking at my code<br />
                        something pretty long will go here. Stop looking at my code<br />
                        something pretty long will go here. Stop looking at my code<br />
                        something pretty long will go here. Stop looking at my code<br />
                        something pretty long will go here. Stop looking at my code<br />
                </td>
        </tr>
</table>

Also If you going to put a <table> inside a <table>, then keep the tabbing going. Like This

<table class="class" cellpadding="0" cellspacing="0" width="100%" border="0">
        <tr>
                <td>
                        <table class="class" cellpadding="0" cellspacing="0" width="100%" border="0">
                                <tr>
                                        <td>Blah</td>
                                </tr>
                        </table>
                </td>
        </tr>
</table>

Its just much nicer to see code like that. IMHO And if you do it this way, your almost guaranteed that it will work will all browsers. But of course it all depends on what else the code holds and what your trying to do.

true true.

Allthoguh I've also got to say that in the small field we have for editing templates, it all gets shoved together, which is kind of sad. Never got used to clicking the button for a bigger field...

[Logikos]

Originally Posted by Colin F

true true.

Allthoguh I've also got to say that in the small field we have for editing templates, it all gets shoved together, which is kind of sad. Never got used to clicking the button for a bigger field...

Also True, but i never use vBs template editor. Like you said, its too small and you can't use the tab button. It will just tab to the next tabindex="1".

Heres what i do when i want to edit or add a template. If im adding a template, i code it in my editor, then copy and paste it when im finished. If im editing a template, i CRT+A to the template to select all the code, and i copy and paste it in my editor and start my editing. When im done, i paste it back into the template box.

My way may seem longer, but I'm a FireFox user and the Search option that is apart of vBulletin templates do not work with FF. So there for i would have to use FF's HIGHLIGHT feature which sucks. So i just do it that way.

[Colin F]

Originally Posted by Live Wire

Also True, but i never use vBs template editor. Like you said, its too small and you can't use the tab button. It will just tab to the next tabindex="1".

Heres what i do when i want to edit or add a template. If im adding a template, i code it in my editor, then copy and paste it when im finished. If im editing a template, i CRT+A to the template to select all the code, and i copy and paste it in my editor and start my editing. When im done, i paste it back into the template box.

My way may seem longer, but I'm a FireFox user and the Search option that is apart of vBulletin templates do not work with FF. So there for i would have to use FF's HIGHLIGHT feature which sucks. So i just do it that way.

I know what you mean. Then again, with the search function implemented in 3.5, it'd probably be easier to do small edits directly in the ACP.

[zetetic]

Originally Posted by Live Wire

Heres what i do when i want to edit or add a template. If im adding a template, i code it in my editor, then copy and paste it when im finished. If im editing a template, i CRT+A to the template to select all the code, and i copy and paste it in my editor and start my editing. When im done, i paste it back into the template box.

I use Firefox and I do that too. But I also use MSIE for all template edits because it's impossible to search in form fields using Firefox (although that was supposedly fixed in CVS before the emergency 1.0.4 release, so will probably be in 1.0.5).