Dreamweaver Libraries and Custom DTDs

Why don't they like each other

[Kate82]

I don't want to annoy everyone by posting my entire custom DTD file, so sticky me and I'll send it to you.

I have a custom DTD that works wonderfully with my index.htm page, but I started to debug my other pages and found that it interferred with my library files that make the navigation on my pages.

Here is some code from one of my library files:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="left" valign="top">
<td width="22" background="../images/nav_blue.gif"><img src="../images/nav_light_blue.gif" width="22" height="18"></td>
<td bgcolor="#455979" background="../images/nav_light_blue_bg.gif" class="left_nav" valign="middle"><a href="../pages/solutions.htm" class="left_nav">Solutions</a></td>
</tr>
<tr align="left" valign="top">
<td width="22" background="../images/nav_blue.gif"><img src="../images/nav_light_blue.gif" width="22" height="18"></td>
<td bgcolor="#455979" background="../images/nav_light_blue_bg.gif" class="left_nav" valign="middle"><a href="../pages/products.htm" class="left_nav">Products</a></td>
</tr>
<tr align="left" valign="top">
<td width="22" background="../images/nav_blue.gif"><img src="../images/nav_light_blue.gif" width="22" height="18"></td>
<td bgcolor="#455979" background="../images/nav_light_blue_bg.gif" class="left_nav" valign="middle"><a href="../pages/services.htm" class="left_nav">Services</a></td>
</tr>
<tr align="left" valign="top">
<td width="22" background="../images/nav_blue.gif"><img src="../images/nav_light_blue.gif" width="22" height="18"></td>
<td bgcolor="#455979" background="../images/nav_light_blue_bg.gif" class="left_nav" valign="middle"><a href="../pages/support.htm" class="left_nav">Support</a></td>
</tr>
<tr align="left" valign="top">
<td width="22" background="../images/nav_blue.gif"><img src="../images/nav_light_blue.gif" width="22" height="18"></td>
<td bgcolor="#455979" background="../images/nav_light_blue_bg.gif" class="left_nav" valign="middle"><a href="../pages/news.htm" class="left_nav">News/ Events </a></td>
</tr>
<tr align="left" valign="top">
<td width="22" background="../images/nav_blue.gif"><img src="../images/nav_on.gif" width="22" height="16"></td>
<td bgcolor="#455979" background="../images/nav_light_blue_bg.gif" class="left_nav" valign="middle"><a href="../pages/about_us.htm" class="left_nav">About
Us</a></td>
</tr>
<tr align="left" valign="top">
<td width="22" background="../images/nav_blue.gif">&nbsp;</td>
<td bgcolor="#455979" class="left_nav_2"><a href="../pages/about_us_arches.htm" class="left_nav_2">The Arches</a><br>
<a href="../pages/about_us_employment_opportunities.htm" class="left_nav_2"> Employment Opportunities</a><br>
<a href="../pages/about_us_clientel.htm" class="left_nav_2">Our Clients</a>
</td>
</tr>
<tr align="left" valign="top">
<td width="22" background="../images/nav_blue.gif"><img src="../images/nav_light_blue.gif" width="22" height="18"></td>
<td bgcolor="#455979" background="../images/nav_light_blue_bg.gif" class="left_nav" valign="middle"><a href="../pages/contact.htm" class="left_nav">Contact
Us</a></td>
</tr>
</table>

Pretty simple. I know I need to work with the background codes, change to CSS, I just haven't yet. Could that be it?

Basically that DTD (I know its that by deducation of changes I made) is making spaces appear between some images and basically making it look like crap.

I can send more info but can't post URLs here or files. Any help would be great.

[Kate82]

New library code after css fix:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="left" valign="top">
<td width="22" class="navblue"><img src="../images/nav_light_blue.gif" width="22" height="18"></td>
<td class="leftnav" valign="middle"><a href="../pages/solutions.htm" class="left_nav">Solutions</a></td>
</tr>
<tr align="left" valign="top">
<td width="22" class="navblue"><img src="../images/nav_on.gif" width="22" height="16"></td>
<td class="leftnav" valign="middle"><a href="../pages/products.htm" class="left_nav">Products</a></td>
</tr>
<tr align="left" valign="top">
<td width="22" class="navblue">&nbsp;</td>
<td class="leftnav2"><a href="../pages/products_web_timecard.htm" class="left_nav_2">Web Timecard</a><br>
<a href="../pages/products_windows_timecard.htm" class="left_nav_2">Windows Timecard</a><br>
<a href="../pages/products_hosting.htm" class="left_nav_2">Hosting</a><br>
<a href="../pages/products_touchscreen.htm" class="left_nav_2">Touch Data</a><br>
<a href="../pages/products_badge_readers.htm" class="left_nav_2">Badge Reader</a><br>
<a href="../pages/products_badge_printing.htm" class="left_nav_2">Badge Printing Systems</a><br>
<a href="../pages/products_bioscan.htm" class="left_nav_2">Bioscan</a><br>
<a href="../pages/products_hand_punch.htm" class="left_nav_2">Hand Punch</a><br>
<a href="../pages/Products_pc_entry.htm" class="left_nav_2">PC Entry</a>
</td>
</tr>
<tr align="left" valign="top">
<td width="22" class="navblue"><img src="../images/nav_light_blue.gif" width="22" height="18"></td>
<td class="leftnav" valign="middle"><a href="../pages/services.htm" class="left_nav">Services</a></td>
</tr>
<tr align="left" valign="top">
<td width="22" class="navblue"><img src="../images/nav_light_blue.gif" width="22" height="18"></td>
<td class="leftnav" valign="middle"><a href="../pages/support.htm" class="left_nav">Support</a></td>
</tr>
<tr align="left" valign="top">
<td width="22" bclass="navblue"><img src="../images/nav_light_blue.gif" width="22" height="18"></td>
<td class="leftnav" valign="middle"><a href="../pages/news.htm" class="left_nav">News/ Events </a></td>
</tr>
<tr align="left" valign="top">
<td width="22" class="navblue"><img src="../images/nav_light_blue.gif" width="22" height="18"></td>
<td class="leftnav" valign="middle"><a href="../pages/about_us.htm" class="left_nav">About Us</a></td>
</tr>
<tr align="left" valign="top">
<td width="22" class="navblue"><img src="../images/nav_light_blue.gif" width="22" height="18"></td>
<td class="leftnav" valign="middle"><a href="../pages/contact.htm" class="left_nav">Contact Us</a></td>
</tr>
</table>

Basically all the DTD is doing now is making a big gap below my navigation. I'll send pictures if it'll help.

[encyclo]

By DTD, do you mean you have created your own doctype? If so, what does your doctype look like (replacing your URL if any by example.com)? Or do you mean that you have imported a DTD for custom code highlighting etc. within Dreamweaver?

[Kate82]

I have a custom dtd file.
http://www.example.com/HTML4plus.dtd

I changed it to allow for margin tags in the body and flash stuff. Nothing that should have had any affect on this code, but I am a newbie, so God knows.

[encyclo]

If you are referencing the DTD via the doctype on each page you may be altering the compatibility mode triggered within the browser from quirks mode to standards-compliance mode [webmasterworld.com] (used for an unknown doctype). If there are small gaps underneath each image, this is a possibility as images are ieline in standards mode but block elements in quirks mode.

You could try adding this to your CSS file:

img {display:block;}

If not, if you remove your doctype does the page work correctly? Bear in mind that no browser actually reads or references DTD files so although they allow a page to validate with otherwise non-standard markup, they will not add any extra functionality to the browser itself.

[Kate82]

I will try that tomorrow morning. I learn new things everyday. Thanks! I'll let you know how it goes.

[Kate82]

Found it, Thanks for your help!