Sponsored Links

All guest books and web logs are displayed with basic formatting within a standard HTML table. As part of the generation process, we adorn the HTML with appropriate class and id attributes making it relatively easy to customize the appearance using CSS. This enables advanced users to customize the tool's appearance using CSS.
    The CSS enhanced formatting is supported by Internet Explorer 3.0 and later and Netscape Navigator 4.0 and later. While a large number of browsers claim support for CSS you still may not get the expected results. For example, many of the common CSS attributes fail to be rendered correctly by Netscape. Therefore, if you create a custom style sheet for your tool and are concerned about its appearance, you should test the output. Without testing, the worse that should happen is a specific browser may not render the tool correctly (eg., colors or fonts may be displayed incorrectly).
    The HTML below outlines how we adorn the HTML with class and id values:

<TABLE CELLSPACING=0 CELLPADDING=0 ID=list WIDTH=90%>
  <TR>
    <TD COLSPAN=2>  
      <!-- The Ad Banner goes here -->
    </TD>
  </TR>
  <TR>
    <TD COLSPAN=2 ID=header>
      <H1 ID=title>
        Tool Title
      </H1>
      <P ID=description>
        Tool Description
      </P>
      <!-- If adding records is supported by the user -->
      <FORM METHOD=post ACTION="http://www.siteExperts.com/tools/addEntry.asp">
        <!-- Input form is generated -->
      </FORM>
      <P ID=counter>
        Entries x of y
      </P>
    </TD>
  </TR>
  <TR>
    <TH CLASS=date COLSPAN=2 ALIGN=left WIDTH=100% BGCOLOR=#EEEEEE>
      The Date
    </TH>
  </TR>
  <TBODY CLASS=entry>
    <!-- Each entry is wrapped by a TBODY element
            Netscape does not support applying styles to the TBODY element -->
    <TR CLASS=record>
      <TD COLSPAN=2>
        <!-- For Guest Books the guest # otherwise a blank line -->
      </TD>
    </TR>
    <!-- Each field name generates a row as follows (only if there is an
            entry) except for the Comment field -->
    <TR CLASS=fieldname>
      <TD CLASS=field NOWRAP VALIGN=top>
        Field Name
      </TD>
      <TD CLASS=value>
        Value
      </TD>
    </TR>
    <!-- The Comment field does not have the field name displayed -->
    <TR CLASS=fieldname>
      <TD COLSPAN=2 CLASS=value>
        Comment Value
      </TD>
    </TR>
    <!-- If you are the owner of the tool, you can an additional
            edit option -->
    <TR CLASS=edit>
      <TD COLSPAN=2 align=right>
        <!-- Edit link -->
      </TD>
    </TR>
  </TBODY>
  <!-- If more than one row, a divider row is inserted -->
  <TR CLASS=divider>
    <TD COLSPAN=2 align=right>
    </TD>
  </TR>
</TABLE>

Below we apply the following style sheet to a sample list. This style sheet also points out compatibility issues between Internet Explorer and Netscape.
    In Internet Explorer, the title is Navy, there is no margin between the title and the description, the font throughout is arial, each entry has an orange background, the name is bold, and there is a black dividing line between each entry (plus a few other minor formatting changes). In Netscape, almost none of this style sheet is applied except for the "Entries x of y" being displayed green. However, while this points out compatibility issues, this also demonstrates that a lack of proper CSS support only causes the tool to lose its enhanced rendering.
    Below is the Style Sheet used to format the tool:

<STYLE>
  #list {font: 10pt arial; border: 1pt black solid}
  #list #title {color:  navy; margin-bottom: 0pt}
  #list #description {margin-top: 0pt}
  #list .entry {background: orange}
  #list .name {font-weight: bold}
  #list .comment {padding-top: 3pt;padding-bottom: 5pt}
  #list .divider {background: black;height:1}
  #counter {color: darkgreen;font-weight: bold}
</STYLE>