0

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!

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Johan
  • 35,120
  • 54
  • 178
  • 293
  • There's a very similar question here: http://stackoverflow.com/questions/7801470/ie-support-for-attribute-selectors-with-html5-doctype What versions of IE are you testing in? 7, 8, 9? They're all supposed to recognize attribute selectors with a doctype. – BoltClock Nov 17 '11 at 10:12
  • @BoltClock sorry, forgot to mention that im testing in ie7 & 8 – Johan Nov 17 '11 at 10:17
  • I think the problem in this case is that the page runs in quirks mode as default for some reason – Johan Nov 17 '11 at 10:19
  • OK, now I'm confused. Are you already using such selectors in your CSS? Do they work now or not? – BoltClock Nov 17 '11 at 10:30

2 Answers2

2

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.

duri
  • 14,991
  • 3
  • 44
  • 49
  • The OP is saying it was originally rendering in almost standards mode, with advanced selectors being supported, but no longer with the HTML5 doctype. Except, the HTML5 doctype was created **so that** IE would **not** render in quirks mode. – BoltClock Nov 17 '11 at 10:23
  • @BoltClock I don't see your point. If application works with HTML 4.0 Transitional doctype without URL, it's definitely optimized for quirks mode and this has to be changed. I can't see where OP said that "it was originally rendering in standards mode". – duri Nov 17 '11 at 10:26
  • Oh I get it now, I completely missed that it wasn't pointing to a URL. – BoltClock Nov 17 '11 at 10:31
  • 1
    @BoltClock - For future reference - `-//W3C//DTD HTML 4.0 Transitional//EN` always causes quirks mode, with or without a URL. `-//W3C//DTD HTML 4.01 Transitional//EN` causes quirks mode only if the URL is missing. - see: http://dev.w3.org/html5/spec/tree-construction.html#the-initial-insertion-mode – Alohci Nov 19 '11 at 17:34
0

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.

lalibi
  • 3,057
  • 3
  • 33
  • 41