SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Zealot Jafar's Avatar
    Join Date
    Jun 2005
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Xhtml DOCTYPE Question?what does happen if i dont use DOCTYPE?

    Hi all,
    What does happen if i remove
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    from header of my pages and use only html tag?
    Thanks i advance.

  2. #2
    SitePoint Zealot Kaystarmaker's Avatar
    Join Date
    Jan 2005
    Location
    The Netherlands
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    then browsers will assume you use html tag soup, and switch to quirks mode
    Kilian Valkhof | KilianValkhof.com - Soon... | I love my job!

  3. #3
    SitePoint Zealot milenko1054's Avatar
    Join Date
    Jan 2004
    Location
    Ohio
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not using a doctype will cause your page to display in quirks mode


  4. #4
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And that means it will be like 1998 all over again. Quirks mode has come about due to IE flaws. The doctype is used to avoid these flaws. Never design a page without a proper doctype. All new pages should always use the strict doctype.

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nothing happens if you serve your XHTML document properly, i.e., with a MIME type of application/xhtml+xml. It will still use standards mode. If you include the correct XML namespace declaration in the root element, it will even be recognised as XHTML.

    If you only pretend to use XHTML, by serving it as text/html, browsers will switch to quirks mode and try to recover from all the syntax errors caused by invalid self-closing tags. If you try to use any real XML features, they won't work.
    Birnam wood is come to Dunsinane

  6. #6
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then (for XML) you can't use any external parsed entities other than the five predefined ones, which is good because you should only use the predefined ones anyway. Other entities are unsafe for XML on the Web because XML processors don't need to parse external DTDs.
    Simon Pieters

  7. #7
    SitePoint Zealot Jafar's Avatar
    Join Date
    Jun 2005
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for responses,
    i have a small problem in using that doctype,
    when i use that, some css properties do not work porperly.
    i have a table and i set it 1 pix border and put a css menu in it when i use doctype the border will be invisible.

    it works in firefox properly.

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you applying the border using CSS?

    If you apply it using border="1px" in the HTML and are using a strict doctype then that could be why.

    If you casn post a link or post your sample code then I'll take a look.

  9. #9
    SitePoint Zealot Jafar's Avatar
    Join Date
    Jun 2005
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz
    Are you applying the border using CSS?

    If you apply it using border="1px" in the HTML and are using a strict doctype then that could be why.

    If you casn post a link or post your sample code then I'll take a look.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
    
    <style>
    #navcontainer
    {
    width: 12em;
    border-right: 0;
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
    background-color: #90bade;
    color: #333;
    }
    
    #navcontainer ul
    {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }
    
    #navcontainer li
    {
    border-bottom: 1px solid #90bade;
    margin: 0;
    }
    
    #navcontainer li a
    {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 10px solid #1958b7;
    border-right: 10px solid #508fc4;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    width: 100%;
    }
    
    html>body #navcontainer li a { width: auto; }
    
    #navcontainer li a:hover
    {
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
    }</style>
    <title>Main Menu</title>
    </head>
    
    <body>
    
    							<table border="0" cellpadding="0" style="border-collapse: collapse;margin-top:5px" width="185" id="table334">
    								<tr>
    									<td style="border: 1px solid #C0C0C0; " valign="top">
    									<div id="navcontainer">
    										<ul id="navlist">
    											<li><a href="#">Home</a></li>
    											<li><a href="#">About</a></li>
    											<li><a href="#">Contact</a></li>
    										</ul></div></td>
    								</tr>
    							</table>
    							
    </body>
    
    </html>
    check it without doctype

  10. #10
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's because you've given #navcontainer li a width: 100% but you've also given it padding and border. With your doctype, the total width is width + margin + padding + border, so in other words, more than 100%.

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    It's because you've given #navcontainer li a width: 100% but you've also given it padding and border. With your doctype, the total width is width + margin + padding + border, so in other words, more than 100%.
    That is will cause problem if the menu is put into a complete design but isn't the reason why the border on the table isn't showing up... it'll work if you move the border from the td onto the table. Although you don't need any of those inline as you can define the page like so

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
    <style>
    #navcontainer
    {
    width: 12em;
    border-right: 0;
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
    background-color: #90bade;
    color: #333;
    }
    
    #navcontainer ul
    {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }
    
    #navcontainer li
    {
    border-bottom: 1px solid #90bade;
    margin: 0;
    }
    
    #navcontainer li a
    {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 10px solid #1958b7;
    border-right: 10px solid #508fc4;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    width: 100%;
    }
    
    html>body #navcontainer li a { width: auto; }
    
    #navcontainer li a:hover
    {
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
    }
    table {
    	border-collapse: collapse; 
    	border: 1px solid #C0C0C0; 
    	margin-top: 5px;
    	width: 185px;
    	padding: 0px;
    }
    </style>
    <title>Main Menu</title>
    </head>
    <body>
    <table id="table334">
      <tr> 
        <td> 
          <div id="navcontainer"> 
            <ul id="navlist">
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
        </td>
      </tr>
    </table>
    </body>
    </html>
    Although I have no idea why you are using a table to surround the menu anyway?

    Wouldn't something like this be a better solution?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
    <style type="text/css">
    #navcontainer {
    	width: 12em;
    	border-right: 0;
    	padding: 0 0 1em 0;
    	margin-bottom: 1em;
    	font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
    	background-color: #90BADE;
    	color: #333333;
    	border: 1px solid #C0C0C0; 
    	margin-top: 5px;
    	width: 185px;
    	padding: 0px;
    }
    
    #navcontainer ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    
    #navcontainer li {
    	border-bottom: 1px solid #90bade;
    	margin: 0;
    }
    
    #navcontainer li a {
    	display: block;
    	padding: 5px 5px 5px 0.5em;
    	border-left: 10px solid #1958b7;
    	border-right: 10px solid #508fc4;
    	background-color: #2175bc;
    	color: #ffffff;
    	text-decoration: none;
    }
    
    html>body #navcontainer li a { width: auto; }
    
    #navcontainer li a:hover{
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586D7;
    color: #FFFFFF;
    }
    </style>
    <title>Main Menu</title>
    </head>
    <body>
          <div id="navcontainer"> 
            <ul id="navlist">
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
    </body>
    </html>

  12. #12
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    you don't need the div either... just style the ul

    Also, there are a lot of cases in the css of declaring something and then overwriting it with something else...

    #navcontainer {
    width: 12em;
    border-right: 0;
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
    background-color: #90BADE;
    color: #333333;
    border: 1px solid #C0C0C0;
    margin-top: 5px;
    width: 185px;
    padding: 0px;
    }

    Edit: Try this..

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
       
       <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
         <meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
         <style type="text/css">
       
       ul#navlist {
        list-style: none;
        margin: 5px 0 1em 0;
        padding: 0;
        border: 1px solid #C0C0C0;
        font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
        background-color: #90BADE;
        color: #333333;
        width: 185px;
       }
       
       ul#navlist li {
        border-bottom: 1px solid #90bade;
        margin: 0;
       }
       
       ul#navlist li a {
        display: block;
        padding: 5px 5px 5px 0.5em;
        border-left: 10px solid #1958b7;
        border-right: 10px solid #508fc4;
        background-color: #2175bc;
        color: #ffffff;
        text-decoration: none;
       }
       
       html>body ul#navlist li a {
        width: auto;
       }
       
       ul#navlist li a:hover {
        border-left: 10px solid #1c64d1;
        border-right: 10px solid #5ba3e0;
        background-color: #2586D7;
       }
     
          </style>
     
         <title>Main Menu</title>
        </head>
       
        <body>
         <ul id="navlist">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
         </ul>
        </body>
       </html>

  13. #13
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep you're right... I'd copy and pasted the styles that had been applied to the table and put them onto the containing div without checking what values had already been applied to it so that was a mistake on my part.

    And also, like Stormrider says you don't actually need the div at all so you could just use a list for your navigation.

  14. #14
    SitePoint Zealot Jafar's Avatar
    Join Date
    Jun 2005
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz
    Although I have no idea why you are using a table to surround the menu anyway?
    thanks for response.
    because i have several categories and menu and i should give them a title.
    i use a new row above this menu.


    i am beginner in coding table-less layout.
    i tried to make my menu and it's title using div but i dont success.
    i want to make a content box like this.

    ----------------------
    [image] MENU TITLE |
    ----------------------
    Menu Items# |
    Menu Items# |
    Menu Items# |
    Menu Items# |
    ---------------------

    Thanks in advance

  15. #15
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">
     
      <head>
       <meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
       <style type="text/css">
     
     div.menu {
      width: 11.7em;
      border: 1px solid #90BADE;
     }
     
     div.menu h3 {
      margin: 0;
      font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
      font-weight: normal;
      font-size: 1.1em;
      padding-left: 20px;
      background-image: url('http://url.to/some/image.jpg');
      background-position: top left;
      background-repeat: no-repeat;
     }
     
     div.menu ul {
      list-style: none;
      margin: 0 0 0 0;
      padding: 0;
      border: 1px solid #C0C0C0;
      font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
      background-color: #90BADE;
      color: #333333;
     }
     
     div.menu ul li {
      border-bottom: 1px solid #90bade;
      margin: 0;
     }
     
     div.menu ul li a {
      display: block;
      padding: 5px 5px 5px 0.5em;
      border-left: 10px solid #1958b7;
      border-right: 10px solid #508fc4;
      background-color: #2175bc;
      color: #ffffff;
      text-decoration: none;
     }
     
     html>body div.menu ul li a {
      width: auto;
     }
     
     div.menu ul li a:hover {
      border-left: 10px solid #1c64d1;
      border-right: 10px solid #5ba3e0;
      background-color: #2586D7;
     }
     
       </style>
     
       <title>Main Menu</title>
      </head>
     
      <body>
       <div class="menu">
        <h3>Menu Title</h3>
        <ul>
     	<li><a href="#">Home</a></li>
     	<li><a href="#">About</a></li>
     	<li><a href="#">Contact</a></li>
        </ul>
       </div>
      </body>
     </html>
    You'll need to replace the image url with yours (obviously), change the padding left on the h3 tag to match the image width + a bit of padding if you want, and fiddle with other styles till they are how you want them.

    Also, I have used h3 as an example, but use whichever heading tag is most appropriate in the context of your page. Then just paste that div class=menu when you want to use the same styles, with the heading tag and list inside it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •