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.
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.
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.
Related
I have a website here that works terrific and displays fine in IE 10 and IE 11 but anything below that takes the whole display and forces it to the far left of the screen instead of centering the content area. I can't seem to find where to adjust this in CSS. Can you please tell me a good way to fix this in IE 8 without "breaking" newer versions?
The main thing that catches my eye is that the should always be the very first line of your html. If you move this line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
to the very top... that should help with many of the errors.
You might also consider trying simply
<!DOCTYPE html>
Since I don't have anything that still uses IE8 on it, I can't say for sure if that will fix everything, but it's a good start. For what it's worth, I checked your site on Safari and Firefox, and it appears to work okay. So I'm guessing IE8 has issues with the doctype not being in the correct spot.
One more thing... there are three lines at the top of your page - title, and two meta tags. Those belong inside the <head>, not at the top.
This question already has answers here:
Does <STYLE> have to be in the <HEAD> of an HTML document?
(10 answers)
Closed 9 years ago.
So first off, I know that the <link> tag to link a CSS external style sheet should be in the <head> section, and that it is very unorthodox to place it outside the head.
However, I am using head and footer includes for modular web design, and there are some CSS stylesheets which apply to certain pages and not others.
Having placed some <link> tags within the <body> section of a certain page, thanks to the sweet accommodation of modern browsers I have so far experienced nothing wrong except in IE.... but, personally I don't care too much about IE at the moment.
So, apologies to the HTML purists, but I must ask: what negative consequences are there for linking CSS external stylesheets outside of <head>?
In my research, people have usually just stuck to referencing w3schools as stating "link your CSS stylesheet in the head", but not elaborating too much on why: Do <link href=""> tags only go in the <head> tag?
"Validity" is given as one answer, but what does that entail? Search engine friendliness? I don't see any benefit to me if search engines read my stylesheets or not...
Quoted from the HTML 4.01 Specification
This element defines a link. Unlike A, it may only appear in the HEAD section of a document, although it may appear any number of times.
The HTML5 specification however does not mention the tag must appear in the HEAD section. So if you use them inside the body make sure you use the HTML5 DOCTYPE e.g.
<!DOCTYPE html>
The HTML5 specification states the following.
A link element must have a rel attribute.
And also
Note
If the rel attribute is used, the element is restricted to the head
element.
<Link> element defines the relationship between the current document and another resource i.e. style sheet.
<head> tag is the container for all head elements like script,link, title and meta tags. These head elements are not being displayed in the document when viewed in browser.
We can place the <link> elements in the body section also but we can't place the other html elements in the <head> section. For example if include <a> element in the <head> section then we can't view i in browser as it's not part of the document <body> section.
Best practice is to keep the <link> elements at the top of the document i.e in <head> section so that all elements which has styles in style sheet will get applied before loading the page itself. If we keep <link> at the bottom or middle of the <body> section then document will display all the content first and styles will get applied later.
I'm having some trouble with a site, and the hover state of the menu on the homepage with ie7 and ie8.
For some reason despite the z-index it hides behind the object flash box.
Can anyone take a look at my URL and see if you can suggest a fix. It's really got me puzzled. Only happens on the homepage because the menu seems to hide behind the flash video object.
url: http://yellowtulipcomms.com
Try adding the following to the flash embedding code:
<param name="wmode" value="transparent"/>
My first suggestion would be to use full doctype declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
IE is very sensitive when it comes to calculating positions and dimensions without a proper doctype. This is something I have learned the hard way.
Addendum:
Also try using zoom:1 value in css rules. I can't test it on your site but I remember it helped with positioning in IE.
Why are iframes declared as a non-standard elements? It is useful.
Is it allowed in XHTML 1.1, or should we use a frameset doctype if we use iframes?
An iframe is a method of displaying another html document inside a frame on a webpage. The w3 is moving towards making all external files to be displayed in an html document done with the <object> tag. This includes applets, flash movies, even images. Iframe's deprecation isn't because the idea of having an html file displayed in a "frame" is bad, it's deprecated because there's now a "better" method of doing the same thing.
Iframe is completely dropped in XHTML 1.1, so it will probably not display. Iframes are valid in the non frameset doctypes that support them, but changing the doctype can sometimes change how it's displayed due to some bugs <cough> internet explorer </cough>.
Since support for iframes and the <object> tag is sketchy in many browsers, its best to test code using either of them carefully to make sure if behaves in the major browsers.
see replacing iframe with object in xhtml 1.1
Because it's ugly and nobody wants multiple sets of scrollbars in their pages.
You can use the object. (http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.5)
<object id="page" type="text/html" data="page.htm" width="500" height="600">
<p>Oops! That didn't work...</p>
</object>
These elements are not supported in HTML 5 but are supported in XHTML:
acronym big tt
In the future, when I will change my doctype to html 5, then will I not need to replace or change any code to pass validation?
this is also accepted as valid code in an attempt to ease the pain for avid XHTML coders (like myself) who are used to self-closing elements:
<tag type="type" id="name"/>
The same rules apply to <meta> and other self closing elements.
Is it a good idea to avoid HTML 5 unsupported tags, If I am using XHTML 1.0 Strict now?
Yes, it would be a good idea to plan ahead for HTML5 support. Check here for a list of deprecated tags and attributes to avoid.
As far as XHTML syntax (always closing tags, self closing tags, etc) you can continue to use that without worry. HTML5 can be written using standard HTML syntax or XHTML syntax, though it always remains just HTML.