Rant: Microsoft madness
in [CSS]
|
From: Andy Dingley on 6 May 2008 09:38 On 6 May, 13:45, DuncanIdaho <Duncan.Idaho2...(a)googlemail.com> wrote: > IE7 is RUBBISH when it comes to css, at least in my experience. It's merely "poor" on CSS, only "rubbish" if you ask it to work with non-conformant HTML & CSS. Mostly it gets it wrong in the areas around error correction. Code perfectly (which isn't _that_ hard) and you'll avoid the majority of the problems. If you feed it only a broad subset of CSS, omitting those few aspects that just don't work at all, then you might even get its performance up to "good", or at least "acceptable". A few years ago it was necessary to do bad and evil coding hacks to get things to work at all. Things have improved since then - now we can work just by being careful and avoiding a few problematic areas, we don't have to actively abuse the code to get it to work. Also forget about obsessions with, "Must look identical everywhere, on every browser". That's a bad idea for starters.
From: GTalbot on 7 May 2008 13:20 On 7 mai, 06:56, rf <r...(a)x.invalid> wrote: > DuncanIdaho <Duncan.Idaho2...(a)googlemail.com> wrote innews:DLednSzGep-e-7zVRVnyjgA(a)bt.com: > > > <?xml version="1.0" encoding="UTF-8"?> > > The above line puts IE into quirks mode. Richard, Duncan is using IE 7 and that xml-declaration triggering quirks mode was fixed in IE 7. " Details on our CSS changes for IE7 Details on some of the other bugs (from sources other than the positioniseverything.net list) that we fixed: (...) <?xml> prolog no longer causes quirks mode " http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx Regards, Gérard
From: Henry on 7 May 2008 13:29 On May 7, 9:18 am, DuncanIdaho wrote: <snip> > Not sure what you mean by 'quirks mode' > > I have this > > <?xml version="1.0" encoding="UTF-8"?> > <!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"> > > Is that what you mean ? Why are you using XHTML-like mark-up with a browser (IE) that does not understand XHTML at all? > Anyway, I'm not convinced by all this error handling stuff. > > Case in point > > I am applying a style to leaves in my navigation tree that is > generated on the fly by javascript via an AJAX call to a back > end servlet. > > I have two possible classes of hyperlink in my tree 'node' > and 'leaf' I have a default style that is applied to anything > that isn't a leaf, if it's a leaf I want to apply a different > style. > > in my stylesheet > > a.leaf{ > text-decoration: none; > color: rgb(254, 100, 253); > font-size: 0.75em; > > } > > I have the following in my javascript > > textanchor.setAttribute("class", nodeType); Internet Explorer has lots of bugs in relation to its - setAttribute - method, particularly in this case one where it expects to be given the (case sensitive) name "className" when it is being asked to set the CLASS attribute, but that will do nothing useful on any other browsers. You get round this problem when scripting HTML DOMs (but not XHTML DOMS) by using the W3C HTML DOM specified properties of Elements that correspond with attributes. In this case the - className - property. I.E.:- textanchor.className = nodeType; If you really were using XHTML (rather than just suffering from the delusion that you are using XHTML) you would have needed to use the namespace qualified version of the - setAttribute - method (- setAttributeNS -) in order to get effective outcomes in more than a couple of browsers. As IE does not recognise XHTML, and does not provide any of the namespace qualified methods (as they are not needed in an HTML DOM) using that method will not influence IE's buggy handling of attribute setting. > the result (in firebug) looks like this (fragment) > > <span> > <a class="node" href="javascript:getMenuUpdate('1')">Jewellery</a> ^^^^^^^^^^ Never ever use a javascript pseudo-protocol HREF with IE (at least all version up to and including 6), if someone clicks on that and the result does not navigate away form the current page then all bets are off as to how IE <= 6 will behave afterwards (especially with regard to image handling). > </span> > <br/> > <span> > <a class="leaf" href="products?catagoryId=1:1">Earrings</a> > </span> > > This works perfectly in Firefox and Opera and any other non IE > browser I care to test it in, leaves are rendered in pink and > nodes are rendered in my default style(sky blue). In IE the > browser ignores anything but the default style... error > handling, I don't think so. If the technique you were using to set the CLASS attribute was ineffective the symptoms you describe could be explained by that. > I have tried all sorts of thing to get this to work to no avail. > It just doesn't work in IE Given how well-known IE's problems with - setAttribute - are I assume that one of the things you did not try was learning browser scripting before inflicting it on customers/clients/visitors/users. > ... just one example BTW, I have many others. With the pseudo-protocol HREF on the page that is not at all surprising.
From: GTalbot on 7 May 2008 13:41 On 6 mai, 08:45, DuncanIdaho <Duncan.Idaho2...(a)googlemail.com> wrote: > Recently I was given the task of setting up a website from scratch > including the front end. > > I chose Opera(V9.27), Firefox(V2.0.0.n) and Internet Explorer(V7.0) as > my dev browsers as these were the ones used by the eventual users of the > site. > > What a nightmare. Duncan, If you want precise help, contextual help, first make sure your webpage passes markup validation, also passes CSS validation and then provide an URL where the problem occurs along with a short, clear description of the problem. Why we won't help you "Validation may reveal your problem. (...) Validation may solve your problem." http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you I also fully agree with those saying to stop catering for IE 6 users. IE 6 is just too buggy in my opinion. Some recommendations: 1- avoid setAttribute because it's buggy in IE 7; use DOM 2 HTML methods instead 2- avoid relying too much on float: it's very buggy in IE 7 3- consult this page for CSS webpage templates which will work in IE 7: http://www.gtalbot.org/NvuSection/NvuWebDesignTips/WebDesignResources.html#CSSWebpageTemplates You coded: textanchor.setAttribute("class", nodeType); Use instead textanchor.className = nodeType; <span> <a class="node" href="javascript:getMenuUpdate('1')">Jewellery</a> </span> javascript: pseudo-protocol should never be in href attribute. This is a commonly seen error in accessibility.An href should always referenced a retrievable resource on the web. Always. Otherwise, it will create problems for those with javascript support disabled or inexistent. As coded, your <a> is not compliant with basic accessibility guidelines. Useful reading for general web development: Using Web Standards in your Web Pages http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages Web development mistakes, redux by Roger Johansson http://www.456bereastreet.com/archive/200408/web_development_mistakes_redux/ Truth & Consequences of web site design by Chris Beal. 14 well written articles on very frequently encountered mistakes on web design and how to correct them. I highly recommend these articles to beginners. http://pages.prodigy.net/chris_beall/TC/index.html a.leaf{ text-decoration: none; color: rgb(254, 100, 253); font-size: 0.75em; } Using font-size: 0.75em; is demanding to the browser to set the font-size to 75% of the preferred normal size for the user! This is NOT what I would do. Web standards checklist by Russ Weakley. http://www.maxdesign.com.au/presentation/checklist.htm In 44 items, Russ covers all the issues a web designer required for a web designer to create web standards compliant websites. Just excellent! (for beginners and intermediates) Regards, Gérard -- Internet Explorer 7 bugs (130 bugs so far) http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/ Internet Explorer 7 bugs (79bugs so far) http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
From: GTalbot on 7 May 2008 14:14
On 6 mai, 08:45, DuncanIdaho <Duncan.Idaho2...(a)googlemail.com> wrote: <a class="node" href="javascript:getMenuUpdate('1')">Jewellery</a> Duncan, To be more thorough, accurate on that issue...: "javascript:" links break accessibility and usability of webpages in every browser. * "javascript:" pseudo-links become dysfunctional when javascript support is disabled or inexistent. Several corporations allow their employees to surf on the web but under strict security policies: no javascript enabled, no java, no activeX, no Flash. For various reasons (security, public access, text browsers, etc..), about 4% to 8% of users on the web surf with javascript disabled. * "javascript:" links will interfere with advanced features in tab- capable browsers: eg. middle-click on links, Ctrl+click on links, tab- browsing features in extensions, etc. * "javascript:" links will interfere with the process of indexing webpages by search engines. * "javascript:" links interfere with assistive technologies (e.g. voice browsers) and several web-aware applications (e.g. PDAs and mobile browsers). * "javascript:" links also interfere with "mouse gestures" features implemented in browsers. * Protocol scheme "javascript:" will be reported as an error by link validators and link checkers. Regards, Gérard |