DOCTYPE Ruins my Site :/


#5552361 Posted on: 03/17/11 at 10:33am
Badger


Avatar
Post (0)

269
668

I know WHY it's messing it up, but I don't know how to fix it.

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">]

This is the DOCTYPE I'm using. I'm using two divs to seperate my content. When I delete the DOCTYPE, the problem is solved. The problem is that the DOCTYPE is an important part in my midterm coding, and I'd rather get a 5.0 on that part than nothing just because I'm too lazy to figure out what's wrong.

I think I might be using the wrong kind of markup (probably HTML instead of XHTML...). But what do I need to change in order to change the code to XHTML?

Code:
<html>
<head>

<title>Stef's a Cartoonist?</title>

<style type="text/css">

body {background-color:#999999;
background-image: url(images/background.jpg);}


p {color:#333333;
font-size=1.1em;
font-face:tahoma;
font-family: tahoma;}


h1 {color:#333333;
font-size: 1.5em;
font-family: tahoma;}


h2 {color:#333333;
font-size:2em;
font-family: tahoma;}


center, p, li {font-size:1em;
font-family: tahoma;
color:#333333}


h3 {color:#333333;
font-size:1.5em;
font-family:tahoma;}


</style>


</head>


<center>
<div style=
"background:#ffffcc;
border:#000000 3px solid;
font-family:verdana;
font-size:9px;
color:#000000;
width:900px;
height:35px;
margin-top:25px;
padding-top:5px;
padding-right:5px;
padding-left:5px">
</center>


<img src=images/titlenav.gif align=left>
<img src=images/cartoonist.gif align=left>
<a href=index.html><img src=images/home.gif align=left></a>
<a href=about.html><img src=images/about.gif align=left></a>
<a href=services.html><img src=images/services.gif align=left></a>
<a href=projects.html><img src=images/projects.gif align=left></a>
<a href=contact.html><img src=images/contact.gif align=left></div></a>




<center>
<div style=
"background:#ffffcc;
border:#000000 3px solid;
font-family:verdana;
font-size:9px;
color:#000000;
width:450px;
height:300px;
margin-top:25px;
padding-top:10px;
padding-left:10px;
padding-right:10px;">
</center>



<font size=3pt>Stefanie Huffman...</font>
</br>
</br>


<center>
is a graphic designer, web designer, and cartoonist in the making. She works on countless projects for school and for her own entertainment.
She offers web design services and art commissions on a regular basis to please her fans and watchers.
</center>
</br>


<center>
<ul>
If you would like to find out more about Stefanie, please start at the "About" page.
</ul>
<ul>If you are interested in buying Stefanie out for Web Design services or a commission, please start at the "Services" page.
</ul>
<ul>If you have just stumbled upon this site, or you're just here to look around, I would
suggest starting at the "Projects" page.
</ul>
<ul>If you would like to contact Stefanie to learn more about services, or if you have a question, please start at the "Contact" page.
</ul>
</center>
</div>


<img src=images/vectorprac.gif align=right alt=Tika>

<img src=images/vec.gif align=left alt=Yukiko>











<style/css>
a img {
border: none;

</style>



<style/css>
a:hover {
color: #FFCC99;
}

</style>



<style/css>
a:link {
color:#333333;
text-decoration:none;
}


</style>








</body>
</html>

This is my code, minus the DOCTYPE.

Can anyone help with this? I hate to ask for help with a midterm, but it's due today and I was all finished until I realized that this was happening. :/

P.S. I tested on Internet Explorer because my lab uses that browser. Not sure how it will look on Chrome or Firefox, but you can give it a shot if you'd like.



#5552366 Posted on: 03/17/11 at 11:55am
Sammii
is a sun worshipper


Avatar
Post (0)

842
4,508

@Kiwako It might be easier to just change your doctype to HTML rather than tweak your coding to use XHTML. But the only big different to my knowledge with using XHTML is any element that doesn't have a closing tag needs to be explicitly "closed." So like, a line break tag: <br> It doesn't close, right? There is no such thing as </br>. That's fine with HTML, but to have correct XHTML, you have to close it anyway. You do that by adding a space and then a /. So your <br> would then be:

Code:

<*br />


THIS IS NOT WORKING lol remove the asterisk.
Your images would be:

Code:
<img src="blah" />



#5552354 Posted on: 03/27/11 at 4:43am
Sokka
is fashionable


Avatar
Post (0)

533
1,729

@kiwako
You never started the body tags?
After /head, you should automatically start this. (minus the *'s)
Code:

<body*>
blah content here
</body*> </html*>


Also, you should never ever never have those style tags outside of your head, OR AT THE BOTTOM. Like seriously. get them up the top ;)



#5552358 Posted on: 05/14/11 at 5:18pm
DIAL
is lonely


Avatar
Post (0)

209
403

Is the extra bracket at the end of your doctype or was that just a typo when you were putting it on Subeta?

Also, all your CSS should be linked to an external stylesheet.