Website messes up when I add doc type?

Discussion in 'HTML & Website Design' started by Steam, Apr 10, 2009.

  1. #1
    Without doctype my nav bar lines up nicely
    [​IMG]

    When I add the doc type my spacing goes wild.
    [​IMG]


    This is my doc type

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    Steam, Apr 10, 2009 IP
  2. Steam

    Steam Guest

    Messages:
    611
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #2
    <table width="197" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC" class="style8" id="Navigation" style="border-collapse: collapse">
    <tr>
    <td width="193" height="21" colspan="2" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
    <td height="9" colspan="2"><p><em><img src="images/navi3.jpg" alt="Navigation Bar Header" width="199" height="39" hspace="5" vspace="5"></em></p> </td>
    </tr>
    <tr>
    <td height="21" colspan="2" bgcolor="#FFFFFF"><p align="center">&nbsp;</p> </td>
    </tr>
    <td height="10" colspan="2" bgcolor="#FFFFFF"><p align="left"><a href="Index.htm"><img src="images/homenav.jpg" alt="Home page" width="193" height="39" border="0" hspace="5" vspace="5"></a></p></td>
    </tr>
    <tr>
    <td height="10" colspan="2" bgcolor="#FFFFFF"><strong><a href="DallasCowboys.html"><img src="images/dallasztadium.jpg" alt="Dallas Stadium" border="0" width="193" height="39" hspace="5" vspace="5"></a></strong> </td>
    </tr>
    <tr>
    <td height="20" colspan="2" bgcolor="#FFFFFF"><strong><a href="DallasZoo.html"><img src="images/DallasZoo.jpg" alt="Dallas Zoo" width="193" border="0" height="39" hspace="5" vspace="5"></a></strong></td>
    </tr>
    <tr>
    <td height="20" colspan="2" bgcolor="#FFFFFF"><p><a href="WhiteRockLake.html"><img src="images/rockparkn1.jpg" alt="White Rock Lake" width="193" border="0" height="39" hspace="5" vspace="5"></a></p> </td>
    </tr>
    <tr>
    <td height="20" colspan="2" bgcolor="#FFFFFF"><p><a href="SixthFloorMuseum.html"><img src="images/SFmus.jpg" alt="Six Floor Museum" width="193" border="0" height="39" hspace="5" vspace="5"></a><br>
    </p> </td>
    </tr>
    <tr>
    <td height="20" colspan="2" bgcolor="#FFFFFF"><p><strong><a href="Reunion Tower.html"><img src="images/reunionnav.jpg" alt="Reunion Tower" border="0" width="193" height="39" hspace="5" vspace="5"></a></strong></p> </td>
    </tr>
    <tr>
    <td height="20" colspan="2" bgcolor="#FFFFFF"><p><a href="Frontiersofflight.html"><img src="images/fofMn1.jpg" alt="Frontiers of Flight" width="193" border="0" height="39" hspace="5" vspace="5"></a></p> </td>
    </tr>
    <tr>
    <td height="20" colspan="2" bgcolor="#FFFFFF"><a href="theoceanaire.html"><img src="images/OceanairenavF.jpg" alt="Oceanaire" width="193" border="0" height="39" hspace="5" vspace="5"></a></td>
    </tr>
    <tr>
    <td height="20" colspan="2" bgcolor="#FFFFFF"><a href="Aquarium.html"><img src="images/aqua.jpg" alt="World Aquarium" width="193" height="39" border="0" hspace="5" vspace="5"></a></td>
    </tr>
    <tr>
    <td height="20" colspan="2" bgcolor="#FFFFFF"><a href="JFKMemorial.html"><img src="images/jfksplaza.jpg" alt="John F. Kennedy Memorial" width="193" border="0" height="39" hspace="5" vspace="5"></a></td>
    </tr>
    <tr>
    <td colspan="2" bgcolor="#FFFFFF"><a href="BearCreek.html"><img src="images/bcgolf.jpg" alt="Bear Creek Golf Course" width="193" border="0" height="39" hspace="5" vspace="5"></a></td>
    </tr>
    </table>
     
    Steam, Apr 10, 2009 IP
  3. larssonk22

    larssonk22 Well-Known Member

    Messages:
    236
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    103
    #3
    I am also having trouble with the doctype, however I believe your problem is straight forward the spacing of your navigation can be controlled by the css file.

    Try adding these see if it makes a difference

    
    
    .Navigation {
    margin: 0; 
    padding: 2px 2px 2px 0.5em;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;
    }
    
    
    Code (markup):
     
    larssonk22, Apr 11, 2009 IP