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

**Jafar** · Oct 15, 2006 05:44

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.

**Kaystarmaker** · Oct 15, 2006 06:11

then browsers will assume you use html tag soup, and switch to quirks mode

**milenko1054** · Oct 15, 2006 06:12

Not using a doctype will cause your page to display in quirks mode

**drhowarddrfine** · Oct 15, 2006 07:15

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.

**AutisticCuckoo** · Oct 15, 2006 07:43

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.

**zcorpan** · Oct 15, 2006 08:49

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.

**Jafar** · Oct 16, 2006 02:31

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.

**DaveWoods** · Oct 16, 2006 03:49

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.

**Jafar** · Oct 16, 2006 04:53

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

**Tyssen** · Oct 16, 2006 05:20

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%.

**DaveWoods** · Oct 16, 2006 05:45

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>

**Stormrider** · Oct 16, 2006 07:00

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>

**DaveWoods** · Oct 16, 2006 07:30

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.

**Jafar** · Oct 17, 2006 02:05

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

**Stormrider** · Oct 17, 2006 04:31

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.

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions