Scripts generated by the AllWebMenus DHTML Menu Maker application create HTML <table> elements (and thus <tr> and <td> elements) in order to display the menu in your website.

Generic CSS rules that apply to all elements of a certain type (such as table) will also affect the elements created by the AllWebMenus' scripts. This can cause strange appearance of a menu.

Here is an example:

The original menu looks like this:

CSS rules like the following:

td {
text-align: center;
margin: 0.5em;
font-size: 100%;
color: black;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px
}

and

tr { 
text-align: left;
 margin: auto;
 font-size: 100%; 
color: black;
padding-left: 10px; 
padding-right: 10px;
 padding-top: 5px;
 padding-bottom: 5px 
}

will cause a menu to look like this: menu broken by css in css example

Instead of the above rules, you can use classes and add these classes to the elements of the page you want the CSS rules to be applied:

td.TDdefinition {
 text-align: center;
 margin: 0.5em;
 font-size: 100%; 
color: black;
 padding-left: 10px;
 padding-right: 10px; 
padding-top: 5px; 
padding-bottom: 5px
 }

and

tr.TRdefinition { 
text-align: left;
 margin: auto;
 font-size: 100%; 
color: black;
 padding-left: 10px; 
padding-right: 10px;
 padding-top: 5px;
 padding-bottom: 5px 
}

and in the source code of your page you can use the following

<table …>

<tr class=”TDdefinition” …>

<td class=”TRdefinition” …>

...

</td>

</tr>

</table>

 

in the tables you want these CSS rules to be applied.

Related posts:

  1. How to create a multi-language menu setup (PHP example)?
  2. How to unlink an AllWebMenus menu from your page(s).
  3. How to customize the browser window through the Link Target property.
  4. How do I use multiple menus on the same page?
  5. Menu first appears in the top-left corner and then jumps to correct position. Any suggestions?