Re: [WSG] A Holiday Treat from PVII
Looking at the demo page, it looks like authors would be better using a faux-columns technique which would also remove the need for polling. Or is there a better reason to go the JS route? -- Thierry On Dec 21, 2011, at 1:02 PM, Al Sparber wrote: Happy Holidays from PVII Save time this holiday season with a free productivity booster from PVII Equal Height CSS Columns Learn how to make your CSS columns automatically adjust to the height of the tallest column in just a few minutes. This free productivity booster includes a tutorial, and a bonus 3-column CSS layout all decked out for the holidays with rounded corners and inset shadows! Instead of using background images, CSS hacks, or CSS that is not yet supported by all browsers, PVII Equal Height Columns uses modern DOM Script to work its magic. Go to Tutorial: http://www.projectseven.com/tutorials/css/pvii_columns/index.htm Key Features Supports dynamic content height If the height of any column ever changes, PVII Equal Height Columns will make all necessary adjustments—instantly. The script monitors your page every few milliseconds to see if the height of any column needs adjustment. Your column height will always be perfect. If your page includes a panel widget (like an accordion) that causes column height to change when you move from panel to panel, the system will adapt to the new height seamlessly. Deploying PVII Equal Height Columns Deployment is as easy as linking the PVII Equal Height Column script and assigning a class to a set of columns. Nested Groupings You can deploy the PVII Equal Height Columns script on your outer column structure, as well as column structures nested inside. Best Regards, -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] image substitution
I think my only option is to generate an image for the banner using the right font (or is there a better option?). What is the current best practice for having an accessible text banner, while showing the image based banner? Are we still using the trick of shifting the text off the side of the screen with negative positioning? Or is there a better, more accessible way? Negative text-indent is a problem if images are off and background images are also a problem with high contrast mode. You could try something like this: http://tjkdesign.com/articles/tip.asp Or like Kepler suggested, just use the alt attribute of the image. -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] IE issues: display none vs absolute position for show/hide effect
Hi Tee, #mini-cart {position:absolute; width:300px; overflow: hidden} I didn't follow the whole thread, but seeing the above I have a suggestion: Try an explicit left value (i.e. left:0;) as IE is known to need that in many cases. -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] What kind of unit is _qem ?
I see this unit being used with margin for example, in Mozilla and WebKit styles sheets, but I can't find any reference to it. Looks like it is mostly use to declare vertical values (top, bottom, before, after). Any clue? Thanks -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] What kind of unit is _qem ?
This question has come up on CSS discuss in the past. http://archivist.incutio.com/viewlist/css-discuss/104705 One answer: I believe qem stands for quirky em and is a proprietary Webkit syntax used to refer to a margin which can be collapsed when the page is in quirks mode. Thanks a lot Russ. Also, it does not seem to appear in the Moz styles sheet, even though I thought I've seen it in there. How weird is that! Yes, that's weird. I'm not even sure why they'd do that unless quirks mode prevents margin collapsing and would create extra space(?). Just guessing, I have no clue. -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Short CSS Quizz/Survey
http://www.surveymonkey.com/s/SNMWNW2 Give it a shot! -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Title tags - site name then keywords?
When it comes to search engine optimisation, Stop. Build sites for people, not robots. Search engines are optimising to find the best sites for people, aim for the same target as they are. +1 -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Horizontal Menu Bar Help Needed
Hi Emily, Thank you for your reply as well. I will check into http://webdesign-L.com/. Before you post to that list, make sure to check this page: http://webdesign-l.com/policies/ and obey the *rules* Regarding how-to keep navigation state, you could try this: http://www.tjkdesign.com/articles/navigation_links_and_current_location.asp -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] question about screen reader behavior when pulling in content via Ajax fetch
Screen readers doesn't process javascript, so no AJAX requests will be made. I don't think so. There are a couple of good article from Gez Lemon and Steve Faulkner about Ajax and SRs: http://juicystudio.com/article/making-ajax-work-with-screen-readers.php http://juicystudio.com/article/improving-ajax-applications-for-jaws-users.php -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Mobile testing methods or emulators
Thanks for the answers. I think the media queries could be the way to go. I'll give it a try. Did you try to download the SDKs? I installed the IOS Simulator and it works well (runs faster though). -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Anchor won't position in IE 8
Here's the page in question: http://www.koisis.com/.clients/vascos/dev/facilities.htm Anchor tag (View Gallery) is in the div with the Image to Come image. If you look at this link in FF (et. al) you'll see it's positioned correctly. Now switch to IE 8 (probably ie 7 as well) and you'll see that it's positioned outside and to the bottom of the div. What's also really weird is that IE is also NOT respecting other css attributes I've given to this anchor (size, text-decoration, etc). Try this: #intro_image {position:relative;} -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] HTML5: bulletproofing
I don't know if many people have adopted this approach yet, but I wrote something about the potential issues: http://www.css-101.org/articles/thoughts_on_the_new_html_elements_and_surrog ate_divs/ Any and all feedback welcome. -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?
An alternative to get the first dd in a dl: :first-child + dd { ... } That would not be a sure thing as this could match a dt too -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?
An alternative to get the first dd in a dl: :first-child + dd { ... } That would not be a sure thing as this could match a dt too Scratch that, I didn't have my coffee yet ;) -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?
The :first-child pseudo-class represents an element that is the first child of some other element.. I have often used li:first-child or li a:first child in different section of a page, why is that I can get the first-child in, say, #hdr li:first-child .sidebox li:first-child (and it applies to all sidebox sections) .sidebox li ol:first-child, #content h2:first-child In a typical 2 columns layout, in content area, there are a number of h2 in different sections and there is no first-child declared but h2, but I can never get h2:first-child works yet #hdr li:first-child and .sidebox li:first-child work. This is still a bit confusing, is that means #hdr li:first-child (which is not wrapped inside #content) considers the first child of some other element for the entire page? If yes, why is that the .sidebox li ol:first-child and .sidebox li:first-child still work? Can you style the h2 using #content h2 {} (to confirm that these headings *are* children of #content) If that works then go with: #content h2:first-child {} -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] looping and inputs
HI Nancy, We have a situation where there is a checkbox within a loop, there could be 1 to as many as 50 instances depending on the results of a query. The id is checkbox and and is needed to remain the same for dynamic reasons according to the engineer. If they need something that remains the same, then they should use a class for that. Therefore won't validate. Imho, validation is less an issue than the fact that it won't be possible to associate labels with these checkboxes. -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] screen reader friendly and keyboard accessible popup?
With Collapsible, it's largely a UI/Design choice, structurally, the content in it is part of the main content, it's just a simple show/hide that makes good use of space, and apart from button that you recommended, a heading can be served as a trigger too depending on the content (for the site I was working, in a few pages heading is more appropriate, as in other pages , button is indeed better than p tag). If you use anything other than buttons or links make sure to use tabindex=0 to make your elements focusable via keyboard, and attached role=button to it. As a side note, the challenge with collapsing panels is to let users open/close panels, but at the same time make all focusable items in the hidden panels non focusable, or simply remove the panels via display:none. The challenge is to expose content to SE, but at the same time allow keybord users to navigate the documents without having to go through everything focusable item in the document (in all panels, collapsed or not). If we implement collapsible panels in the first place it is to minimize content overload - so imho it should be the same for all users. -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] screen reader friendly and keyboard accessible popup?
Hi Tee, Please take a look at this example. The first example is keyboard accessible however I am also concern with the empty link that may create extra noise for screen reader, e.g if every single page has a popup, it will have two empty links, one is the popup trigger and the other the close link. Sure it's just two empty links, as I started using VoiceOver more frequent to test the sites, I find the two links quite annoying. http://jsbin.com/efimu5 I'd use buttons instead of links, or I'd add role=button to the links. I'd also add role=alertdialog to the modal, making sure that the focus goes to the close button/link within the modal and also making sure that when the user closes the modal, focus is brought back to the original trigger. See: http://www.w3.org/TR/wai-aria/roles -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] HTML5 v. HTML 4.x
You can use it, but will anyone benefit from it? Assistive technologies don't support much, if any, of the new semantics. I don't know if search engines and other users of programmatic access to websites are currently able to make use of HTML5 markup, but I have not seen anything to indicate that they do. So what exactly is the benefit? As David said, it saves you from having to rewrite stuff later. But did you check the links I posted? They show that there are things that work *today* already. -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] HTML5 v. HTML 4.x
At the moment, HTML5 doesn't really bring a significant benefit, but that will change (in years rather than months). I beg to differ. I believe there are a lot of great stuff that we can start using today (mostly related to form controls). See http://diveintohtml5.org/forms.html and this one about datalist http://adactio.com/journal/4272/. -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Accessible modal windows / lightboxes
Hi Steve, Yes, here's one we worked on - http://htmltools.moneymadeclear.org.uk/mortgage-calculator/index.aspx What about using role=alertdialog on that container? http://www.w3.org/TR/wai-aria-practices/#chobet -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS variable navigational menu`
These two essentially are the same. I am assuming the menu is controlled by a javascript, best practise is to use the absolute positioning to control submenu and use the toogle or mouseover to trigger the sub-level. I'm not sure this is considered best practice as keyboard users would have to go through all the links in the menu before reaching the last one. These two examples show the difference between styling the sub menus off-screen or via display:none - http://www.tjkdesign.com/articles/new_drop_down/default.asp - http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS lists
These come to mind??? The appropriate w3c list, and... http://www.sitepoint.com/forums/ http://csscreator.com/ http://bytes.com/ Thanks David, but I'm not a big fan of fora (I prefer mailing lists). Even though a forum like sitepoint has great threads (i.e. Test Your CSS Skills). Check this demo: http://www.pmob.co.uk/temp/swap-vertical-divs-around3.htm Pretty cool isn't? -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] CSS lists
Hi all, Besides the CSS-D list, which CSS lists would you recommend subscribing to? Thanks, -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] IE hasLayout - the long and short of it
Hi David, It appears to be the existence of hasLayout on the .vcalendar that causes the problem (due to it being floated...) I don't think this is the issue per se. Imho, the problem is that this float is width-less. Give it with a width and things should work the way you want. -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] CSS-101
http://www.css-101.org Happy New Year! Bonne Année! -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS-101
@Diego: Smartphones are not the best device to use here since the idea behind the demo pages is to allow people to edit/tweak CSS declarations via their favorite dev tool. The goal is to make people get their hands under the hood to do their own investigation - to find out what the simplest change may trigger and why. @Prashanth: This last July? Wow! It's a small world :) Thanks for your feedback -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Re: WSG Digest
Using IE conditional comments on the html tag, you can target each version of IE. You can does not mean you should... In a comment [1] on forabeautifulweb, Molly Holzschlag says: Please, please dont design for browsers. [1] http://forabeautifulweb.com/blog/about/universal_internet_explorer_6_css/#r7 23 -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] disallow IE6 to load the main style sheet
Personally I think it is reasonable to take this approach, given the age of IE6 and its declining market share. However I would be interested in the attitude of other developers. Imho, we should take care of any layout issue, but not try to get fancy effects via extra markup, images, filters, and other hacks. In short, IE6 should get layout fixes and miss on properties like border-radius, opacity, etc. So no need for a specific styles sheet imo. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] disallow IE6 to load the main style sheet
The reason for this is twofold though: firstly, you want to coax people off of IE6. I don't think that's our job... -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] disallow IE6 to load the main style sheet
The reason for this is twofold though: firstly, you want to coax people off of IE6. I don't think that's our job... Who better? Wouldn't you rather IE6/7 disappear sooner than later? You enjoy the extra effort the too many years of its massive non-conformity causes? Most people who run IE6 don't have a choice. Feel free to ignore them, but don't believe that you can make them switch browsers. I guess the next step is to design for 1400px layouts so we can put more above the fold. Then we'll tell people to buy new monitors :) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] alt text on email graphic
This article might also help: http://www.alistapart.com/articles/spam/ I'm not sure about that. It is more than *8* years old... -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Fixed-position menus?
Here is a link illustrating what I mean: http://thinkplan.org/menupersist.jpg What are peoples' thoughts on this kind of menu? I'm told that IE 6 doesn't support this kind of menu...IIRC, it involves position: fixed; How key is IE 6, and are people simply not going with this kind of fixed menu? You can use the following for IE6, but be aware that CSS expressions are evil! #elementToBeFixed { position:fixed; } * html { background: url(LOL); } * html #elementToBeFixed { position: absolute; top: expression(documentElement.scrollTop); } And yes, I have LOL in there, that's to show that IE6 can be fun. Besides, it saves a HTTP request ;-) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] css
http://203.193.216.214/ I have an issue with this menu it works fine but the client has asked when you hover over top menu that the sub menu becomes visible and the stays there until you hover over than part of the top menu. If I was to move the mouse anywhere on the screen the menu sub menu will stay visible. I was thinking hover a {display:block} any help would be appreciated. But I am not sure how to do this in css. This can't be done with CSS alone, but before you try doing it with JS you may want to ask yourself if that would not create serious usability issues. I think it would be better - on page load - to show the sub-menu relevant to *the* page (the top section). -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] HTML5 - Marking up forms
Understandable; however, with the change in HTML5 from Definition Lists to Description lists, would it not be more semantically valuable to mark forms up using dt and dd, for labels and inputs, providing the document with a more solid structure? As stated, my concern with this is the lack of grouping per item, when using Description Lists. I understand that paragraphs may be easier to handle when marking up forms and doing the CSS; however, is it a meaningful method of marking up forms that supports the forward progression of HTML5 and front-end development in general? I don't think lists should be used for this (there might be a case for a OL in case of dependant selects, but that would be a stretch). In the case of DL, I'd say that the relationship between DTs and DDs is no better than the one created by the labels and their for attribute. fwiw, I use divs to wrap controls with their label, not because it makes things easier to style, but because of the way the form would look with no such wrapper and no styling. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] XHTML or HTML?
Any thoughts on which we ought to be using, and what information ought to be up at top of an HTML page, along with !DOCTYPE, etc? I'd go with !DOCTYPE html with nothing above that -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] A simple IE and JS detection method?
snip On the second pahe I've checked (http://www.projectseven.com/products/menusystems/pmm2/index.htm), I found these: !--[if IE 7] link href=/06_includes/ie7.css rel=stylesheet type=text/css ![endif]-- !--[if IE 6] link href=/06_includes/ie6.css rel=stylesheet type=text/css ![endif]-- !--[if IE 5] link href=/06_includes/ie5.css rel=stylesheet type=text/css ![endif]-- These are three extra HTTP requests. Just so everyone is clear, this is only _one_ extra request, and only for that particular version of IE; No other browser will request any of these, nor will IE8, IE9 or future versions. Yes, *one* extra request for IE browsers (lt 8). And authors can't combo these files (concatenate and minified them with other sheets). One thing *all browsers* get though is the *extra markup* which - unlike rules in styles sheets - is not cached. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] A simple IE and JS detection method?
How, without using conditional comments at all, do I target IE 6,7, and 8 I was asking how I'd be able to target all three *without* any CCs. Using the basic filters you could go this route: http://tjkdesign.com/lab/ie-filters.asp For version 9+, nothing's sure ;-) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] A simple IE and JS detection method?
Thank you, Georg. Your valuable comments in that file actually convinced me to stay with the Paul Irish CCs method. It just seems safer, as well as relatively easy to understand. After all, this: .ie8 .hacked-element {...} seems to me clearer than @media all { html:lang(en) body .hacked-element {...} } :) Indeed it is. There is nothing wrong about using CCs - absolutely nothing. They have been a marvelous solution medium for handling Microsoft browser bugs for years. People who obsess against their use are usually just grappling to find another obtuse way to add more complexity to CSS. Perhaps it's therapeutic :-) Add more complexity? Really? I can always remember the syntax for the two or three CSS filters I use, while I'm never 100% sure how to properly write CCs. But let's take a concrete example. http://projectseven.com contains this: !--[if IE 6] style .p7TTMcnt {zoom: 1;} .p7TTMcall {display: none !important;} /style ![endif]-- Instead of this CC, the styles sheet could include these two simple declarations in the appropriate rules: _zoom:1; and _display: none !important; I'd say this approach is less bytes and better for maintenance. Imho, it's a no brainer unless you are the kind who obsess about validation :) On the second pahe I've checked (http://www.projectseven.com/products/menusystems/pmm2/index.htm), I found these: !--[if IE 7] link href=/06_includes/ie7.css rel=stylesheet type=text/css ![endif]-- !--[if IE 6] link href=/06_includes/ie6.css rel=stylesheet type=text/css ![endif]-- !--[if IE 5] link href=/06_includes/ie5.css rel=stylesheet type=text/css ![endif]-- These are three extra HTTP requests. Even if these files contain no more than two rules each (sic): -- div.prewrap {overflow-x:scroll;overflow-y:visible;} pre {font-size: .9em;} -- #mainbox, #mainbox #maincontent #datatable a {height: 1%;} div.prewrap {overflow: auto !important;} pre {font-size: .9em;} -- body {text-align: center;} #masthead, #layoutwrapper, #footer {text-align: left;} -- Since they target IE 5, 6, and 7. Everything could be taken care of via CSS filters. Keeping everything in the styles sheet rather than spreading rules across four different files and adding expensive HTTP requests. David's use of a CC for IE8 is legitimate, because there is not much better solution; but imho, using CCs as the primary tool for styling across browsers is plain wrong. I think using CCs for styling is like using table for layout. We should use such techniques when we have no other/better choice. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] A simple IE and JS detection method?
goes against the separation of the three layers No it doesn't, it's purely presentational. No better or worse than li class=last imho, CCs have nothing to do with the presentational layer, they are part of the structural layer and they are junk markup if you ask me :) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] A simple IE and JS detection method?
It must've come from that article, it looks vaguely familiar. Personally I saw it as a furtherance to the hasJS technique. My perspective was to remove separate style sheets, and obscure hacks, purely to simplify editing exactly as Paul Irish's article states. Without using * html and *+html which obfuscates the meaning in the style sheet. Since querying here I've had difficulty validating code with a class on the html element. Am I incorrect in the belief that it should actually be valid? It amazes me to see how far people are willing to go to have their styles sheets validate. Using hacks like this one goes against the separation of the three layers. It is using markup for presentation, it is no better than using things like p/p or brbrbr. Plus, it messes up with the cascade as the rules are more specific. What's wrong with the *property and _property hack? These are extremely reliable, they do not increase specificity, they facilitate maintenance because the styling for IE versions is where one would expect it to be (in the same rule), and it does not create extra HTTP request (IE styles sheets)... As a side note, an ID on HTML passes validation and I believe using the HTML5 doctype allows to use CLASS on the HTML element. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] attribute selectors to target external and internal links
This rule works a[href^=http] Problem is almost every CMS system uses absolute url for internal link, this makes it impossible to target just the external link without the content editor having to add a class to it. If you deal with absolute paths, you should be able to match internal links with this: a[href*='domain-name'] -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] So this is *the* good accessible keyboard supported dropdown menu?
On Behalf Of Al Sparber From: Thierry Koblentz thierry.koble...@gmail.com What is the solution you're talking about? That link you posted does not tell us much about your own simplistic, unsophisticated way, nor what is your different view of menu Accessibility. It must be so simple it went over your head :-) ok, you made me curious so I read the whole thing. I didn't find a live example to test and I'm not sure that page uses the same menu structure as the one you discuss (since you have sub menus double-wrapped in DIVs after the UL rather than nested in the top level items like your markup example shows). But to *me*, this is a bad approach regarding performance, usability, and maintenance (I may forget something). 1. the use of descendant selectors (going through *8* elements here): .p7PMMnoscript li li li li li li:hover div {} 2. the screen-reader link that says: Jump to Main Menu and expand all of its hidden submenu items. Once expanded you can tab through all links or open your screen reader's link list. Keyboard users should not have to go through all menu items to navigate a site. 3. creating fallback pages that authors may fail to see as landing pages As a side note, I'd be interested to check a live example as I am wondering how you expose that screen reader link to keyboard users who do not rely on a assistive device. Perhaps someone else would be interested in engaging in a debate or raising other accessibility solutions - but mine was a one-way post and I am only replying to you to clarify that. Same here, I'm only replying to you because you suggested I didn't understand your solution. Have a great day -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] So this is *the* good accessible keyboard supported dropdown menu?
Probably. I think there is a faction in the accessibility community that believes a web page menu should work like a desktop application or OS menu. The problem is that web surfing civilians who use the keyboard are accustomed to the tab key (or equiv) and not the arrow keys for navigating a web page. Complicating the matter now, of course, are smart phones. In our own simplistic, unsophisticated way, we've taken a much different view of menu accessibility. While most experienced standards and accessibility experts seem to disagree with us, our testing lab, consisting of real people with real disabilities, seems to think it makes sense. I'm sure some here will disagree, so just consider it one possible solution. What is the solution you're talking about? That link you posted does not tell us much about your own simplistic, unsophisticated way, nor what is your different view of menu Accessibility. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] [att] disables element in :focus?
Is this expected behavior or the support is still lacking? I have this declared in CSS for HTML5 required attributed: input type=email name=email id=email required [required]{background-color:#E0} input:focus, texture:focus {background: #464646;color: #fff;border-color: #C12D2D} Color and border are correctly working when focused, but background image isn't. My test showed that it isn't the HTML5 required attribute causing it but the CSS3 [required]. If I remove [required]{background-color:#E0} and target ID instead (input#email {background-color:#E0} ) then the background color works when focused. Tested in Opera, FF, Safari and Chrome, all show consistent result. That works for me. Do you have a page we can look at? -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] HTM5 Semantic markup overly done?
Hi Tee, I thought this is suffice but then I am not sure as these HTML5 tags are still too new for me. section id=articles article h2.../h2 p.../p /article article h2.../h2 p.../p /article /section What about something like this? ol id=articles li article header h1a href=#Article Title/a/h1 /header pLorem ipsum dolor sit amet, .../p /article /li li article header h1a href=#Article Title/a/h1 /header pgiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum./p /article /li /ol -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] HTM5 Semantic markup overly done?
ol id=articles li article header h1a href=#Article Title/a/h1 /header pLorem ipsum dolor sit amet, .../p /article /li li article header h1a href=#Article Title/a/h1 /header pgiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum./p /article /li /ol let's not get into list-itis again... ;) hehe, I *knew* you'd reply to this ;) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] html5 issue
/ is not necessary to close the meta tag. meta charset=utf-8 Maybe this solve the problem. Imho, the / should make no difference, I believe the problem is that this meta is too far down in the markup. The OP should try to put that meta right after head -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Paul Irish/Divya Manian HTML5 Boilerplate
I rather liked the conditionals around the body. What's not to like? Imho, it goes against the separation of structure and presentation (plus it messes up with the cascade), but I can understand why they are doing this. Since most people strongly believe that CSS validation is a must, they have to offer a solution that comes with the badge. Fwiw, I'd delete that junk markup and go with good old _property and *property hacks ;-) In any case, they are plenty of good things in there. A lot to learn... -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] attribute selectors and validation
Regarding performance, using a class may be a better choice: https://developer.mozilla.org/en/writing_efficient_css Interesting article. I wonder if it is still true -- the last update was 2000 for that page. 2000 is the date for when the original article http://www.mozilla.org/xpfe/goodcss.html; was last updated, but the date for this rewritten piece is March 2010. It also says Avoid the descendant selector which would be rather annoying. Yes, it says: strongThe descendant selector is the most expensive selector in CSS./strong. It is dreadfully expensive—especially if the selector is in the Tag or Universal Category. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] attribute selectors and validation
At the very basic level, the article exemplifies h1[rel=external]{color : red;} used with the html: h1 rel=externalAttribute Equals/h1 As others have said, this is an invalid use of rel. We could change his example from: h2 id=first-title class=magical rel=friendDavid Walsh/h2 To h2 id=first-title class=magical friendDavid Walsh/h2 (I'd also get rid of first-title...) That said, attribute selectors are very useful. Think about a form. Instead of adding a class to all text input boxes, you can style them with a simple: input[type=text] {/* whatever styles */} For links, how about: a[href^=http] {/* links starting with http */} a[rel] {/* any link with a rel attribute */} Regarding performance, using a class may be a better choice: https://developer.mozilla.org/en/writing_efficient_css -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS Expandable Menu
As a follow-up to my original email, the following methods have been very well designed from the accessibility point of view: http://juicystudio.com/article/ecmascriptmenu.php http://www.456bereastreet.com/archive/200705/accessible_expanding_and_c o llapsing_menu/ A further example worth considering: http://www.splintered.co.uk/experiments/16 This is a different approach as it keeps all the links *visible* (there is no use of display:none), but it still offers keyboard users a way to skip sub menus: http://tjkdesign.com/articles/TJK_SlideMenu/TJK_SlideMENU.asp As a side note, the markup is a DL. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
Hi Mathew, http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp I have a bug report... tested against FF 3.6.4 and IE6 (no bug under Chrome 5.0.376) Steps to reproduce: - click on background - tab to focus first menu item - hit enter to display sub-items - tab through to the second menu - hit enter to display its sub-items (the first menu closes) - hit shift-tab to go back to the first menu The bug is either one of a) the first menu shouldn't open as the second menu is active, or b) that the second menu stays open. Thanks for the step by step, but unfortunately I cannot reproduce (in neither one of these browsers). Could somebody confirm the issue following the steps above? Thanks. As a side note, there is something strange in these steps as the first menu should close before you can even hit enter on the second one. Are you sure you do not have your mouse cursor over the first tab while checking the menu? Because that would explain what you describe. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
Try this for CSS menus with keyboard support: http://carroll.org.uk/sandbox/suckerfish/bones2.html This menu may be accessible, but is it usable? Unless I am missing something, keyboard users need to go through *every single link* in the menu to reach the last item :-( I have these two: http://tjkdesign.com/articles/new_drop_down/default.asp http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp They show what's involved and what are the limitations. Pure CSS menus are a bad idea, and hybrid implementations that claim to be accessible simply because links are accessible are often bad solutions too. Imho, users should be able to access all pages within a web site without frustration. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
Hi Mike, Sorry to say this but the keyboard friendly version: http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp Only fires, via keyboard, on Articles E-K in IEv8 or Firefox. This is by design. Keyboard users could not reach these pages if they were not focusable at least from the parent page. The About this solution section says: Note that keyboard users cannot skip the sub-menu related to the current page. This is because this sub-menu is exposed to SE (Search Engines) and thus accessible to keyboard users when JS is off. The sub-menus open via the *enter key*, this is to allow keyboard users to skip sub menus so they are not forced to tab through all the menu items. If the menu is accessible, it is *because* the sub menu related to the page itself *is* focusable (it is not styled with display:none). What this menu is missing though is a arrow pointer for *discoverability*. I have a title in there, but I think it's pretty useless (for 99.99% of users). If I had time, I'd add arrows and ARIA roles too. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS Expandable Menu
Hi Grant, I'm trying to avoid use of Javascript due to accessibility concerns. There is no problem with using a javascript powered menu as long as that menu is accessible with javascript off. As a side note, pure CSS menus usually come with usability issues. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Re: IE 6 Nightmare plus new margin problem
I stated earlier that after I got help on my previous IE6 problem that my mainContent div was shifted over to the left in Firefox. http://www.jasonbyer.com/dev/new/ 1. remove display:inline from #mainContent 2. remove the left margin on the div with no ID (the one that follows #ddtopmenubar) 3. use the rule I sent you regarding the 3px gap in IE (* html #leftnav {}) because your ie_layout.css file is served to all. At this point you should not need any margin, the main content should be displayed next to the sidebar, but if you want to create space between the two containers, then use a left margin on #mainContent (it has to be greater than the width of #leftnav) Because you do not set a left margin on that container there is no IE bug to fix, hence you can remove display:inline from the sidebar. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] IE 6 Nightmares
Ive been racking my brain trying to solve a CSS problem and I was hoping somebody here can point me in the right direction. Im developing a site that has to work in all modern browsers and IE 6. Here is the link to a sample page: http://www.jasonbyer.com/dev/new/ The problem that Im having is that currently the page looks fine in IE 6 but in Firefox the navigation doesnt extend the entire width of the screen. That's because #mainContent is a float and without a width it shrinkwraps There are many ways to style this, but fwiw I'd not use float on that container, I'd make it a block formatting context (e.g., overflow:hidden;zoom:1) and then go from there. As a side note, there is no need to use height:1% on the side bar (it is a float so it has a layout already) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] IE 6 Nightmares
To concur with Thierry, the float on #mainContent appears unnecessary on this page. Give it a margin, or padding, to push the content off the left bar and you should be good to go. These two containers are siblings, so if the OP uses padding or margin to push the content off the left bar he will not be able to clear (left) floats in the main section without clearing the sidebar at the same time. This is why I suggested to use overflow/zoom to create a new block formatting context. This article may help understand the issue: http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.a sp -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] recovering html and web projects
I'm taking care of Marvin, please do not reply to this thread Thanks From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Marvin Hunkin Sent: Tuesday, April 20, 2010 12:05 PM To: wsg@webstandardsgroup.org Subject: [WSG] recovering html and web projects hi. well did try one software. but the frustration, no credit card, no trial version. so wondering if any one is using this software. and possibly maybe be able to register for me on my behalf. and send me the licence key. when i did a free scan, it found over 15,000 files. so will paste the reply i got from tech support below. if any one can help. let me know. just frustrated. ps: the linux option is not really an option. as not sure if the software magic 4.9, is command line based or graphic. and the linux screen reader speak up, grml, or emac smpeak, not sure would work. so not really an option. e-mail me off list if not on topic. sorry. Hello Marvin, Thank you for your email. We provide a free scan in order to give you the opportunity to evaluate the effectiveness of our detection system and allow you to make an informed decision regarding your system's needs. To access the full potential of the program you will need to purchase a license key. At this time we do not offer free license keys nor trial license keys. We regret to hear of any inconvenience this has caused you. Kind regards, Tara L ParetoLogic Support Team Ticket Details === Ticket ID: DUO-657411 Department: Daily Tickets Status: Reply Sent *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] NVDA-screen reader software for windows
Sorry I wasn't clear. Does NVDA support everything that a paid program such as JAWs supports? That I couldn't tell you, but what I can say is that NVDA is a solid SR, with great ARIA support, though I believe it works better on Firefox than IE (re: change of content a la Ajax). As a side note, there is a great article on WebAim about how to use NVDA: http://www.webaim.org/articles/nvda/ -- Regards, Thierry www.tjkdesign.com | articles and tutorials www.ez-css.org | ultra light CSS framework *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] NVDA-screen reader software for windows
Included amongst the inventions was Screen Reader software for Windows, that was not only programmed by two blind computer users, is licensed open source and thus freely available. It is called NVDA. We use it for testing. It's very light and simple to use and you can't beat the price :) As a side note, Mac users can use VoiceOver (System Preferences Universal Access). It writes on screen more or less what a SR would speak. -- Regards, Thierry www.tjkdesign.com | articles and tutorials www.ez-css.org | ultra light CSS framework *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] IE8 bug?
I have run in to what seems to be an IE8 bug - IE8 doesn't respond to internal links (as in, same page links) on a demo site I'm working onyet IE6 and IE7 do! eg. a id=top name=top/a ul liblah blah blah/li liblah blah blah/li /ul a href=#topback to top/a I tried Googling and looking back through old posts from WSG but can't find anything Has anyone come across this issue before? (and better yet, come across a fix??) I ran into a couple of issues in IE (6 though) when using top. But in any case, if all you need is to jump to the top of the page you should be able to do it without a named anchor. Did you try something as simple as this: ul liblah blah blah/li liblah blah blah/li /ul a href=#back to top/a -- Regards, Thierry www.tjkdesign.com | articles and tutorials www.ez-css.org | ultra light CSS framework *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Rendering mismatch in IE6 and IE7
I am working on a project that uses JSF with Richfaces and Ajax4jsf. All the pages were developed using IE7.0 and they appear properly on it. The same page is rendered a bit differently on the other browsers such as Firefox, Chrome. But the discrepancy is only w.r.t to the borders that are inherited. During development, I had referred to certain sites suggested on this forum too and was convinced that IE6 had some glaring bugs in rendering using CSS properties and IE7 is the way forward. Now due to some constraints, we need to make these pages compatible with IE6. Here comes the trouble. The controls on the pages are not in the expected places. The panels sit on top of one another and other such mismatches. Now is there any way I can identify what CSS properties are not behaving properly in IE6? Do you have IE6 with the dev toolbar installed? That would help you debug the issues. Is there any way that I can make the pages compatible with IE6? Can you post a link to your page? -- Regards, Thierry www.tjkdesign.com | articles and tutorials www.ez-css.org | ultra light CSS framework *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Use CSS to target last 2 list items
Just wondering, is it possible to use the nth-child in CSS2 to target the last 2 items of an unordered list? I know you can do nth-last-child, but I wanted to target the last TWO list items. Is this possible? I believe this is CSS*3*, so support is not that great -- Regards, Thierry www.tjkdesign.com | www.ez-css.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Ie7 test?
Can anyone guess why the columns overlap? http://freemealcenter.com The first thing I'd try is to remove the float declaration on the fixed element -- Regards, Thierry www.tjkdesign.com | www.ez-css.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Ie7 test?
Add an extra div within left_column, and declare the position:fixed in the new div instead. Or, since you already have an extra div, add this to screen.css: .left_column { width: 220px; float: left; } .left_column .column_cushion { width: 180px; position: fixed; } I don't think there is a need for an extra div in there. The way I understand the styling, the float is only needed for IE6. So either Joseph should hide that float declaration from other browsers or simply replace this rule: .left_column { float:left; position:fixed; width:220px; } With this one: .left_column { position:absolute; position:fixed; width:220px; } -- Regards, Thierry www.tjkdesign.com | www.ez-css.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] the mysteries of overflow: hidden
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Jody Tate Sent: Wednesday, February 10, 2010 2:05 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] the mysteries of overflow: hidden Exactly. The magic confounds me. http://staff.washington.edu/jtate/overflow.html (I threw together the above example quickly. (Yes, embedded styles are a no-non, but it was easy to do in this situation.) What overflow does is that it creates a block formatting context. Any value besides visible will work. I wrote something about containing floats without structural markup [1]. Check the demo page [2] to see how various techniques work and how triggering hasLayout is very similar to creating a block formatting context. This technique can even be used as a tool to create robust layouts [3]. [1] http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.a sp [2] http://tjkdesign.com/articles/block-formatting_context/newBFC.asp [3] http://www.ez-css.org -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] FINAL VERSION OF MY SITE
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Dani Iswara Sent: Saturday, February 06, 2010 6:26 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] FINAL VERSION OF MY SITE Marvin, For the access keys and title attributes, I do agree with Thierry. I think access keys are more appropriate in complex forms or make the structure/number more logic by using automatic PHP script. Title attribute is mouse dependant also, not fit enough for touchscreen users. For the href=#, it would be works fine. Still valid by W3C, but not by Validome. Validome will say: The Link # points to a not existing Anchor. For the address, I would prefer using address tag. I think that would not be the proper use for address http://www.w3.org/TR/html401/struct/global.html#h-7.5.6 -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Progressive Enhancement
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Micky Hulse Sent: Friday, February 05, 2010 9:54 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Progressive Enhancement Hi, Does anyone have any good resources for current progressive enhancement techniques and also talking points? Google has shown me rather old articles, so I thought I'd hit you guys up for what you are I hate it when Google returns hits from years ago... Thank god they added that little sidebar where you can specify a date range. Interesting. Because imho, there are *great* articles out there that have been written years ago. A simple example that comes to mind is onhavinglayout from Ingo Chao created on 2005 (last update 2008). Jukka Korpela's articles also date from *years* ago as well as stuff from Georg Sørtun, John Gallant Holly Bergevin, Bruno Fassino, etc. I'm not saying that everything old is a good read, I'm just saying that ignoring results because they are old may not be the best way to go when it comes to find the best answer/solution. -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] FINAL VERSION OF MY SITE
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Marvin Hunkin Sent: Wednesday, February 03, 2010 2:47 PM To: WSG@WEBSTANDARDSGROUP.ORG Subject: [WSG] FINAL VERSION OF MY SITE HI. CAN SOME ONE TAKE A FINAL LOOK AT THIS SITE. AND GOT 2 FONTS. ONE VERDANA AND ONE Arial black. do i need any other fonts. and does it look really good? and also any other improvements. let me know. and if i need to make any changes. tell me how to do this. marvin. http://www.raulferrer.com/joe/html/ Marvin, As I mentioned in a previous post, font-family names that contain a space need to be between quotes, so you should use: h1 { font-family: Arial Black; text-align: center; } instead of: h1 { font-family: Arial Black; text-align: center; } -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS Validation Error
-moz is a vendor prefix (not CSS3) -- Regards, Thierry | www.tjkdesign.com From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Daniel Anderson Sent: Wednesday, February 03, 2010 3:12 PM To: wsg Subject: [WSG] CSS Validation Error When I am validating a site that I am working on using the W3C Validator I get errors with -moz-border-radius-bottomleft. Is this because it is CSS3? Error Reads: Property -moz-border-radius-bottomleft doesn't exist : 5px 5px Cheers Daniel *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] FINAL VERSION OF MY SITE
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Karl Lurman Sent: Wednesday, February 03, 2010 4:15 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] FINAL VERSION OF MY SITE For your named anchor tags (a name=Marvin/a, they don't have to be inside 'p' tags. They *do* need to be inside a block-level element, but they are already inside the 'main_content' div, so you should be fine for validation. Ethically, you probably should make your page more accessible to people with disabilities (vision impaired/blind users, non-mouse users etc). Consider the use of access keys, skip navigation links, title attributes on anchors etc. Luckily, your site's simplicity means it's more accessible than a lot of other sites already!!! :) Fwiw, I don't agree about accesskeys [1]. Using title on anchors is also something I would not do. These links are meaningful already and title is ignored by most screen-reader users anyway. Besides, the tooltip that title creates is often a problem for people using screen magnifiers. [1] http://www.tjkdesign.com/articles/user_defined_accesskeys.asp -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] FINAL VERSION OF MY SITE
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Stuart Foulstone Sent: Wednesday, February 03, 2010 4:55 PM To: wsg@webstandardsgroup.org Subject: RE: [WSG] FINAL VERSION OF MY SITE Hi Marvin, On Wed, February 3, 2010 11:50 pm, Webb, KerryA wrote: You should check the Top of page links on the Recipes page. They each seem to go to the start of the previous recipe rather than to the top of the Web page. Kerry That is, you have links with duplicate link-text pointing to different anchors which contravenes accessibility standards. You already have the anchor a name=Top/a, so Top of page links should point to this, a href=#Top target=_topTop Of Page/a If I recall, using top as a named anchor can be an issue in IE. In any case, if it is just to jump to the top of the page, I believe a simple # should work. As a side note, why using target in there? -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] FINAL VERSION OF MY SITE
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Karl Lurman Sent: Wednesday, February 03, 2010 5:22 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] FINAL VERSION OF MY SITE Fwiw, I don't agree about accesskeys [1]. The article on your site seems to advocate the use of access keys. The concept of allowing users to define which access keys they can use is an interesting and clever approach. Have you got an example of this out in the wild? There are certainly pitfalls with access keys. That fact there isn't a set of standard access keys across various platforms/browsers, is a real shame and goes against them tremendously. Is this why your feelings on access key usage has changed? Yes, because by implementing them we take the risk to break the user's own shortcuts. That's why letting the user map his own is a safer approach. Or do you have some other reservations? Using title on anchors is also something I would not do. These links are meaningful already and title is ignored by most screen-reader users anyway. Besides, the tooltip that title creates is often a problem for people using screen magnifiers. I think that any additional content that might help a user, sight impaired or otherwise, can't be a bad thing. It adds to the document's semantic value and might also aid in SEO. You are right however, some screen readers will ignore this 'extra' content (other side of the coin, some will not). I think the problem is that the 'title' attribute is abused or used incorrectly. If it doesn't contain any additional semantic value, then perhaps it should be omitted. I was unaware that screen magnifiers may experience problems with tooltips... Thanks for the tip (no pun intended) on that. As you point out, the main problem with title is that people often use it to duplicate stuff or do keyword stuffing. In any case, I rarely found the need to use it (as as side note, most screen-readers won't ignore the title attribute when it is used with form controls). -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] FINAL VERSION OF MY SITE
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Joshua Street Sent: Wednesday, February 03, 2010 5:53 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] FINAL VERSION OF MY SITE On Thu, Feb 4, 2010 at 10:41 AM, Paul Novitski p...@juniperwebcraft.com wrote: A few quick notes: 1) Phone number formats vary from place to place, but in North America at least the convention is to insert spacing or punctuation between the first '1' and the area code. I would change 1800-Joe-Fruit to 1-800-Joe- Fruit unless the Australian convention differs. FWIW, the convention does vary and Marvin is correct in Australian usage. :) That's why using the lang attribute is a good idea ;) en-us vs. en-au... -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS Validation Error
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Joshua Street Sent: Wednesday, February 03, 2010 5:59 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] CSS Validation Error On Thu, Feb 4, 2010 at 10:23 AM, Thierry Koblentz thierry.koble...@gmail.com wrote: -moz is a vendor prefix (not CSS3) Actually, vendor prefixes are a part of both CSS 2.1 http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords as well as the CSS3 working draft... they're for proprietary extensions, of course, but it's always seemed odd to me that the validator doesn't recognise a vendor-prefix as per spec (irrespective of the specific vendor extension) and ignore it accordingly. The prefix may be part of it to address parsing issues, but - afaik - that does not make these extensions CSS properties. -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS Validation Error
#blob { border-radius : 5px; -webkit-border-radius : 5px;/* safari, chrome, arora etc */ -moz-border-radius : 5px;/* firefox and pals*/ -khtml-border-radius : 5px;/* konquerer */ } I believe it would make more sense to reverse that order and have border-radius come *last* in the declaration block -- Regards, Thierry | www.tjkdesign.com From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of James Ellis Sent: Wednesday, February 03, 2010 6:10 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] CSS Validation Error Hi You can safely ignore any -prefix validation errors (-moz, -webkit, -opera) - they are never going to validate on the W3C validator. The point of the vendor specific rules is to do stuff the W3C haven't standardised yet. The validator should probably ignore them as well. If you really must have a valid stylesheet then you can stick vendor specific stuff in a vendor.css and not validate it (because it won't). #blob { border-radius : 5px; -webkit-border-radius : 5px;/* safari, chrome, arora etc */ -moz-border-radius : 5px;/* firefox and pals*/ -khtml-border-radius : 5px;/* konquerer */ } Noting that webkit and moz have different names for the rules, watch out for that. Theoretically, when a browser supports border-radius, it should switch from its vendor specific rule to the standard rule. Cheers James On Thu, Feb 4, 2010 at 10:23 AM, Thierry Koblentz thierry.koble...@gmail.com wrote: -moz is a vendor prefix (not CSS3) -- Regards, Thierry | www.tjkdesign.com From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Daniel Anderson Sent: Wednesday, February 03, 2010 3:12 PM To: wsg Subject: [WSG] CSS Validation Error When I am validating a site that I am working on using the W3C Validator I get errors with -moz-border-radius-bottomleft. Is this because it is CSS3? Error Reads: Property -moz-border-radius-bottomleft doesn't exist : 5px 5px Cheers Daniel *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Assistance with flash example sites
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Russ Weakley Sent: Sunday, January 31, 2010 7:52 PM To: wsg@webstandardsgroup.org Subject: [WSG] Assistance with flash example sites Hi people, A colleague has just asked me for some examples of Flash sites: 1. examples of flash sites which are not keyboard accessible (and/or poor tab ordering) 2. examples of flash sites which ARE keyboard accessible 3. examples of flash sites which work well with screen readers I believe the best person to ask for this is Andrew Kirkpatrick (Corporate Accessibility Engineering Lead for Adobe). -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] fonts
-Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Marvin Hunkin Sent: Monday, February 01, 2010 8:29 PM To: wsg@webstandardsgroup.org Subject: [WSG] fonts hi. i have verdana. and it reads the name. but only have got Arial Blakc. not just plain Arial what is the correct name for Arial Black. or where can i download the Arial font. Hi Marvin, Font names with whitespace needs to be between quotes, so for Arial Black, you'd use: Arial Black -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Accessibility does not matter!
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Jason Grant Sent: Sunday, January 31, 2010 1:06 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Accessibility does not matter! @Matthew Pennell You are confused with the 'broken wrist' issue. If I have a broken (right) wrist (I am right handed), I won't be able to use a mouse (with my right hand). I also won't be able to use keyboard with that right hand. My choice is to use the mouse or keyboard with the left hand. So your 'keyboard accessibility' example is highly flawed. For many people, it is difficult to use the mouse with their other hand. It is even more difficult when a site offers very small clickable areas, pure CSS menus, etc. Things that your intranet users could be facing since you've ignored to implement basic usability/accessibility features. Also, if you can only use one hand, then it is better to keep it on the keyboard rather than switching back and forth between the keyboard and the mouse (you're more productive that way). Anyway, I have another one for you: one of the rep of your company is on the road, he logs to your Intranet to find out that the trackpad on his laptop is busted. What should he do next (beside taking some time off)? What happens in practice (I can think of a circumstance where a colleague had a broken wrist at work) is that people take time off until they recover, since their work performance working with one hand is usually not good enough to be at work (think of a Project Manager typing a long report with one hand - it's not going to happen on time essentially). Let's say that the person injured is a guy who does not use a computer all day, but he's a key player and many people rely on the data he keys in every day. Do you still send this guy home? -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Accessibility does not matter!
-Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Jason Grant Sent: Sunday, January 31, 2010 2:40 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Accessibility does not matter! @Thierry I think keyboard accessibility is relatively easy thing to implement as it tends to follow naturally if one uses even semi-decent semantic HTML. It's not 'expensive' to implement. I would deem every browser based solution a total fail if it didn't have keyboard accessibility supported. However I still feel that your examples are far fetched (i.e. unlikely). Laptop track pad is likely not to be an issue as for example on my current laptop I have two onboard mice (trackpad and nipple), but I use an external mouse. Therefore I have 3 mice altogether. Chances of them all failing are minimal - virtually none. Key players (in my experience) tend to dictate their work to their secretaries and avoid using web tools as much as possible as they tend to know that's not going to keep them ahead of the game (however much we would like to think that 'tweeting is essentially for survival today'). They still prefer verbalising over the phone or such likes for some reason. I can't actually 'see' this example happening. Intranets are usually used within larger organisations. Noone inside larger organisations is irreplaceable in my experience. So your example is simply strange to me in this scenario. Essentially if large organisations were having major issues crop up because of accessibility, they would do everything in their power to implement (extra) accessibility for their intranets and web sites. That's my experience to be honest. I guess you solve all the problems by: - requiring one secretary per key player in the company - requiring that everybody has at least 2 pointing devices (with spare batteries as well) - requiring that people give a 2 weeks heads up before getting injured (because even if nobody is irreplaceable, transition costs big bucks) Anyway, I think the discussion is getting silly/absurd... -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Accessibility does not matter!
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Andrew Stewart Sent: Sunday, January 31, 2010 2:51 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Accessibility does not matter! Accessibility does matter, but I do think that many people on this list do get too close to the accessibility at all cost point of view. Lets take the example of google finance http://www.google.com/finance?q=gbpaud quite a cool site using flash and js to navigate quite a large amount of data (make sure you expand the slider at the bottom of the flash graph to change the time scale and see how the list of news articles on the right changes). How could this site be modified to be meaningfully controlled by using the keyboard alone? I would be very interested to hear people's opinions on the following points: . is this site accessible? and if not, please give real examples of saying how it is hard for people with disabilities to use . how could you make it more accessible without introducing a huge amount of extra work for the developers and without having an adverse effect for non-disabled users? Whilst I think there are some silly impenetrable sites on the internet, I don't think web developers should really be that concerned with accessibility - not because it isn't worth it, but because we have hardly any power over what the user sees. The real people that should be concentrating on accessibility are people working on creating browsers and operating systems because they can really do something about it. I'm sorry, but this is a piece of garbage. They are removing outline on real links, but they leave it on elements that don't trigger any behavior via keyboard input. If they ignore such basics I don't expect the rest of the page to be much better. -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Accessibility does not matter!
Sent: Sunday, January 31, 2010 3:46 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Accessibility does not matter! Sorry to ask again, but please explain how the site could be made accessible whilst maintaining the same ease of use? The same ease of use?! Drop the mouse and give it a shot ;) Besides that, did you look at the markup? Deeply nested tables, DIVs in As... They just don't care. -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Accessibility does not matter!
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Jason Grant Sent: Sunday, January 31, 2010 4:24 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Accessibility does not matter! @Thierry Why does Google not care about accessibility? Do they believe in 'Accessibility does not matter!' (rather than with ? at the end). Isn't their behaviour the same as Microsoft's with regards to HTML? Yes both of those mega-corporations are heavily involved in 'specifying the future HTML standards' in fact Google are 'running' the HTML5 spec. GMail has an HTML only version which works OK, while Google calendar seems to have no alternative - with JS off the tool is totally inaccessible. flash can be very accessible (as Patrick pointed out). And forget about JS off, what's important is that it is accessible *with* JS. See Todd Kloots' YUI presentation: http://developer.yahoo.com/yui/theater/video.php?v=kloots-yuiconf2009-a11y -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Accessibility does not matter!
On Behalf Of Patrick H. Lauke Sent: Saturday, January 30, 2010 10:22 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Accessibility does not matter! @Oliver Boermans IE6 / Intranets reply. Today we make a decision to use JQuery as a framework for AJAX/JS. In two year JQuery gets dropped by browsers for whatever reason and browsers no longer support it. We are once again 'playing with fire'. Do you know exactly what future holds? How do we know that everything we are doing today will not have to be re-written in 2-3 years time to be compatible. HTML4 -- HTML5 is a perfect example of a case where technology will imply some changes need to be made in order for things to keep up with time. Just a thought. So, what are you getting at? Yes, let's make the intranet completely inaccessible and just wait until an employee with disabilities gets hired, then redo it all? Also, an employee with no disability today could have one tomorrow. -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Accessibility does not matter!
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Jason Grant Sent: Saturday, January 30, 2010 2:14 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Accessibility does not matter! So, what are you getting at? Yes, let's make the intranet completely inaccessible and just wait until an employee with disabilities gets hired, then redo it all? Also, an employee with no disability today could have one tomorrow. @Thierry Koblentz 'Could' is not something we should be developing for. We need to know who we are developing for, As I suggested in my post, ignoring accessibility pretending you know your audience is a mistake. Because any user can become disabled one way or the other (because of a broken wrist for example). otherwise it's a bit of a hit and miss. I'd say narrowing your target audience increases your chances of missing. -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Minimal forms or marking up a search field
If you are looking for a simple search form (i.e. the input box into which user enters a search term followed by 'Search' submit button) you should be using something like this. label for=sSearch/label input type=text name=s id=s / input type=submit value=Search class=primary / You do not need fieldset nor a legend as they are intended for grouping form fields on more complex forms. I agree. I'd just use a DIV to wrap these form controls. -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Minimal forms or marking up a search field
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Oliver Boermans Sent: Saturday, January 30, 2010 8:21 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Minimal forms or marking up a search field On 31 January 2010 13:45, Thierry Koblentz thierry.koble...@gmail.com wrote: You do not need fieldset nor a legend as they are intended for grouping form fields on more complex forms. I agree. I'd just use a DIV to wrap these form controls. Thanks guys, I'm glad I asked this question. I was carrying around the idea that the required element around any inputs inside a form element was a fieldset. Seems I was wrong, any block element will satisfy the spec. So presuming we do away with the legend: div id=searchform label for=searchKeyword/s/label input type=text id=search name=search / input type=submit value=Search / /div .and assuming there are no other 'search' fields in the page we need to distinguish from. I'd like to test some further assumptions: - Some people don't know how to submit the query without a 'Search' (or 'Go') button? div id=searchform label for=searchKeyword/s/label input type=text id=search name=search / /div Apple seems to believe the the submit input is unnecessary http://www.apple.com - Now that the legend is gone I should use the label to describe the purpose of the text field rather than what one should enter in it? Everyone knows you put keywords in a search field, right? div id=searchform label for=searchSearch/label input type=text id=search name=search / /div - Is including the keywords hint in the title attribute useful to anyone? div id=searchform label for=searchSearch/label input type=text id=search name=search title=Keyword/s / /div - Does everyone agree this is taking simplicity too far? div id=searchform input type=text id=search name=search title=Search / /div I'd go with: div role=search label for=search_querySearch for:/label input type=search placeholder=Keyword(s) id=search_query name=search_query size=20 input type=submit value=Submit /div It won't validate though. You could also throw autofocus in there in case you plan to focus on the field when the page loads. -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] :: makeready ::
Comments and suggestions on this site appreciated. markup http://chelseacreekstudio.com/mhr/ css http://chelseacreekstudio.com/mhr/css/style.css Hi David, Minor things: I think the h1 looks small and that there is not enough padding around the text in the menu. I think more padding would make that text more readable, and would also spread the menu across the content. I'd use THs in the table for the company names, I'd use scope=row and scope=col too. You could also add a caption (send it off screen if you wish). -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] playing with css
I have one question I can't seem to find and answer to below is all my css in a document I have created. It is xhtml transitional. My document works fine except when I add float:left; to my content div. It will not stay in the wrapper. I know that it must be a simple answer. I have tried reading the W3C on floating but got loss. I am trying to get the div to sit nicely next to menuB. Can someone explain why this is happening? =) Try: #wrapper {overflow:hidden;} -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] playing with css
Wow That work but why? http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.a sp -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] index page vallidation
Hi Marvin, You have br elements that are children of the list. You need to remove these from there. You cannot have anything between List Items (LI) Start by fixing this and then revalidate. -- Regards, Thierry | www.tjkdesign.com -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Marvin Hunkin Sent: Tuesday, January 19, 2010 9:58 PM To: wsg@webstandardsgroup.org Subject: [WSG] index page vallidation hi. can you help me out. marvin. Markup Validation Service Check the markup (HTML, XHTML, .) of Web documents Jump To:Validation Output Errors found while checking this document as XHTML 1.0 Transitional! Result: 8 Errors File: Use the file selection box above if you wish to re-validate the uploaded file C:\Docs\Tafe\CertificateFourWebsites\CertFour\PrinciplesOfVisualDesign\Princ iplesOfVisualDesign\html\index.html Encoding: iso-8859-1 (detect automatically) utf-8 (Unicode, worldwide) utf-16 (Unicode, worldwide) iso-8859-1 (Western Europe) iso-8859-2 (Central Europe) iso-8859-3 (Southern Europe) iso-8859-4 (North European) iso-8859-5 (Cyrillic) iso-8859-6-i (Arabic) iso-8859-7 (Greek) iso-8859-8 (Hebrew, visual) iso-8859-8-i (Hebrew, logical) iso-8859-9 (Turkish) iso-8859-10 (Latin 6) iso-8859-11 (Latin/Thai) iso-8859-13 (Latin 7, Baltic Rim) iso-8859-14 (Latin 8, Celtic) iso-8859-15 (Latin 9) iso-8859-16 (Latin 10) us-ascii (basic English) euc-jp (Japanese, Unix) shift_jis (Japanese, Win/Mac) iso-2022-jp (Japanese, email) euc-kr (Korean) gb2312 (Chinese, simplified) gb18030 (Chinese, simplified) big5 (Chinese, traditional) Big5-HKSCS (Chinese, Hong Kong) tis-620 (Thai) koi8-r (Russian) koi8-u (Ukrainian) iso-ir-111 (Cyrillic KOI-8) macintosh (MacRoman) windows-1250 (Central Europe) windows-1251 (Cyrillic) windows-1252 (Western Europe) windows-1253 (Greek) windows-1254 (Turkish) windows-1255 (Hebrew) windows-1256 (Arabic) windows-1257 (Baltic Rim) Doctype: XHTML 1.0 Transitional (detect automatically) HTML5 (experimental) XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset HTML 4.01 Strict HTML 4.01 Transitional HTML 4.01 Frameset HTML 3.2 HTML 2.0 ISO/IEC 15445:2000 (ISO HTML) XHTML 1.1 XHTML + RDFa XHTML Basic 1.0 XHTML Basic 1.1 XHTML Mobile Profile 1.2 XHTML-Print 1.0 XHTML 1.1 plus MathML 2.0 XHTML 1.1 plus MathML 2.0 plus SVG 1.1 MathML 2.0 SVG 1.0 SVG 1.1 SVG 1.1 Tiny SVG 1.1 Basic SMIL 1.0 SMIL 2.0 Root Element: html Root Namespace: http://www.w3.org/1999/xhtml The W3C validators are hosted on server technology donated by HP, and supported by community donations. Donate and help us build better tools for a better web.OptionsShow Source Show Outline List Messages Sequentially Group Error Messages by Type Validate error pages Verbose Output Clean up Markup with HTML Tidy Help on the options is available. ? Top Validation Output: 8 Errors Line 32, Column 12: document type does not allow element br here; assuming missing li start-tag br /? Line 34, Column 15: end tag for li omitted, but OMITTAG NO was specified /ul? You may have neglected to close an element, or perhaps you meant to self-close an element, that is, ending it with / instead of . Line 32, Column 6: start tag was here br / Line 74, Column 7: document type does not allow element p here; missing one of object, applet, map, iframe, button, ins, del start-tag pC All Rights Reserved Joe's Fruit Shop PTY. LTD. 2009./p? The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as p or table) inside an inline element (such as a, span, or font). Line 75, Column 8: end tag for p omitted, but OMITTAG NO was specified /div? You may have neglected to close an element, or perhaps you meant to self-close an element, that is, ending it with / instead of . Line 73, Column 4: start tag was here p style=clear:both; Line 75, Column 8: XML Parsing Error: Opening and ending tag mismatch: p line 73 and div /div? Line 77, Column 7: XML Parsing Error: Opening and ending tag mismatch: div line 9 and body /body? Line 78, Column 7: XML Parsing Error: Opening and ending tag mismatch: body line 8 and html /html? Line 78, Column 7: XML Parsing Error: Premature end of data in tag html line 2 /html? ? Top Home | About... | News | Docs | Help FAQ | Feedback | Contribute | This service runs the W3C Markup Validator, v0.8.5. Copyright C 1994-2009 W3CR (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy
RE: [WSG] text-shadow: no-shadow ?
According to spec, it has no inheritence but it does in both browsers. I changed it to li instead of li a, the screen shot taken is from li. #element li{ text-shadow: 2px 2px 2px #000;} http://picasaweb.google.com/weblist99/UntitledAlbum Hi Tee, Inheritance does not come into play here. Using #element li a {} you're actually styling all As in the LI, inside its children, grand-children, etc.. -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] css tutorial
Also, please try our Opera Web Standards Curriculum section 27 entitled CSS basics, written and contributed by Christian Heilmann. Here is the hyperlink to it: http://dev.opera.com/articles/view/27-css-basics/ There are a bunch of typos in there. - Extra semi-colons, - The :first-line and :first-letter pseudo-elements contain 2 -- - There is an extra ( in the :lang() pseudo-class example. Also, because of the uniqueness nature of ID, I'm not sure the example below makes much sense (unless the author uses the same ID on various elements across a site). div#example{} matches the element with the id attribute example, but only when it is a div Things like that don't help people who are looking for basic tutorials because if they come to learn the syntax we can't expect them to spot typos or bad practice. -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] css tutorial
On Fri, Jan 15, 2010 at 7:03 AM, Chris F.A. Johnson ch...@cfajohnson.com wrote: Every other discussion group I participate in regards clagnut with derision. There is no good reason for anything other than font-size: 100%. That's not an explanation. ALA published a follow-up by Richard on the same topic, do they not know what they're talking about either? Actually, on ALA I find the text small and the sans-serif font does not help. I have a user styles sheet that sets the font-size on body (100%). It turns out that the sites that think they get it right for most users are the ones that look the weirdest. One I'm surprised to find in that batch is http://www.paciellogroup.com/blog/ With font-size:100% one gets huge *and* tiny fonts on the same page. Imho, this goes against allowing users to browse the web the way *they* choose. -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] AAA Accessibility and validation
In the example you provided, I'd do this: 1) move zoom: 1 to your IE6 rule (and to IE7 rule if necessary) 2) place the IE6 and IE7 rules in an IE ONLY sheet 3) use a conditional comment to call the IE sheet Would that work? If so, please explain your reasons for not doing so. Here are the pros and cons I'm aware of. I'd be interested to hear others. Pros A) enables CSS validation B) avoids possible failure of automated accessibility test C) facilitates site maintenance (easy to find and modify IE specific rules) I'd say it is the opposite. Having to deal with rules in different files does not facilitate site maintenance. Con A) Delays initial page load by requiring additional call to the server That's a pretty *big* CON compared to A and B -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] AAA Accessibility and validation
Nick Zoom:1 is not bad enough to warrant a conditional comment and separate style sheet. It's a valid rule that basically says show the screen at 100%. A user style sheet can still over-ride this rule. It's an easy way to add hasLayout without causing other issues. This is what Microsoft recommended when they introduced IE7 and there's not a strong reason to avoid it. Another way to trigger hasLayout in IE7 without failing validation is to use min/max-height or min/max-height. But I agree, zoom's perfect for those who don't care for CSS validation (does not work in IE5 though). -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] AAA Accessibility and validation
Hi David, On 1/13/10 12:24 PM, Thierry Koblentz wrote: Nick Zoom:1 is not bad enough to warrant a conditional comment and separate style sheet. It's a valid rule that basically says show the screen at 100%. A user style sheet can still over-ride this rule. It's an easy way to add hasLayout without causing other issues. This is what Microsoft recommended when they introduced IE7 and there's not a strong reason to avoid it. Another way to trigger hasLayout in IE7 without failing validation is to use min/max-height or min/max-height. But I agree, zoom's perfect for those who don't care for CSS validation (does not work in IE5 though). At the moment, I am using this to trigger hasLayout for IE 6+7 on elements with default or applied display: block; - .add-layout { display: inline-block; } /* add layout to IE 6+7 */ .add-layout { display: block; } /* does not reset layout */ Valid CSS and does not seem to disturb other browsers. I may be all wet, but limited testing so far seems to work. Any known problems? Not as I know of. That technique is good too for people who care for validation, but the fact that it can't be in the same rule is a pain for maintenance. As a side note, I don't think I'd use it the way you do though - as you're using markup (the class) to fix a browser issue (unless that selector is just to demonstrate the technique). -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Looking for Accessible and Standards based Drupal Main Navigation Module
Hi David, (shameless plug) http://tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp Fwiw, I've used it without issue (other than my own, of course). Nice stuff, me /thimk/... Thanks for the feedback -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***