Doctype problem [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : Doctype problem

JayM

04-28-2005, 04:46 PM

Ok. Not sure what's going on with my webpage. I have finished coding and designing everything and I used xHTML. When I use the Strict xHTML doctype my whole page just screws up.
1. My background image disappears.
2. My content is all over the place.
3. My banner disappears
...pretty much everything gets screwed up. When I remove the doctype everything on my page is fine. Why is this and how can I fix this?

NogDog

04-28-2005, 05:41 PM

To start, run your page through the w3.org HTML validator (http://validator.w3.org/) to see if you have any markup errors. After that, if you still have problems, you might want to give us a link to the page in question so we can see the markup (or post the code here if the page isn't available on the web yet).

JayM

04-28-2005, 06:22 PM

I made sure it was valid xHTML before posting. The website is not online yet, but I will post my html code (I will not include my css for the sake of having less code to read. I assume you're only concerned with my xHTML).

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

<html>
// I took out my <head> content for the sake of having less code
<body>

<div id="banner" class="cart"><a href="http://www.blah.com">View Shopping Cart</a>   |   <a href="http://www.blah.com">Checkout</a> 

 </div>

<div id="menu">
<div class="menu">
<img src="C:\Documents and Settings\Miri Web Design\My Documents\MWD\eDida\V2\images\spacer.gif" alt="" /><img src="C:\Documents and Settings\Miri Web

Design\My Documents\MWD\eDida\V2\images\indent.gif" alt="" /><div class="cssnav"><a href="http://www.edida.com" title="home"><img src="C:\Documents and

Settings\Miri Web Design\My Documents\MWD\eDida\V2\images\images\underbutton.gif" alt="Home" /><span>Home</span></a></div>
<img src="C:\Documents and Settings\Miri Web Design\My Documents\MWD\eDida\V2\images\indent.gif" alt="" /><div class="cssnav"><a

href="http://www.edida.com/about" title="About Us"><img src="C:\Documents and Settings\Miri Web Design\My

Documents\MWD\eDida\V2\images\images\overbutton.gif" alt="About Us" /><span>About Us</span></a></div><img
src="C:\Documents and Settings\Miri Web Design\My Documents\MWD\eDida\V2\images\indent.gif" alt="" /><div class="cssnav"><a

href="http://www.edida.com/members" title="Members"><img src="C:\Documents and Settings\Miri Web Design\My

Documents\MWD\eDida\V2\images\images\overbutton.gif" alt="Members" /><span>Members</span></a></div>
<img src="C:\Documents and Settings\Miri Web Design\My Documents\MWD\eDida\V2\images\indent.gif" alt="" /><div class="cssnav"><a

href="http://www.edida.com/shipping" title="Shipping"><img src="C:\Documents and Settings\Miri Web Design\My

Documents\MWD\eDida\V2\images\images\overbutton.gif" alt="Shipping" /><span>Shipping</span></a></div>
<img src="C:\Documents and Settings\Miri Web Design\My Documents\MWD\eDida\V2\images\indent.gif" alt="" /><div class="cssnav"><a

href="http://www.edida.com/disclaimer" title="Disclaimer"><img src="C:\Documents and Settings\Miri Web Design\My

Documents\MWD\eDida\V2\images\images\overbutton.gif" alt="Disclaimer" /><span>Disclaimer</span></a></div>
<img src="C:\Documents and Settings\Miri Web Design\My Documents\MWD\eDida\V2\images\indent.gif" alt="" /><div class="cssnav"><a

href="http://www.edida.com/faq" title="Frequently Asked Questions"><img src="C:\Documents and Settings\Miri Web Design\My

Documents\MWD\eDida\V2\images\images\overbutton.gif" alt="Frequently Asked Questions" /><span>FAQ</span></a></div>
<img src="C:\Documents and Settings\Miri Web Design\My Documents\MWD\eDida\V2\images\indent.gif" alt="" /><div class="cssnav"><a

href="http://www.edida.com/contact" title="Contact Us"><img src="C:\Documents and Settings\Miri Web Design\My

Documents\MWD\eDida\V2\images\images\overbutton.gif" alt="Contact Us" /><span>Contact Us</span></a></div><img src="C:\Documents and Settings\Miri Web

Design\My Documents\MWD\eDida\V2\images\indent.gif" alt="" />
</div>

</div>
<div id="body">
<div id="leftContent">
<br />
<img src="C:\Documents and Settings\Miri Web Design\My Documents\MWD\eDida\V2\images\womens.gif" alt="Womens Handbags and Accessories" />
<br />
<img src="C:\Documents and Settings\Miri Web Design\My Documents\MWD\eDida\V2\images\images\bindent.gif" alt="" /><div class="cssnav2"><a

href="www.edida.com/products/LouisVuitton" title="Louis Vuitton"><img src="C:\Documents and Settings\Miri Web Design\My

Documents\MWD\eDida\V2\images\images\sidebuttonover.gif" alt="Louis Vuitton" /> <span> Louis Vuitton </span></a></div>
<img src="C:\Documents and Settings\Miri Web Design\My Documents\MWD\eDida\V2\images\images\bindent.gif" alt="" /><div class="cssnav2"><a

href="www.edida.com/products/Balenciaga" title="Balenciaga"><img src="C:\Documents and Settings\Miri Web Design\My

Documents\MWD\eDida\V2\images\images\sidebuttonover.gif" alt="Balenciaga" /> <span> Balenciaga </span></a></div><img src="C:\Documents and Settings\Miri Web

Design\My Documents\MWD\eDida\V2\images\images\bindent.gif" alt="" /><div class="cssnav2"><a href="www.edida.com/products/marcjacobs" title="Marc

Jacobs"><img src="C:\Documents and Settings\Miri Web Design\My Documents\MWD\eDida\V2\images\images\sidebuttonover.gif" alt="Marc Jacobs" /> <span> Marc

Jacobs </span></a></div><img src="C:\Documents and Settings\Miri Web Design\My Documents\MWD\eDida\V2\images\images\bindent.gif" alt="" /><div

class="cssnav2"><a href="www.edida.com/products/mulberry" title="Mulberry"><img src="C:\Documents and Settings\Miri Web Design\My

Documents\MWD\eDida\V2\images\images\sidebuttonover.gif" alt="Mulberry" /> <span> Mulberry </span></a></div><img src="C:\Documents and Settings\Miri Web

Design\My Documents\MWD\eDida\V2\images\images\bindent.gif" alt="" /><div class="cssnav2"><a href="www.edida.com/products/gucci" title="Gucci"><img

src="C:\Documents and Settings\Miri Web Design\My Documents\MWD\eDida\V2\images\images\sidebuttonover.gif" alt="Gucci" /> <span> Gucci </span></a></div>

<div id="rightContent">
<table cellpadding="5px" cellspacing="5px">

<tr>
<td><em>eDida.com</em><p>eDida.com is a privately owned company devoted to offering products that provide a unique, timeless style

for anyone who loves elegance, class and beauty. From our Spring collection to Winter collection, we are

committed to constantly changing the designs of the clothing we offer, and providing variety for all

different tastes with items our customers will feel proud wearing, and that can truly reflect their

personality.</p></td>

<td><em>Collection</em><p>We carry one of the biggest collections on the internet, giving you a variety of styles to choose from. Our models

include Monogram, Vernis, Satin, Multicolor, Damier for louis Vuitton. We also carry the famous Le Dix bags carried by many celebrities. Hingir bingir by

Marc Jacobs. Oak and Blue Mulberrys. Gucci Hobo bags and more.</p></td>

</tr>
</table>
<h2> Weekly Specials </h2>
<p class="font"> Louis Vuitton has introduced it's newest model, <em>the Cherry Cerises</em>. It is one of this summer's most popular bags! One of our models

is now on special, the <b>Louis Vuitton Speedy 25 Cherry</b>.</p><br />
<a href="http://www.edida.com/products/louisVuitton/speedy25cherry.html"><img src="C:\Documents and Settings\Miri Web Design\My

Documents\MWD\eDida\Products\Speedy25Cherry.jpg" width="300px" height="225px" alt="Replica LV Cherry Speedy 25" /></a><br />
<p class="product"><a href="http://www.edida.com/products/louisvuitton/speedy25cherry.html">Louis Vuitton Speedy 25 Cherry Cerises</a><br /> $199.99 </p>

<a href="http://www.edida.com/addtocart"><img src="C:\Documents and Settings\Miri Web Design\My Documents\MWD\eDida\V2\images\images\buyitnow.gif" alt="Add

to Shopping Cart" /></a>

<p class="font"> One of Louis Vuitton's most popular handbags, <em>the Monogram Alma</em> symbolizes elegance, class, and beauty. It is one of this summer's

most popular bags! One of our models is now on special, the <b>Louis Vuitton Monogram Alma</b>.</p><br />
<a href="http://www.edida.com/products/louisvuitton/monogramAlma.html"><img src="C:\Documents and Settings\Miri Web Design\My

Documents\MWD\eDida\Products\Alma.jpg" width="300px" height="225px" alt="Replica LV Alma Handbag" /></a><br />
<p class="product"><a href="http://www.edida.com/products/louisvuitton/monogramAlma.html">Louis Vuitton Monogram Alma</a><br /> $199.99 </p>

<a href="http://www.edida.com/addtocart"><img src="C:\Documents and Settings\Miri Web Design\My Documents\MWD\eDida\V2\images\images\buyitnow.gif" alt="Add

to Shopping Cart" /></a>

</div>

</div>

<div id="bottom"></div>
</body>
</html>

ray326

04-28-2005, 11:21 PM

Are all those local file references in the code you've put on the server?

grailquester5

04-28-2005, 11:24 PM

Try adding the second line to your DTD and see if it helps:

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

Also might not hurt to add your encoding (if you know it):

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

MstrBob

04-28-2005, 11:43 PM

Works without a DOCTYPE but not with it? You might be experiencing "Quirks Mode". When some browsers, like IE and Firefox to a lesser extent, come across pages without a DOCTYPE, (and sometimes with a transitional doctype) they render it differently, in what's called "Quirks Mode". The idea being that the rest of the internet can move on, but older pages won't be broken. This, however, seems to have elongated the lifespan of horrid coding practices.

If your website is online, can you post a link to it? It might be the CSS or something else.

Also, note, as stated in the W3C's HTML 4.01 Specification:

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

JayM

04-29-2005, 02:06 PM

Works without a DOCTYPE but not with it? You might be experiencing "Quirks Mode". When some browsers, like IE and Firefox to a lesser extent, come across pages without a DOCTYPE, (and sometimes with a transitional doctype) they render it differently, in what's called "Quirks Mode". The idea being that the rest of the internet can move on, but older pages won't be broken. This, however, seems to have elongated the lifespan of horrid coding practices.

If your website is online, can you post a link to it? It might be the CSS or something else.

Also, note, as stated in the W3C's HTML 4.01 Specification:

I did not use tables to layout my webpage. I will upload the webpage online very shortly. First I will try all your suggestions and see if that works. If not, I will post a link. The only reason I did not want to upload it for this client yet is because it is not finished so I would not want to mislead customers into thinking they could buy products.

The page will be uploaded shortly.
Thanks for the input.

JayM

04-29-2005, 02:30 PM

Ok. I have uploaded the page. I kept the css in the code so you can view it as well (rather than having an external file that you have to download).

Here is the page with the DOCTYPE (www.edida.com/doctype/doctype.html)

Here is the page with NO DOCTYPE (www.edida.com/nodoctype/nodoctype.html)

I know the 2 products are not centered in the 'no doctype' page. I just haven't coded that part...

What do you guys think is going wrong?

grailquester5

04-29-2005, 04:59 PM

Honestly, I think it is your CSS. I just finished reviewing it, and as far as the left navigation section goes, I couldn't understand what you were trying to accomplish. I think using the "strict" DOCTYPE is giving you the correct output - having "no" DOCTYPE is giving you a "transitional" DOCTYPE which is a bit more forgiving. Try changing the "strict" to "transitional," and I bet the page will display the same as if you'd left the DOCTYPE out entirely - which points to your CSS & HTML content structure...

ray326

04-30-2005, 12:03 AM

I think using the "strict" DOCTYPE is giving you the correct output - having "no" DOCTYPE is giving you a "transitional" DOCTYPE which is a bit more forgiving.Well there's more to it than that. Have NO doctype doesn't give you "transitional", it gives you "quirks."

grailquester5

04-30-2005, 01:18 AM

Thank you ray326, you are in fact quite correct - my mistake on that one.

Fang

04-30-2005, 04:34 AM

The DTD is not valid (http://www.w3.org/QA/2002/04/valid-dtd-list.html)

background: url('/images/bgpic.jpg') repeat-xy;
A:link lowercase in xhtml

xhtml page served as text/html
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

Page looks like xxxx in FF

JayM

04-30-2005, 01:10 PM

JayM

04-30-2005, 01:21 PM

Weird. My document only works with the following DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

if I add "http://www.w3.org/TR/html4/loose.dtd" to the doctype line it doesn't work anymore. Is that line really necessary?

My page validates as xHTML. Why wont the browser accept it?

I have not yet checked my page on all browsers. I will get to that. Right now my main concern is IE.

Fang

04-30-2005, 01:35 PM

JayM

04-30-2005, 02:04 PM

As ray326 pointed out, you place IE in 'quirks mode' when using an invalid DTD. Therefore it uses a different box model (http://www.w3.org/International/articles/serving-xhtml/#quirks). If you want the site to look the same in FF you must use a valid DTD; 'standards mode'

Hmm. Let me see if I have this down. From what I understand, Quirks mode is when a webpage does not include a doctype, and is not written according to the W3C standards. Standard mode is when a webpage has a doctype, and is written according to the W3C standards.

Note that your page does not have to validate according to the chosen doctype, the mere presence of the doctype tag is enough to trigger strict mode.

My page is a CSS layout and validates as xHTML and CSS. This would mean that the proper doctype is STRICT.

So, it should be in standard mode, correct?

--------

Ok the above is what I posted before I solved my problem. I'm sure this would help others, so I will post it here.

Explorer Windows special: the xml prolog
In Explorer 6 Windows, Microsoft implemented one extra rule: if a doctype that triggers strict mode is preceded by an xml prolog, the page shows in quirks mode. This was done to allow web developers to achieve valid pages (which require a doctype) but nonetheless stay in quirks mode.

This is the xml prolog. You should put it on the very first line of your document, before the doctype.

<?xml version="1.0" encoding="iso-8859-1"?>

That was my problem. Everything was correct, but I didn't have that line above in my document, which ultimately caused it to display in Quirks mode :mad: . Problem solved.

Thanks everyone for the help. I appreciate it.

Jay

Charles

04-30-2005, 02:22 PM

Hmm. Let me see if I have this down. From what I understand, Quirks mode is when a webpage does not include a doctype, and is not written according to the W3C standards. Standard mode is when a webpage has a doctype, and is written according to the W3C standards.

My page is a CSS layout and validates as xHTML and CSS. This would mean that the proper doctype is STRICT.

So, it should be in standard mode, correct?

--------

Ok the above is what I posted before I solved my problem. I'm sure this would help others, so I will post it here.

Explorer Windows special: the xml prolog
In Explorer 6 Windows, Microsoft implemented one extra rule: if a doctype that triggers strict mode is preceded by an xml prolog, the page shows in quirks mode. This was done to allow web developers to achieve valid pages (which require a doctype) but nonetheless stay in quirks mode.

This is the xml prolog. You should put it on the very first line of your document, before the doctype.

<?xml version="1.0" encoding="iso-8859-1"?>

That was my problem. Everything was correct, but I didn't have that line above in my document, which ultimately caused it to display in Quirks mode :mad: . Problem solved.

Thanks everyone for the help. I appreciate it.

Jay
You've got that backwards. What triggers standards mode is a correct DOCTYPE at the very start of the page. Using an XML declaration means no DOCTYPE at the start of the page and hence not standards mode. What might be confusing is that you seem to want quirks mode.

JayM

04-30-2005, 04:05 PM

You've got that backwards. What triggers standards mode is a correct DOCTYPE at the very start of the page. Using an XML declaration means no DOCTYPE at the start of the page and hence not standards mode. What might be confusing is that you seem to want quirks mode.

Thanks for the clarification, Charles. Would you be able to tell me what doctype is correct then?

Charles

04-30-2005, 04:29 PM

What version of HTML or XHTML are you using?

grailquester5

04-30-2005, 06:03 PM

JayM,

Your DOCTYPE is correct for XHTML strict. That's why it validates on the W3C validator (www.w3.org). What's weird is the FIRST time I ran it, it didn't validate. The second time I ran it, it did... although NOTHING had changed. Maybe someone has seen that happen before? (First time for me...)

Fang

05-01-2005, 04:13 AM

What's weird is the FIRST time I ran it, it didn't validate. The DTD has been changed!

grailquester5

05-01-2005, 11:53 AM

The DTD has been changed!

I didn't mean now - back in the first few posts of this thread. I thought it was just a quirk - went to w3.org, ran the validator on JayM's site, got an invalid DTD, reviewed it, didn't see anything wrong with it, ran the validator a second time on his site, and it checked 4.0. All this in the span of about 3 minutes... Maybe it was just a quirk...

Fang

05-01-2005, 01:08 PM

So do I, the DTD was changed early in the thread and it still doesn't validate.

JayM

05-01-2005, 01:45 PM

Yea, sorry. I was experimenting with the DTD to see if it works with different doctypes. I'm using STRICT xHTML 1.0.

Doctype has been changed back to strict xHTML.
The document validates as strict xHTML.
The document validates as CSS.

grailquester5

05-01-2005, 06:07 PM

Just noticed one thing that changed a lot - in your "body {" CSS declaration, you've got "body { background: url(...) repeat-xy; }". That's not proper syntax - if you want to repeat in both axes, it's just "repeat;". When I changed that on your souce code, I got the header, body background, everything - to show up... still working on a few other problems though...

By the way that's on the "XHTML Strict" DOCTYPE...

grailquester5

05-02-2005, 01:20 AM

JayM

05-03-2005, 06:11 PM

Add to that the fact that you have floats declared in several places, but you never clear them. Check this out - change the "float: left" in your #leftContent division to "clear: both" and watch what happens...

Hmm. The background and everything seems to work. Now it's a problem of aligning the rest. Thanks for the help. I'm continuing to work on it see how I can fix it.