DEVELOPMENT SERVER
Rules to Better SharePoint Development

It is extremely important to make your site standards compliant:

• It makes styling a lot easier.
• It also means your site is likely to work for all browsers, even if you don’t specifically target/support them.
• It requires accessibility for big public sites can be met easier.

When you first run your SharePoint site – you’ll discover that it looks nice on the surface but needs a significant amount of work to fix all the bad HTML.

Implement CSS Friendly – these are the control adapters released by Microsoft to make ASP.NET render better, non-table based controls.  You can implement them for SharePoint sites as well.

<TABLE id=zz1_TopNavigationMenu class="..." border=0 cellSpacing=0 cellPadding=0>
<TBODY>
    <TR>
    <TD id=zz1_TopNavigationMenun0>
        <TABLE class="..." border=0 cellSpacing=0 cellPadding=0 width="100%">
        <TBODY>
            <TR>
                <TD style="WHITE-SPACE: nowrap">
                <A style="..." class="..." href="...">Home</A>
                </TD>
            </TR>
        </TBODY>
        </TABLE>
    </TD>
    ...   
    <TD id=zz1_TopNavigationMenun1>
        <TABLE class="..." border=0 cellSpacing=0 cellPadding=0 width="100%">
        <TBODY>
            <TR>
                <TD style="WHITE-SPACE: nowrap">
                <A style="..." class="..." href="...">Operations</A>
                </TD>
            </TR>
        </TBODY>
        </TABLE>
    </TD>
    ...
    <TD id=zz1_TopNavigationMenun2>
        <TABLE class="..." border=0 cellSpacing=0 cellPadding=0 width="100%">
        <TBODY>
            <TR>
                <TD style="WHITE-SPACE: nowrap">
                <A style="..." class="..." href="...">Application Management</A>
                </TD>
            </TR>
        </TBODY>
        </TABLE>
    </TD>
    ...
    </TR>
</TBODY>
</TABLE>

Bad example - without using CSS Friendly

<div class="CssFriendly-Menu-Horizontal" id="zz1_TopNavigationMenu">
    <ul class="CssFriendly-Menu">
        <li class="CssFriendly-Menu-WithChildren">
        <a href="..." class="CssFriendly-Menu-Link TopLevelNavItem">About Us</a>
        <div class="cbb CssFriendly-Menu-Dropdown">
            <div class="CssFriendly-Menu-Dropdown-ItemHost">
                <ul class="first">
                    <li class="CssFriendly-Menu-Leaf">
                    <a href="..." class="CssFriendly-Menu-Link">Employees</a>
                    </li>
                </ul>
            </div>
        </div>
        </li>
        ...
    </ul>
</div>

Good example - using CSS Friendly