OK folks,
So I have a valid XHTML 1.0 Strict webpage. I'm aware of the differences between XHTML and HTML, but, what are the differences between XHTML and HTML 5?
Would a 'conversion' be as easy as changing the Doctype, and it would all still validate OK?
Or, are there markup differences that would need to be changed first?
Thanks!
Jack
To summarize this post and this post...
All you need to do to start taking advantage of the benefits of HTML5 is to convert your doctype from XHTML to HTML5. HTML5 is compatible with XHTML.
If you want to introduce new HTML5 tags, you will also want to add a polyfill like Modernizr so that Internet Explorer can figure out how to render the new HTML5 elements.
Related
I'm trying to get this (simple) webpage done for my assignment and it needs to pass through http://validator.w3.org/
It also needs to use RDFa. However no matter what I do, the RDFa vocab never gets passed by the validator.
Here's what I got:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML+RDFa 1.0//EN' 'http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd'>
<body vocab="http://xmlns.com/foaf/0.1/">
What am I doing wrong?
The vocab attribute is defined in RDFa 1.1, but with your current DOCTYPE, you are using RDFa 1.0.
Your options:
Keep using XHTML 1.1 and RDFa 1.0, and use the xmlns:… attribute(s) instead of the invalid vocab attribute:
<body xmlns:foaf="http://xmlns.com/foaf/0.1/">
(Then you have to use the prefix foaf:.)
Keep using XHTML 1.1, but switch to a DOCTYPE that supports RDFa 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.1//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-2.dtd">
Switch to XHTML5, which supports RDFa 1.1 by default:
<!DOCTYPE html>
Do you really have to use XHTML? I would recommend to use an HTML5 doctype. http://www.w3.org/TR/html-rdfa/ has some examples.
Also, make sure you use the NU validator from W3C: https://validator.w3.org/nu/ - the one you are using is old and should no longer be used.
Im writing html and css in an old web application that is using the following doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
If i change it to html5 doctype, the menu wont work. My problem is that i cant use some css selectors, like
input[type="radio"]
for instance. But this obviously works with the html5 doctype. Any possible solutions for this? Thanks!
The doctype you mentioned (HTML 4.0 Transitional without URL) triggers quirks mode. This causes that Internet Explorer's rendering is similar to IE5. Your website works fine in quirks mode probably because it's optimized for such old versions of IE: for example, it may assume the border-box box model. Naturally, you cannot use more complicated CSS selectors because IE5 didn't support them. The solution is to rewrite the code for standards mode rendering. The usual approach is to develop the application with HTML5 doctype in standards-compliant browsers like Firefox, Chrome or IE9 and then try to fix bugs that can appear in older versions of Internet Explorer.
I've solved many of my problems with selectors and previous IE version by just including this javascript library (it needs jQuery or some other library to work):
http://selectivizr.com
It worths a shot.
selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes
and attribute selectors in Internet Explorer 6-8.
The page not working in IE8 is http://gainntrain.com/shopping/index.php
It IS working chrome and firefox...
This page loads from CubeCart, but the page I edited to alter the skin http://gainntrain.com/shopping/skins/KitaBlue/styleTemplates/global/index.tpl
That page has the same problem in IE8
The thing I don't understand is that the same header works fine on other pages of the site in IE8
Changed the <header> and <nav> tags to divs with classes using the styles that the tags had and that seems to be handling it just fine so thanks for the answers!
Look at
Validator
and
Jigsaw
Notice that the only errors in Jigsaw are CSS3 rules.
I would suggest looking at the HTML because of this line in Validator's analysis of your page
Line 11, Column 107: end tag for "link" omitted, but OMITTAG NO was specified
…="http://www.gainntrain.com/site/css/style.css" type="text/css" media="screen">
✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
It looks like your document is using HTML5 features but is using an older doctype declaration. I would suggest changing:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
to:
<!doctype html>
<html>
That is as long as it doesn't break the site. :]
Try an online HTML validator on the output, like this one. If you choose the right validator, it's likely to be able to pick out the sticky bits that work better in some browsers than others. Sifting through code by hand to find a solution like this is difficult and time-consuming.
I'm really struggling with a page that looks great in Firefox and Chrome, but looks like absolute crap in IE.
I am clearly missing something, but I am not extremely familiar with the compatibility issues between browsers when it comes to CSS. Can anyone give me a tip?
Page with the issue.
the index page looks fine! which really is throwing me for a loop...
Thanks in advance
Your page has no doctype, so IE is falling back to quirks mode.
Try adding this above the html tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
First of all this is a malformed HTML <head> <body> </head> <body>, make it <html> <head> <scripts .../></head> <body> </body></html>. This will make your second page look like first one.
I added an XHTML DTD to fix the center alignment
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">. This will make your first page also look more like chrome and Firefox.
Finally you are using HTML5 tags <header> and <nav>. HTML5 is not fully supported in IE, firefox chrome supports it partially. I would rather be skeptical in using them now or at least test in all browsers. Although I see you have added one js for simulating HTML5 in IE. Put that js before body. But its interesting how it simulates HTML5 :).
Are you using a CSS reset? This is the CSS reset I'm using: http://meyerweb.com/eric/tools/css/reset/ but there are other variations that are useful too.
Will help fix most browser incompatibility issues. ;)
Hii,
I'm using the DOCTYPE is DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
I have set the overflow property of the div is not working in IE 6 but it is taking in IEs higher versions
i.e. I have set like this
<div style='overflow-y: scroll; overflow-x: hidden; height: 370px'></div>
A quick Google search indicates that the overflow property is buggy in IE6. Have you tried either "auto" for either overflow-x and overflow-y?
Unless you're working on a business app that's only compatible with IE6. why are you supporting this version of the browser?
If it works with HTML doctype I’d suggest using plain HTML instead of XHTML. XHTML on the web is mostly broken and unless you really need it (which I doubt), you’d save yourself trouble. For example the HTML5 doctype works as expected in all browsers and you can actually remember it:
<!DOCTYPE html>