HTML Doctype differences

I've been creating a website in ASP.net using the default template in vs2010 with a Site Master. I'd been getting strange results where an image with a span under it would not line up as they always had whitespace between them. I spent hours looking at the markup and finally created a plain .htm file out of desperation and copied my html into it. To my suprise this actually worked so after another hour of comparing the differences I noticed that the template creates the site.master with

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

Whereas it creates the .htm file with

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

Can anyone explain the difference between Strict (Which causes errors in my layout) and Transitional (Which means the layout is as I expect) and if using Transitional in my aspx pages will cause me any future difficulties down the road?

I do have a warning in VS that states

validation (xhtml 1.0 transitional): element 'h2' cannot be nested within element 'span'

I guess this could be the source of the error when using Strict but I'm not sure how to get around it.

Edit: Here is the block in question that is causing the error

<a href="http://somelink.com">
    <img src="Images/test.png alt="Test" />
    <span class="Styling for hovering">
        <h2>
            Test
        </h2>
        <p>
            This Is A Test
        </p>
    </span>
</a>

I'm trying to create a link that is activated by the image and the text below it. I want to hold the text in a container. That containers background will change when it's hovered over. I also set a fixed size for the span. This is the main reason I need some kind of container around them.

Answers


The short answer?

Traditional = Allow old school deprecated HTML tags like <font>, <center>, <s> and be very forgiving about things in HTML that we're not supposed to do anymore.

Strict = Use css to replace most of those tags, and enforce the rules the way the W3C defines.

The long answer: You can read through the 25+ page specifications for each of the HTML spec types from the W3C, but if you're creating new pages you should probably try to stick to XHTML 1.0 Strict since it's the hip cool wave of the future and Transitional gives some graphic designers the heebie jeebies. :)

W3schools has a pretty good breakdown of what each type means more or less:

XHTML 1.0 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

XHTML 1.0 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.


Regardless of which DOCTYPE you use you cannot place a block level element (<h2>) inside of an inline element (<span>). That's why you're getting that error. Since <span> is typically used for styling I suspect you could remove that <span> and use CSS to style the <h2> to appear however you desire.


Need Your Help

libgdx drag and drop

java libgdx

Im trying to add drag and drop functionality to several images in Libgdx. I have looked at this example: https://github.com/libgdx/libgdx/blob/master/tests/gdx-tests/src/com/badlogic/gdx/tests/

inspect jquery-ui autocomplete list with google chrome?

jquery jquery-ui google-chrome autocomplete

I am using the jquery ui autocomplete, I am overwriting the _renderItem method.