Jump to content

[SOLVED] DOCUMENT type definition

Voodoo Jai

By Voodoo Jai
in CSS Help

 Share

Recommended Posts

Voodoo Jai Regular Member

Voodoo Jai

Posted
Posted

What DOCTYPE do I need to use for a CSS page.

 

<!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">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/loose.dtd">

is it one of these or not.

 

Cheers

Link to comment
Share on other sites
Voodoo Jai Regular Member

Voodoo Jai

Posted
  • Author
Posted

So is the first couple of lines not needed in this page, as it works right with out them but not with them included.

 

<!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=iso-8859-1" />

<title>Untitled Document</title>

 

<style type="text/css">

div.img

  {

  margin: 2px;

  border: 1px solid #0000ff;

  height: auto;

  width: auto;

  float: left;

  text-align: center;

  }

div.img img

  {

  display: inline;

  margin: 3px;

  border: 1px solid #ffffff;

  }

div.img a:hover img

  {

  border: 1px solid #0000ff;

  }

div.desc

  {

  text-align: center;

  font-weight: normal;

  width: 120px;

  margin: 2px;

  }

</style>

</head>

<body>

 

<div class="img">

  <a target="_blank" href="klematis_big.htm">

  <img src="images/sample.jpg" alt="Klematis" width="153"

  height="94" />  </a>

  <div class="desc">Add a description of the image here</div>

</div>

<div class="img">

  <a target="_blank" href="klematis2_big.htm">

  <img src="images/sample.jpg" alt="Klematis" width="153"

  height="94" />  </a>

  <div class="desc">Add a description of the image here</div>

</div>

<div class="img">

  <a target="_blank" href="klematis3_big.htm">

  <img src="images/sample.jpg" alt="Klematis" width="153"

  height="94" />  </a>

  <div class="desc">Add a description of the image here</div>

</div>

<div class="img">

  <a target="_blank" href="klematis4_big.htm">

  <img src="images/sample.jpg" alt="Klematis" width="153"

  height="94" />  </a>

  <div class="desc">Add a description of the image here</div>

</div>

 

</body>

</html>

Link to comment
Share on other sites
obsidian Member

obsidian

Posted
Posted

No, they are needed in that page, as that is an HTML page. You have coded styles into the page itself, but that is not a CSS page: it is still an (X)HTML page. Your doctype is a declaration of what formatting you choose to use for your markup. It is a way you can validate your code when your page is done.

Link to comment
Share on other sites
obsidian Member

obsidian

Posted
Posted

The page validates OK so why wont the page display correctly with doctype included. Is it the wrong definition.

 

First, what do you mean by "won't display correctly?" You haven't given any details of what the problem is. As for whether or not the doctype should be included and what it does, read up on this article on the W3C site. If you have a valid doctype and your page validates but still does not display properly, it is most likely an issue with the CSS itself.

Link to comment
Share on other sites
Voodoo Jai Regular Member

Voodoo Jai

Posted
  • Author
Posted

I have posted the code above and also posted a separate topic but no one seems to be able to solve it.

 

Here it is again.

 

<!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=iso-8859-1" />

<title>Untitled Document</title>

 

<style type="text/css">

div.img

  {

  margin: 2px;

  border: 1px solid #0000ff;

  height: auto;

  width: auto;

  float: left;

  text-align: center;

  }

div.img img

  {

  display: inline;

  margin: 3px;

  border: 1px solid #ffffff;

  }

div.img a:hover img

  {

  border: 1px solid #0000ff;

  }

div.desc

  {

  text-align: center;

  font-weight: normal;

  width: 120px;

  margin: 2px;

  }

</style>

</head>

<body>

 

<div class="img">

  <a target="_blank" href="klematis_big.htm">

  <img src="images/sample.jpg" alt="Klematis" width="153"

  height="94" />  [/url]

  <div class="desc">Add a description of the image here</div>

</div>

<div class="img">

  <a target="_blank" href="klematis2_big.htm">

  <img src="images/sample.jpg" alt="Klematis" width="153"

  height="94" />  [/url]

  <div class="desc">Add a description of the image here</div>

</div>

<div class="img">

  <a target="_blank" href="klematis3_big.htm">

  <img src="images/sample.jpg" alt="Klematis" width="153"

  height="94" />  [/url]

  <div class="desc">Add a description of the image here</div>

</div>

<div class="img">

  <a target="_blank" href="klematis4_big.htm">

  <img src="images/sample.jpg" alt="Klematis" width="153"

  height="94" />  [/url]

  <div class="desc">Add a description of the image here</div>

</div>

 

</body>

</html>

 

I aslo have a live link to show what I maen about not displayin correctly.

 

http://76.163.15.45/Untitled-7a.html

Link to comment
Share on other sites
Voodoo Jai Regular Member

Voodoo Jai

Posted
  • Author
Posted

Sorry that was wrong because I have been tinkering with it.

 

thsi code validates and does not display right still

 

<!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 name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Tabbed browser testing</title>

 

<script type="text/JavaScript">

//<![CDATA[

//here you place the ids of every element you want.

var ids=new Array('pictures','video','text','misc');

 

function switchid(id){ 

        hideallids();

        showdiv(id);

}

 

function hideallids(){

        //loop through the array and hide each element by id

        for (var i=0;i<ids.length;i++){

                hidediv(ids);

        }               

}

 

function hidediv(id) {

        //safe function to hide an element with a specified id

        if (document.getElementById) { // DOM3 = IE5, NS6

                document.getElementById(id).style.display = 'none';

        }

        else {

                if (document.layers) { // Netscape 4

                        document.id.display = 'none';

                }

                else { // IE 4

                        document.all.id.style.display = 'none';

                }

        }

}

 

function showdiv(id) {

        //safe function to show an element with a specified id

                 

        if (document.getElementById) { // DOM3 = IE5, NS6

                document.getElementById(id).style.display = 'block';

        }

        else {

                if (document.layers) { // Netscape 4

                        document.id.display = 'block';

                }

                else { // IE 4

                        document.all.id.style.display = 'block';

                }

        }

}

//]]>

</script>

<style type="text/css">

/*<![CDATA[*/

<!--

.tabs {

        background-image: url(images/footer-1.png);

        height: 25px;

        width: 100px;

        background-repeat: no-repeat;

}

.galleryimage {

        background-color: #CCCCCC;

        height: 180px;

        width: 590px;

        border: thin solid #000000;

}

.page {

height: 700px;

width: 900px;

background-color: #FFFFCC;

margin-left: auto;

margin-right: auto;

}

.clear {

clear: both;

}

-->

/*]]>*/

</style>

 

<style type="text/css">

/*<![CDATA[*/

div.img

{

margin: 2px;

border: 1px solid #0000ff;

height: auto;

width: auto;

float: left;

display: inline;

}     

div.img img

{

  display: block;

  margin: 3px;

  border: 1px solid #ffffff;

}

div.img a:hover img {border: 1px solid #0000ff;}

div.desc

{

  text-align: center;

  font-weight: normal;

  width: 120px;

  margin: 2px;

}

/*]]>*/

</style>

 

<style type="text/css">

/*<![CDATA[*/

div.miscDiv {display:none; width: 600px; background-color: #FFFF99;}

div.textDiv {display:none; width: 600px; background-color: #FFFF99; height: 400px; overflow: auto;}

div.pictureDiv {display:block; width: 600px; background-color: #FFFF99; height: 400px; overflow: auto;}

/*]]>*/

</style>

</head>

 

<body>

<div class="page">

 

  <p>Try these: <a href="javascript:switchid('pictures');">View pictures</a> | <a href="javascript:switchid('video');">View videos</a> | <a href="javascript:switchid('text');">View blog</a> | <a href="javascript:switchid('misc');">Misc</a></p>

  <div class="tabs"><a href="javascript:switchid('pictures');">View pictures</a></div>

  <br/>

  <hr />

 

  <div id='pictures' class="pictureDiv">

    <h2>Gallery image viewer:</h2>

    <p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Sed vitae est. Curabitur eleifend magna ut nulla. Etiam ut nisl. Nullam nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed rhoncus, tellus vitae suscipit pharetra, odio mi hendrerit mauris, quis consectetuer magna lectus eu nulla. Suspendisse potenti. In hac habitasse platea dictumst. Aenean dignissim. Duis ligula.</p>

   

  <div class="galleryimage">

 

  <div class="img"><a target="_blank" href="index.html"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a>

    <div class="desc">This image fails to show when refreshed</div>

    </div>

    <!--First thumbnail-->

  <div class="img"><a target="_blank" href="#"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a>

    <div class="desc">Add a description of the image here</div>

    </div>

    <!--Second thumbnail-->

  <div class="img"><a target="_blank" href="index.html"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a>

    <div class="desc">Add a description of the image here</div>

    </div>

    <!--Third thumbnail-->

  <div class="img"><a target="_blank" href="#"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a>

    <div class="desc">Add a description of the image here</div>

    </div>

    <!--Fourth thumbnail-->

 

  </div><!--END galleryimageDiv-->

  </div><!--END pictureDiv-->

 

  <div id='video' class="textDiv">

    <h3>Lorem ipsum</h3>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet sapien non felis iaculis scelerisque! Proin sem libero, vehicula sit amet, accumsan vitae, vehicula in, nibh. Donec sed mauris tincidunt nibh euismod molestie. Pellentesque nec odio. Phasellus felis. Quisque massa magna, aliquam mattis, ullamcorper sit amet, molestie sed, felis. Aenean at tellus aliquet tortor consequat commodo. Nulla suscipit ullamcorper risus. Curabitur eleifend orci sed dolor. Phasellus quam. Quisque lectus nulla, porttitor ut, lacinia sit amet, mollis quis; mi. Nulla felis. Nam consequat pretium risus? Nulla facilisi. Aenean scelerisque lectus quis massa? Nulla facilisi. In vulputate pede ut eros. In tortor risus, placerat non, cursus non, feugiat eu; metus?</p>

    <p>Donec et urna a metus faucibus elementum. Nullam aliquet, urna sit amet fermentum cursus, purus mi viverra mauris, a viverra sapien lectus et velit. Pellentesque massa quam, rutrum fermentum, tempor in, consequat ut, nunc. Pellentesque iaculis dignissim diam! Nam tincidunt pede et libero. Nullam libero mauris, dictum a, tempus eu, cursus nec, ante. Etiam odio urna, pretium at, imperdiet et, ornare at, nisi. Proin consectetuer vehicula lacus? Mauris nisl felis, interdum id, molestie vel, semper nec, nisi! Duis et est volutpat augue volutpat molestie? Aliquam fermentum laoreet nisl. Nam iaculis. Fusce eget diam eget ligula pretium aliquet. Suspendisse fringilla fringilla massa. Donec accumsan luctus dolor. Integer consequat commodo sem. Phasellus libero odio; mattis convallis, tristique eget, venenatis vel, nisi. Vestibulum vel dui quis urna elementum vehicula. Fusce mattis accumsan dolor! Aliquam a tortor.</p>

    <p>Nunc vitae felis eu odio sodales sollicitudin. Vivamus volutpat lobortis felis. Vivamus nunc! Suspendisse non lacus. Sed consequat nisl varius augue? Nunc ante diam, varius ut, pulvinar ut, semper id, ligula? Aliquam erat volutpat. Integer iaculis pede in sapien. Pellentesque augue. Etiam nec velit nec turpis commodo sodales. Donec vel odio. Nam aliquam turpis non nibh bibendum congue. Nam eleifend justo dapibus nisl. Pellentesque laoreet, leo nec placerat ultrices, nunc arcu placerat ante; pulvinar pellentesque tellus diam quis libero! Quisque eu sem quis nisl gravida sagittis. Etiam ligula purus, tincidunt ut, vulputate eget, posuere eu, tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

  </div><!--END textDiv-->

  <br/>

  <hr />

 

  <div id='text' class="textDiv">

    <h3>This content is for text</h3>

    <p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Sed vitae est. Curabitur eleifend magna ut nulla. Etiam ut nisl. Nullam nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed rhoncus, tellus vitae suscipit pharetra, odio mi hendrerit mauris, quis consectetuer magna lectus eu nulla. Suspendisse potenti. In hac habitasse platea dictumst. Aenean dignissim. Duis ligula.</p>

        </div><!--END textDiv-->

 

  <div id='misc' class="miscDiv">

    <h3>This content is for misc text</h3>

    <p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Sed vitae est. Curabitur eleifend magna ut nulla. Etiam ut nisl. Nullam nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed rhoncus, tellus vitae suscipit pharetra, odio mi hendrerit mauris, quis consectetuer magna lectus eu nulla. Suspendisse potenti. In hac habitasse platea dictumst. Aenean dignissim. Duis ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vitae est. Curabitur eleifend magna ut nulla. Etiam ut nisl. Nullam nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed rhoncus, tellus vitae suscipit pharetra, odio mi hendrerit mauris, quis consectetuer magna lectus eu nulla. Suspendisse potenti. In hac habitasse platea dictumst. Aenean dignissim. Duis ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vitae est. Curabitur eleifend magna ut nulla. Etiam ut nisl. Nullam nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed rhoncus, tellus vitae suscipit pharetra, odio mi hendrerit mauris, quis consectetuer magna lectus eu nulla. Suspendisse potenti. In hac habitasse platea dictumst. Aenean dignissim. Duis ligula.</p>

  </div><!--END miscDiv-->

 

</div><!--END page-->

  <p>

    <a href="http://jigsaw.w3.org/css-validator/" target="_blank"><img style="border:0; width:88px; height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a>

  <a href="http://validator.w3.org/check?uri=referer" target="_blank"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></p>

  <div/>

</body>

</html>

 

it can be viewed again using the link supplied above.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.