Re: [WSG] The mailto link
I just want to add that extending your mailto: link to prepopulate the subject is a nice touch. It lets you filter the emails coming in and it saves the user from adding yet another step Href=mailto:f...@bar.com?subject=feedback from bar.com mailto: links are becoming more useful in our mobile world. While not completely supported, you can use the tel: link as well. -- Ted Drake Yahoo! Inclusive Design http://accessibility.yahoo.com Twitter: @yahooaccess Facebook: http://www.facebook.com/YahooAccessibility On 1/4/12 6:18 AM, Lesley Binks lesley.bi...@gmail.com wrote: On 3 January 2012 20:51, Chris Price chris.pr...@choctaw.co.uk wrote: Hi I've been discussing the mailto link with other designers on LinkedIn and wonder what the opinions of other standards based designers are. The original question had to do with the contact form. I suggested that many people don't like contact forms and prefer to email directly from their mail client. A mailto link is a mailto link; a contact form is a contact form. They are two separate entities. I'm not bothered by using either, although I tend not to pursue matters where the on-line presentation is a contact form and no other reasonable form of communication. I prefer to be able to find at least a full address and email on the site, and that the email address pertains to the correct domain. I don't count premium rate telephone numbers as a reasonable form of alternative communication. One response was that an email link follow through to a contact form as some users will be disconcerted when their default mail client opens unexpectedly. The point being that the savvy user will know to copy the email address and paste it in their client if they don't want to use the form. I use Gmail and tend to copy the email but I'm not copying the visible link I'm using the browser's option of copying the actual link. It has always been the default behaviour of the mailto link to fire the local user mail client; likewise I often lift the actual email address off the site and use it without recourse to a default mail client. My argument is that I don't expect an email link to take me to another page and I instinctively feel I'm being led by the nose to do what the web designer wants not what I expect to happen. My rule of thumb is that a web page should do what's expected rather than what's expedient. Its not my job to cater for people's inadequacies, that's the browser's job. A properly formed mailto link doesn't open up a web page, it triggers the local mail client. I would regard creating a link to a contact form using an email address as the link text to be both a misleading presentation of information, however mild, and a poor use of information. Another suggestion was that we should cater to the desires of the client. Unfortunately this could be likened to having a car designed by the salesman rather than the car manufacturer. I don't think there is a simple way to get the mailto link to open in a web based client (though there may be browser specific options). I think it is quite simple; a contact page, with names, address(es), telephone numbers, email address(es) and a contact form with a select option on the email address to use where multiple email addresses are available. For any business transaction, I would want to see the name of the company, a contact address and a non-premium rate telephone number. Then I can decide how to contact the company particular;y in the event of any problems. For anything else, at least an email address should be provided and contact forms are more acceptable there. I still feel there should be some form of contact address available on the site. Regards Lesley *** 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] Accessible Slideshow
Before looking for an accessible slide show, it would help to think about what would make a slideshow accessible. 1. Do the images have alternate text. If the slideshow is adding images to the DOM, make sure the alt attribute is being used. 2. If the images are preloaded in a list, are they truly hidden? Most slideshows use positioning instead of display:none or visibility:hidden to hide images. This allows for smoother animations. If the slideshow is using position to hide images, make sure it is using aria-hidden=”true” and aria-hidden=”false” on the appropriate images. 3. Does the slideshow offer a hover behavior that is also keyboard accessible? This is especially true when an image’s caption is displayed on :hover. Make sure this works with :active and :focus as well. 4. Are there buttons to move the slideshow back and forth? Do they use links like a href=”#”? Add role=”button” to links that behave like buttons. 5. if the slideshow has a main stage that has images loaded into it, are they being announced? If the slideshow is the key focus of the page, set focus to the image when it is loaded. If it is a sub module on a page, you could use aria-live=”polite” to let the user know the slideshow has changed. 6. Are there alternate buttons if it is on a mobile device and uses a custom swipe gesture? These are just some of the features I would look for in an accessible slideshow. -- Ted Drake Yahoo! Inclusive Design http://accessibility.yahoo.com Twitter: @yahooaccess Facebook: http://www.facebook.com/YahooAccessibility On 12/6/11 8:48 AM, Stefan Gaertners ste...@gaertnersnet.de wrote: Hi, habe you tried Eric Meyers S5 http://meyerweb.com/eric/tools/s5/faq.html ? Kind regards, Stefan Am 06.12.2011 um 14:43 schrieb Web Dandy des...@webdandy.co.uk: Hi, Does anyone know of any accessible slideshows which allow text and images? Thanks, image001.gif Elaine Wildash Web Dandy Web Design That Works *** 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 *** *** 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] Accessible Slideshow
Unfortunately, I didn’t find that slideshow yet. The YUI2 carousel with ARIA plugin works nicely. You can set it to auto play, it’s not the same as a slide show. http://developer.yahoo.com/yui/examples/carousel/carousel-ariaplugin.html Ted On 12/6/11 11:13 AM, David Laakso da...@chelseacreekstudio.com wrote: On 12/6/11 12:44 PM, Ted Drake wrote: Re: [WSG] Accessible Slideshow trimmed These are just some of the features I would look for in an accessible slideshow. -- Ted Drake Does such a slideshow exist; and, if so, can you please point to one that uses those features... and, includes any other features that are important to an accessible slideshow? ~d *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Divs for tabular data
I remember seeing this for the first time. I was asked by a backend engineer to help them fix a layout issue in a data table. When I looked at the source code, the page was a jumble of absolutely positioned cells to look like a data table. I shook my head and said he was on his own. I wasn't about to wade into that mess. Positioned divs would be completely inaccessible. It would be a string of numbers with no context to what they mean. YUI makes a great data table module. http://yuilibrary.com/yui/docs/datatable/ You can easily make your data table sortable, generate charts, make it super accessible and more. You can't do the same with positioned divs. ted On 12/5/11 8:44 AM, Hassan Schroeder has...@webtuitive.com wrote: On 12/4/11 11:22 PM, David McKinnon wrote: OK, so I'm working on a project in which the developers are laying out tabular data using divs. They say this is good because: 1. It's fast Compared to what? 2. They can manipulate the resulting DOM much more easily than they could with a table Would love to see examples. 3. Developers find it easier to, say, add or remove columns from the tables, without having to edit the code all the way down the table (no wysiwyg editors here!) ?all the way down the table? So, a hard-coded data table, rather than a set of rows populated by looping through a data source? That's just sad. Perhaps you can gently hint that it's now the 21st Century. And these people call themselves developers? What do you think? Are tables too hard for the real world ... Stop! My sides!! :-) FWIW, *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Story Boards
Hi Marvin I'm not sure what you are trying to build with svg, but maybe you should take a look at Yahoo's YUI Charts. You can use a data table as the source for the charts. This gives users like you access to accessible data while also allowing the YUI library to build an interactive chart for free. http://new.yuilibrary.com/yui/docs/charts/ SVG is better than canvas for accessibility, but I don't think it is as easy to use as a well markedup data table for screen reader users. I wouldn't use SVG for your page elements (headers, links, buttons). Ted On 10/23/11 9:47 PM, Marvin Hunkin startrekc...@gmail.com wrote: hi. well. i am building a complex blindness related site. and now doing this via http://wsi.tafensw.edu.au and now, there is a accessible drawing tool called svg draw 01 from dick baldwin. he is a computer science professor at washington state university. so, how to use this tool. to layout my page elements, links, buttons, frames, headings, etc. using jaws. and then how to visualise all the coordinates. able to create lines, shapes, etc, via a wizard. this is a java based application. and it works, well without using the java access bridge. so, any ideas, trick, tips, how to get this done. as part of the design process. and also, another question. which colours work best for low vision users, and as i am totally blind, but did have sight when i was younger, so which colours, look the best, and also how to visually line out the pages, for this design process. if any one has got any ideas. for accessibility, let me know. marvin. *** 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] Table borders
Sorry to rain on the Russ parade, but your example is missing some critical elements: scope. The th cells define the cell as a header, but we need to say what it is heading. So try this: table class=Table_Text captionClass Roster/caption thead tr td class=no-border/td th scope=colColumn 1 Title/th th scope=colColumn 2 Title/th /tr /thead tbody tr th scope=rowRow 1 Title/th tdCol 1 Row 1/td tdCol 2 Row 1/td /tr tr th scope=rowRow 2 Title/th tdCol 1 Row 2/td tdCol 2 Row 2/td /tr /tbody /table However I think this would also help to use headers, which lets us define at the td level which th cells are important. table class=Table_Text captionClass Roster/caption thead tr td class=no-border/td th id=col1Column 1 Title/th th id=col2Column 2 Title/th /tr /thead tbody tr th id=row1Row 1 Title/th td headers=row1 col1Col 1 Row 1/td td headers=row1 col2Col 2 Row 1/td /tr tr th id=row2Row 2 Title/th td headers=row2 col1Col 1 Row 2/td td headers=row2 col2Col 2 Row 2/td /tr /tbody /table Now that you have a nicely marked up table, add the YUI data table javascript for even more accessibility, plus you can sort, stripe, and even create a chart from the table. http://new.yuilibrary.com/yui/docs/datatable/ Although it's not as pretty as the excel exported markup :-0 -- Ted Drake Yahoo! Accessibility Lab http://accessibility.yahoo.com Twitter: @yahooaccess Facebook: http://www.facebook.com/YahooAccessibility On 9/30/11 2:32 AM, Russ Weakley r...@maxdesign.com.au wrote: Hey Grant, Try something like the code below: 1. The table markup is more accessible - th elements are very important for screen readers 2. There are no presentational attributes (every time we include presentational attributes, a fairy dies!) !DOCTYPE html html lang=en head meta charset=utf-8 titleGrant Bailey/title style type=text/css media=screen .Table_Text { border-collapse: collapse; width: 600px; } th, td { border: 1px solid #000; padding: 1em 2em; vertical-align: top; text-align: left; } .no-border { border: none; } /style /head body table class=Table_Text thead tr td class=no-border/td thColumn 1 Title/th thColumn 2 Title/th /tr /thead tbody tr thRow 1 Title/th tdCol 1 Row 1/td tdCol 2 Row 1/td /tr tr thRow 2 Title/th tdCol 1 Row 2/td tdCol 2 Row 2/td /tr /tbody /table /body /html On 30/09/2011, at 7:01 PM, Grant Bailey wrote: Hello, I'd be grateful for some help on this problem. I need to display a table. No problem except that it is one of those tables that have header columns on the left and right, which means that the top left-hand cell should not appear (i.e. have no border). Like this (please see attachment if the picture does not appear below): feegfdfj.jpg Here is my coding: table class=Table_Text width=92.2% border=1 align=center cellspacing=0 tr style=font-weight: bold; td style=border:none;br //td td style=text-align: center; Column 1 Title/td td style=text-align: center; Column 2 Title/td/tr tr td style=font-weight: bold; Row 1 Title/td tdCol 1 Row 1/td tdCol 2 Row 1/td/tr tr td style=font-weight: bold; Row 2 Title/td tdCol 1 Row 2/td tdCol 2 Row 2/td/tr /table Unfortunately, all of the major browsers show the top-left cell with a border (a bit fainter, but you can still see it), despite my efforts (shown in code above) to render it invisible. If someone could advise me how to make the cell truly invisible I would be most grateful. Thank you and kind regards, Grant Bailey *** 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] How do you cater to users with disabilities?
I work with the Yahoo Accessibility Lab. We push our engineers to go beyond making sure images have alt attributes and truly consider accessibility usability. This includes making sure sites are keyboard accessible, zoom friendly, and screen-reader accessible. ARIA is becoming a larger part of our programming. Most Yahoo sites use ARIA roles and the YUI JavaScript library, which is used on all of our sites, includes many components that integrate focus control and ARIA attributes. You can learn more at http://accessibilty.yahoo.com/library/ Ted Drake On 8/18/11 6:12 AM, Mike Kear w...@afpwebworks.com wrote: How to the rest of you a/b people (i.e. able bodied) cater to users with various forms of disability? Up until recently, I've tended to rely on keeping my code to standards, eliminating tables except for their proper purpose of tabulating data, and hoping that will give the accessibility level required. Do you go to the step of accessing your sites with JAWS or something similar to see how the site works for users with screen readers? I remember in the 1990s when I was working at Australian Consumers Association (choice.com.au) we had someone come and bring his PC with JAWS. The web team all sat in the boardroom getting ever more glum looks on our faces as we saw to our horror how terrible our new design was for this poor guy. We thought we'd got a terrific new design, and were about to launch it, when he did this demo for us. We had to go back and recode everything. This was before anyone was talking about standards though - it was back when the normally accepted method of laying out pages was to use tables, and buttons were nearly always images. I remember being astounded at how fast he was moving around the page, even though we'd unwittingly designed an obstacle course of humungous proportions for him. Our anguish at the time resulted in a far better web site, and convinced me to pay attention to standards and accessibility ever since. But now I'm wondering if simply sticking to standards is enough? What do you all think? Do you include JAWS in your site testing? Cheers Mike Kear Windsor, NSW, Australia Adobe Certified Advanced ColdFusion Developer AFP Webworks http://afpwebworks.com ColdFusion 9 Enterprise, PHP, ASP, ASP.NET hosting from AUD$15/month *** 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] possible to make DT and DD behave like TH and TD column visually?
Don't get me wrong, I love the DL. I've been accused of abusing it way too many times :) However, I think you should simply use a data table for this. The table will solve many of your layout questions. It also provides more structural feedback for screen reader users. For CSS table {border:none; padding:0;} td,th {border-bottom:1px solid #ccc; vertical-align:top;} th {font-weight:bold;} table id=data-attribute summary=Gyokuro basic information tr th scope=rowSummary/th dThe finest of Japanese teas, Gyokuro bushes are covered for several weeks before harvest with bamboo or straw shades to increase the chlorophyll content of the leaves. The results of this transformation are the renowned dark green leaves with high concentrations of Antioxidants, vitamins and amino acids. Celebrated for its emerald green infusion and sweet aftertaste./td /tr tr th scope=rowWeight/th td100./td /tr tr th scope=rowIngredients/th tdN/A/td /tr /table On 3/31/11 7:25 PM, tee weblis...@gmail.com wrote: On Mar 31, 2011, at 4:56 AM, Russ Weakley wrote: 1. I think you invented a new property overholow:hidden. Supposed to be overflow: hidden; ? Typo. 2. If you place the borders on top of the elements, you have no lining up issues: I believe I didn't asked the question correctly. Too tired! The problem isn't seemed to be causing by the border line. In that quick test page it shows correctly though I forgot. Please see this page.http://bit.ly/ijuKS4. click on Product data, the CSS codes are identical to http://jsbin.com/emiye5/6/. You can see that Ingredients (DT) drops under previous set of DD when the content is too short. In most cases, I don't declare width for DL when it's wrapped inside a container (#tab {width:100%}) which already has a width, but in this case, I added a 700px for DL. I thought maybe a DD or DT somewhere else causing it, so I added important rule making sure no extra paddings/margins got in the way. My hunch is somehow browsers couldn't get the correct calculations due to relative position somewhere?! @JC, thanks for the suggestion for wrapping dl on each set. Really tried not to do that to create extra codes as there are too many areas that I couldn't keep them lean. tee *** 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
Hi Steve Can you give some links to research that back up this statement? As far as I know, the screen readers will accept the new tags when you are using something other than Internet Explorer. However, the question is what they do with them. You cannot navigate via articles like you’d use the header navigation. But it’s not going to skip an article. The biggest problems with HTML5 accessibility are: repeated h1 headers, longdesc attribute being deprecated, captioning, and placing text within the canvas. At one time there was a conflict when combining ARIA landmarks with the new elements. But this is no longer a problem as the screen reader software was fixed. Ted On 1/25/11 12:34 AM, Steve Green steve.gr...@testpartners.co.uk wrote: 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? Steve From: li...@webstandardsgroup.org on behalf of Thierry Koblentz Sent: Tue 25/01/2011 04:29 To: wsg@webstandardsgroup.org Subject: 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 *** *** 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
Here are a couple posts on using ARIA with YUI. This information could also go towards jquery. * http://www.yuiblog.com/blog/2008/07/30/tabview-aria/ * http://www.yuiblog.com/blog/2008/10/02/yui-aria/ http://www.yuiblog.com/blog/2009/08/03/aria-made-easier-with-yui-3/ * http://yuiblog.com/blog/2009/03/05/aria-grids/ * http://yuiblog.com/blog/2007/12/21/menu-waiaria/ * http://yuiblog.com/blog/2008/12/08/video-kloots-aria/ Ted Drake Yahoo! Accessibility Lab http://accessibility.yahoo.com On 1/20/11 4:13 AM, James Grant ja...@thirdgate.com.au wrote: Hi WSG'ers, Does anybody have any experience with creating accessible modal windows, aka lightboxes? While I have seen some great lightbox experiments that do allow keyboard control, I haven't been able to find any that will trigger a screen reader to actually read the content within. My project is looking to use lightboxes for field-level help which can contain up to a few paragraphs of textual content, no unique images will appear within the modal window. Once the modal window is open, the only user controls will be to close the window by either selecting the 'close' option, or clicking outside of the content. Thanks! - Jimmy *** 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] alt text on email graphic
If a spider could read the alt attribute, don't you think they could read the href attribute? Alt=j...@smith.com or href=mailto:j...@smith.com; It doesn't matter where you put the valid email address, the spiders will find it. However, messing with images will just make it more difficult on the user. You could encode the link. a href=mailto:#106;#111;#101;#064;#115;#109;#105;#116;#104;#046;#099;#111;#109;;#106;#111;#101;#064;#115;#109;#105;#116;#104;#046;#099;#111;#109;/a I'm not sure if that technique still works. Spiders should be smart enough to decode the text. You could also use javascript to turn something like this mailto:joeB*Dsmith.com into mailto:j...@smith.com, but then your site is dependent on javascript. So you need to weigh the needs of your javascript-disabled users with avoiding spam. Ted -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of cat soul Sent: Monday, November 29, 2010 4:04 PM To: wsg@webstandardsgroup.org Subject: [WSG] alt text on email graphic The technique of using a graphic to communicate an email address in order to foil spiders or harvesters, like this: bob at domain dot com seems pretty clever. Yet, when I think about the alt text for that image, I'm wondering if that alt text could be exploited by spiders... would it be good to handle it this way: img src=mail.gif alt=bob's email and leave it at that? for those who really use alt text, might they be short changed by not seeing or hearing: img src=mail.gif alt=bob at domain dot com or am I making mountains out of molehills here? cs *** 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] best formatting for alt text
There was a description of using creative styles a few years ago. I think it was part of building bullet proof web sites. The theory is that if you had an image with text (fancy header), it would be nice to still have some styles associated with the text that is displayed if the image is broken or turned off. So the markup was h1img src=header-with-text.png alt=this is my header/h1 Now the CSS would offer some styles to the H1 so the text had some nifty colors, fonts, etc. Ted -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Stuart Foulstone Sent: Saturday, November 13, 2010 4:06 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] best formatting for alt text Or rather, start with the the semantic structure of the page, then insert the image into the structure appropriately. On Sat, November 13, 2010 1:46 am, Christian Montoya wrote: On Fri, Nov 12, 2010 at 8:36 PM, Patrick H. Lauke re...@splintered.co.uk wrote: On 13/11/2010 01:23, cat soul wrote: Right..I noticed this while playing around, and I wondered whether it represents an opportunity by making sure that it has some desired formatting, or whether those who rely upon alt information just want normal, smallish text. so if the image was, for instance, a heading (not doing any css image replacement, just putting straight images in the markup), then obviously the entire image would be wrapped in the appropriate heading element. Hear, hear. If you are using images for text, you should still wrap them semantically. -- -- Christian Montoya mappdev.com :: christianmontoya.net *** 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] XHTML or HTML?
Thierry's right. It's time to start making those baby steps into HTML5. But you'll also need to add your charset and lang definition !doctype html html lang=en head meta charset=UTF-8 ... ted -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Thierry Koblentz Sent: Wednesday, November 10, 2010 2:54 PM To: wsg@webstandardsgroup.org Subject: 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 *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] XHTML or HTML?
Benjamin always has a way of cutting through the fog and giving succent advice. Ted -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Benjamin Hawkes-Lewis Sent: Wednesday, November 10, 2010 3:26 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] XHTML or HTML? On Wed, Nov 10, 2010 at 10:34 PM, cat soul cats...@thinkplan.org wrote: Any thoughts on which we ought to be using, To cut a _long_ story very short, if you have to ask this question, use HTML. See also: http://www.webdevout.net/articles/beware-of-xhtml http://dig.csail.mit.edu/breadcrumbs/node/166 http://wiki.whatwg.org/wiki/HTML_vs._XHTML and what information ought to be up at top of an HTML page, along with !DOCTYPE, etc? Typically, character encoding information (in case the user saves the page for offline consumption), page title, links to related resources (e.g. stylesheets for styling, feeds for feed autodiscovery), page description (often excerpted in search results pages). Possibly Open Graph Protocol metadata (http://opengraphprotocol.org/). -- Benjamin Hawkes-Lewis *** 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] HTM5 Semantic markup overly done?
I'm on the fence right now about headers. I've seen use of h2's without a header wrapper in a section. This gives screen readers structure, but it breaks the HTML5 outline methodology. Shouldn't you change it to an h1 when it goes in a header. It's a struggle between building good html5 code for the future and providing hierarchical headers h1-h2-h3 for the screenreaders. Ted -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Jason Arnold Sent: Friday, October 01, 2010 6:12 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] HTM5 Semantic markup overly done? On Fri, Oct 1, 2010 at 6:24 AM, tee weblis...@gmail.com wrote: Is this example overly done? http://playground.html5rocks.com/#semantic_markup section id=articles article header h2a href=#Article Title/a/h2 /header section Lorem ipsum dolor sit amet, /section /article article header h2a href=#Article Title/a/h2 /header sectiongiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. /section /article /section the only overly done part with the above example is the use of the section tag inside the article. I would use the p tag instead like in your below example, but the rest is good. Just remember that section is defined in the spec as a thematic grouping of content, typically with a header so you should also have a header in your section unless it truly doesn't apply. 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 This one is okay except, IMO, that you should wrap the h2 in a header. Also just wanted to point out with HTML5 you can use all h1 tags in your articles instead of h2. And honestly I think any of those ways would probably be okay -- Jason Arnold http://www.jasonarnold.net *** 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] Semantics, lists and links
A screen reader will not say bullet. It will, however grab that list and add it to a secondary navigation tool for the page. Screen reader users are able to see all of the lists on a page, as well as all headers. They can then skip directly to the items they are interested in. So use your lists and headers. It's good stuff. You can also add Aria roles to the list: ul role=main. Ted -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Ellen Herzfeld Sent: Thursday, August 26, 2010 9:35 AM To: wsg@webstandardsgroup.org Subject: [WSG] Semantics, lists and links Hello, I have been, since forever, using unordered lists to mark up navigation links. This seems to be the standard recommended method used by all the people in the know. Depending on the situation, the list will be styled vertically or horizontally. No problem there. However, when CSS is disabled (or when no stylesheet is served for old old browsers), all these links appear as vertical lists with bullets. A screen reader will, I suppose, pronounce bullet every time before every item as shown in Fangs. Now, this is not an issue when the list is four or five items long, but when it gets to ten items or more, I find the long vertical list to be obstrusive. I am working on a site that has a main navigation menu, styled inline, near the top with ten links to the ten major parts of the site. And in one section of the site, all the pages also have have a second horizontal navigation menu with the twenty six letters of the alphabet. Without CSS, this makes for a very long, very narrow, list of links that you have to scroll past to get to the meat of the page. Yes, I do have a skip navigation and go to content menu at the very top, but still, I have a problem with this. An alternative solution is to put all the links in a nav with no list (I'm using html5 elements). The links will then appear on one line when CSS is disabled. I'm not sure yet if a p in the nav would be necessary for old browsers. The items can be separated by a non-breaking space for readability. I am trying to apply best practices and make my markup as semantically correct as possible so I have some questions: Is there a compelling reason to keep the lists? Would the markup be dramatically unsemantic without them? What do you people think? Thanks, Ellen *** 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] Getting my feet wet in HTML5
Tom, just go for it. You can add the modernizr or similar js to get IE to recognize the elements. But you won't appreciate the semantics of HTML5 until you ditch divs for the new tags. I speak from experience. There's a certain level of awareness you get while trying to decide the most semantic structure. Continuing to work with divs/classes will always leave you half way there. Ted -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Tom Livingston Sent: Friday, August 13, 2010 8:59 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Getting my feet wet in HTML5 Sorry,, Corrected Structure: div id=wrap div id=header pHeader here/p /div!-- !End Header -- div id=container class=clear div class=article Content with an H2, a UL, Ps and As and a picture /div div class=article Content with an H2, a UL, Ps and As and a picture /div div class=article Content with an H2, a UL, Ps and As and a picture /div /div!-- !End #container -- div id=aside pSidebar/p /div div id=footer pFooter/p /div!-- !End Footer -- /div!--! end of #wrap -- Dan, I am aware of the HTML5 elements, thanks. I'm just not ready to leap into that right yet, but want to try to understand the semantics of the element and, with classes/IDs, make an analogy with my structure. My 'header' is the header for the entire page. My 'articles' have an H2 in each and can't see why I'd wrap each on in a 'header' element (or analogous one). My structure above is what I am literally using on a page. WHat I am after is an HTML5 analogy to this. Does a div.section belong in there somewhere? THanks -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com *** 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] Getting my feet wet in HTML5
Take a look at the js, it's pretty simple. However, it is true that you are leaving yourself open. At Yahoo, we treat IE6 as an a-level browser. http://developer.yahoo.com/yui/articles/gbs/ So you aren't going to see me push to change Yahoo! Finance to HTML5 tags. However, I have been doing it to smaller projects and am about to convert a client's site to html5 structure. You need to build a site to learn HTML5 semantics, it's like the old days of hybrid table-based layouts. 7 years ago you really needed to ditch tables to truly understand CSS. If you are worried about a client, than do it on your personal site or for a more progressive client. Ted -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Tom Livingston Sent: Friday, August 13, 2010 10:34 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Getting my feet wet in HTML5 On Fri, Aug 13, 2010 at 1:11 PM, designer desig...@gwelanmor-internet.co.uk wrote: Tom, I have 'played' with the simple elements and I like them. I actually wanted to have a 'page' element (or wrapper) since that is an element that is used an awful lot, but I never got anywhere with folk accepting it. For a simple example, see: http://www.betasite.fsnet.co.uk/gam/altgam/gwelanmor.html Also see: This is great. THanks. One other thing that's making me shy from the edge. A production (client site) site that relies on JS to render makes me sweat a little. Can anyone convince me that it's ok? -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com *** 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] Getting my feet wet in HTML5
No, I'm suggesting that if you truly want to learn html5 semantics you need to build a site without divs. Once you understand the semantics you can better understand why you would use the new tags and why you would fall back to divs. But to continue working with divs that have semantic class names will not give you that understanding. It's a mental leap. -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Tony Crockford Sent: Friday, August 13, 2010 10:57 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Getting my feet wet in HTML5 On 13 Aug 2010, at 18:51, Ted Drake wrote: You need to build a site to learn HTML5 semantics, it's like the old days of hybrid table-based layouts. 7 years ago you really needed to ditch tables to truly understand CSS. Are you suggesting that to switch to HTML5 we should avoid the use of div entirely, using only section, article etc to chunk up the content? *** 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] CSS Expandable Menu
The YUI3 menu widget has great accessibility support http://developer.yahoo.com/yui/3/node-menunav/ Accessibility Usability Minded The MenuNav Node Plugin was built with both accessibility and usability in mind. The MenuNav Node Plugin implements established mouse and keyboard interaction patterns to deliver a user experience that is both familiar and easy to use. To that foundation the MenuNav Node plugin adds support for screen readers through the use of the WAI-ARIA Roles and States. Watch this video for a quick a demo of a menu created using the MenuNav Node Plugin using the WAI-ARIA Roles and States running in Firefox 3 using the Window-Eyes screen reader. -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Thierry Koblentz Sent: Monday, June 28, 2010 4:56 PM To: wsg@webstandardsgroup.org Subject: 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 *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Kill this thread: RE: [WSG] IE6 Finally Nearing Extinction [STATS]
I think it's time for this thread to die. Ted From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of zapcat Sent: Wednesday, June 23, 2010 9:37 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] IE6 Finally Nearing Extinction [STATS] On Jun 23, 2010, at 9:29 AM, Sam Sherlock wrote: its clean M$ is in cahoots with hardware vendors seeking to push the consumer into upgrading Yeah, and tho I'm a Mac user, that has long irked me...I hope that, in this economy, the market really spanks m$ for that behavior, and others who engage in it. when you are worried about bills, your job, your future, you don't need to be told that you'll be left swinging in the breeze if you fail to purchase the prescribed upgrades. shameful, that... zc *** 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] CSS off button
I think your requirements may be a bit confused. I would suggest you look at two articles 1. backwards compatible style switcher http://www.alistapart.com/articles/n4switch/ 2. zoom layout by Sir Joe Clark http://www.alistapart.com/articles/lowvision/ Joe tells you why it's a good idea to create an alternate style sheet that is single column, stark, and full of contrast. You could use this theory to switch your user to a simplified style sheet that still maintains some control The style switcher is the script that you are looking for. It's the disable css button. If you really want to turn off css, just have it switch to an empty css file. Ted -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Oliver Boermans Sent: Friday, January 22, 2010 1:54 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] CSS off button Hi Kevin On 23 January 2010 06:52, Erickson, Kevin (DOE) kevin.erick...@doe.virginia.gov wrote: Could anyone please tell me if there is a right way to put a clickable button in a web page that will turn off all CSS? Why do you want to switch off CSS? Reasons aside, the simplest method that jumps to my mind is to use an empty alternate stylesheet and some JavaScript to switch between it and the default [presuming you have all your style in the one external CSS file]. This rather old article explains the concept http://www.alistapart.com/articles/alternate/ If you have the option, a server-side approach as Paul suggests would be more reliable as it would work without JavaScript. Comes back to why!? Hope that helps Ollie *** 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] CSS off button
That's because you have so many different css files link rel=stylesheet href=/styles/import/508.css type=text/css / link rel=stylesheet href=/styles/import/core.css type=text/css / link rel=stylesheet href=/styles/import/body_content.css type=text/css / link rel=stylesheet href=/styles/import/general_html.css type=text/css / link rel=stylesheet href=/styles/import/header.css type=text/css / link rel=stylesheet href=/styles/import/leftnav.css type=text/css / link rel=stylesheet href=/styles/import/rightnav.css type=text/css / link rel=stylesheet href=/styles/import/custom_styles.css type=text/css / link rel=stylesheet href=/styles/import/footer.css type=text/css / It might work better if you had a base css that included imports within it to the sub css files. When you switch that with a new css file the imports should also be skipped. I haven't tested that, but I think it would work. -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Erickson, Kevin (DOE) Sent: Friday, January 22, 2010 2:27 PM To: wsg@webstandardsgroup.org Subject: RE: [WSG] CSS off button Thanks for the responses. The reason I am looking for something along these lines it to have a text only look. A state requirement by State of Virginia for all government web sites. I like the style switcher idea which I am already using but when I switch to an alternate style it only changes what I specify in that alternate CSS file. A blank CSS file would change nothing. Or am I missing something about how to use the style switcher. I have it used in the far right of the banner for changing the text size here: http://www.doe.virginia.gov. cheers -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Oliver Boermans Sent: Friday, January 22, 2010 4:54 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] CSS off button Hi Kevin On 23 January 2010 06:52, Erickson, Kevin (DOE) kevin.erick...@doe.virginia.gov wrote: Could anyone please tell me if there is a right way to put a clickable button in a web page that will turn off all CSS? Why do you want to switch off CSS? Reasons aside, the simplest method that jumps to my mind is to use an empty alternate stylesheet and some JavaScript to switch between it and the default [presuming you have all your style in the one external CSS file]. This rather old article explains the concept http://www.alistapart.com/articles/alternate/ If you have the option, a server-side approach as Paul suggests would be more reliable as it would work without JavaScript. Comes back to why!? Hope that helps Ollie *** 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] 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. -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Nick Stone Sent: Wednesday, January 13, 2010 9:26 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] AAA Accessibility and validation Christian, You said you've been told to place IE specific rules in a separate sheet, but you don't mention why you haven't done so. 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) Con A) Delays initial page load by requiring additional call to the server Aloha, Nick Stone -- Nick Stone, MBA SEO Web Accessibility || coding, writing consulting boa...@nick-stone.com http://nick-stone.com/ 434-284-2840 c...@fagandesign.com.au wrote: From: c...@fagandesign.com.au I guess my question is: Do IE-related CSS hacks cause a document to fail AAA (or A/AA for that matter) Accessibility compliance? Hi Christian, If you mean things like zoom or even proprietary -Moz or -KHTML properties... no, that doesn't affect accessibility. Guidelines are subjective in that it's up to the site's owner to say whether or not his site is accessible after testing it against the various guidelines. The W3 validator is the issue. It should have been programmed years ago to ignore most, if not all, proprietary properties. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel Specifically, I mean something like this .element {float:left;display:inline;zoom:1;margin-right:30px;} * html .element {float:none;} /* IE6 */ *+ html .element {float:right;} /* IE7 */ I've been told to put these IE specific attributes in a seperate IE stylesheet in order to avoid validation errors that supposedly affect the AAA Acessibility check. *** 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] my latest version of my page
Use semantic markup. The nav should be a list, not a stack of paragraphs. Ted -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Dave Westell Sent: Saturday, September 19, 2009 8:37 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] my latest version of my page Hi Marvin, OK I now see you are using mouseover () mouseOut() effects... Your .js script is missing . http://www.alacorncomputer.com/javascript/fruit.js Also your page does not validate, you have one too many closing divides /div after #nav1 Dave... - Original Message - From: Marvin Hunkin startrekc...@gmail.com To: wsg@webstandardsgroup.org Sent: Saturday, September 19, 2009 7:51 AM Subject: [WSG] my latest version of my page hi. well replaced the image for the rollovers. take a look at http://startrekcafe.alacorncomputer.com cheers Marvin. ps: any feedback, good, bad or ugly. *** 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] Accessible websites (was: accessible free web hosting account)
At Yahoo! we build our sites to work without JS and then add progressive enhancement. I don't have the stats in front of me, but we find a much larger number of users without JS. Take a look at this page: http://finance.yahoo.com/news With JS enabled and disabled you'll see all of the customization functionality works. The personalization features were built by Dirk Ginader who also made this presentation on why and how you should build sites for everyone. http://www.slideshare.net/ginader/the-5-layers-of-web-accessibility Ted DRAKE -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Chris Dimmock Sent: Wednesday, July 01, 2009 3:23 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Accessible websites (was: accessible free web hosting account) I'll just address one you raised Jens. Google does not currently parse external Javascript files. So unless Fairfax uses simple inline Javascript, and exposes spiderable URLS, that's probably good enough for most of us to use progressive enhancement methodology . Ask Lucas. When he gets back from SG Chris http://www.cogentis.com.au Is there any other strong arguments for making pages available, without javascript enabled? I'd like to know too. On the Sydney Morning Herald in June less than 0.5% of users had JS disabled. Maybe we should drop that support? Anyone willing to share their numbers/reasons? *** 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] free screen reader friendly web hosting
This is a very confusing email. The host has nothing to do with how screen-reader friendly your web site is. Are you looking for a host which has a screen-reader friendly admin interface? This would be geared to the developer not the end user. The language you use is also not tied to screen reader friendly output, although some would argue to avoid .aspx. If you are looking for a simple, free host and service with decent code try http://wordpress.com ted -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Marvin Hunkin Sent: Wednesday, June 17, 2009 12:57 PM To: wsg@webstandardsgroup.org Subject: [WSG] free screen reader friendly web hosting hi. some one asked on the group about a month ago about free acessible website hstoing. now, looking for some thing like this. free, and screen reader friendly. currently i have a webs.com account. but did not find it very screen reader friendly and using it with jaws 10. now, can you recommend any screen reader friendly hosts, which are free. and also can handle such formats as php, asp, sql, visual basic, etc. any feedback would be fine. cheeers Marvin. E-Mail: startrekc...@gmail.com Msn: startrekc...@msn.com Skype: startrekcafe Visit my Jaws Australia Group at http://groups.yahoo.com/groups/JawsO *** 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] SEO vs. Accessibility
Try Thierry Koblentz's technique that fixes a lot of these issues. http://tjkdesign.com/articles/tip.asp Ted -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Hargreaves, Michael Sent: Wednesday, May 27, 2009 6:07 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] SEO vs. Accessibility If I have a css sprite that needs an alt text I'll position it behind the image. My main reason for doing this has nothing to do with SEO though. With images off there is no context to what would've been rendered if images were on. In my experience you really only need to use this (or the text indent method) for buttons and the like. Most other image elements used (like headers etc) can be specified in html and given an alt. I don't think text-indent will affect SEO at all though, it's a legitimate css property. If the spiders are smart enough to know it's there then they're smart enough to know if it's jammed with an unholy string containing keywords. Michael Hargreaves -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Chris Dimmock Sent: Wednesday, 27 May 2009 12:05 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] SEO vs. Accessibility We can flag text that appears to be hidden using CSS at Google. To date we have not algorithmically removed sites for doing that. We try hard to avoid throwing babies out with bathwater. MattCutts at Oct 21 2005 - 02:09 That was nearly 4 years ago - One of the issues is that sometimes, Google does use automated scaleable' processes for spam control (as is their stated aim) - and sometimes it just rains babies. My point? Any CSS 'hiding' method can be detected algorithmically. And while it might be for accessibility/ usability/ whatever - it could get you in trouble. Mostly it won't, if a human checks it, and there is a accessibility/ usability/ rather than spam intent. But algorithms on their own can't detect 'intent'.. Chris http://www.cogentis.com.au/ On Wed, May 27, 2009 at 10:25 AM, David Dixon da...@terrainferno.net wrote: The thing to remember is that while its doubtful google will spot it through an automatic spider, google do manually check pages (either randomly, or when the spider, or even a person, flag something up). Its that manual detection that will spot this kind of fraud, and will likely result in an immediate ban. regards, David Dixon e: da...@temperedvision.com w: www.temperedvision.com On 26/5/09 17:26, Spellacy, Michael wrote: Hello list! I have a quick question for any accessibility and SEO mavens out there. It was recently brought to my attention that a few elements I have placed on a site that have text indented px to the left for accessibility might be viewed as a form of cloaking by some search engines. Is my colleague correct in this assessment? If so, is there a middle ground that can be met to make search engines and visually impaired folks happy? Thanks in advance! Regards, Spell *** 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 *** _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Note: This email, including any attachments, is confidential. If you have received this email in error, please advise the sender and delete it and all copies of it from your system. If you are not the intended recipient of this email, you must not use, print, distribute, copy or disclose its content to anyone. *** 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] Mysterious background dis-appearing
the background image may have been afraid that Colonel Anna was gonna break him in two. :) Are you seeing this in any particular browser? it looked ok in my firefox. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Re: Browser Backwards Compatibility -- How far back?
The Yahoo! Graded Browser Support matrix is a good standard of what browsers are appropriately supported. http://developer.yahoo.com/yui/articles/gbs/ You can point clients to this page for justifications. It is appropriate for general use web sites. If your users are disproportionally stuck behind outdated computers this will not work. Ted _ From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Sam Sherlock Sent: Friday, March 20, 2009 4:25 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Re: Browser Backwards Compatibility -- How far back? Old Mac Users are stuck I tried to a get a friends mac online and using Yahoo Mail (around the time a ymail dropped support of that browser) it had ie5 and nothing would work at all, no other options it was a second hand (supposedly cost effective machine) phazed into obselence. I frequently see IE6 on win xp in my logs, I have been in net cafes that refuse to update ie to 7 on xp (they did not express why). I am yearning for the day when IE6 can be removed from the equation, but I find following a few simple guidelines much of the trauma can be alleviated (I have just tested a basic liquid grid in ie6 and all is seeming well). I say to clients that I support browsers currently supported by respect vendors + IE6 on xp / win2k (but when more advanced features are aimed for these may work or not on such horrid browsers - and if so to a lesser degree) ~ Its been a while since I have seen win ie 5.x in a log of any of my sites The web is rapidly evolving, which make treeware pretty bad at keeping up. when at college 10+ years ago my lecturer advised to avoid books - since anything printed will need revision by the time its printed (it was seen as an extreme view then ~ still like books myself but I understood his gist) Going too far back prevents much progress ~ clients usually appreciate that Verify everything you read by seeing what others have to say in 'blogsphere'. There is discussion about the jQuery.com site not displaying correctly in IE7 currently the issue has not been identified as yet but the cause is thought to be a plugin/addon for the browsers. (thats something to be careful of when testing ~ if a client complains about display issues check what extensions to the browser are being used) @Sigurd - I am suprised to hear that Silverstripe administration supports IE6. I have been meaning to checkout Silverstripe having heard great things about it and what I have seen is very impressive indeed - S 2009/3/20 MichaelMD md...@spraci.com On Sun, 2009-03-15 at 21:10 +1300, Sigurd Magnusson wrote: Most websites we build at SilverStripe have IE 6.0 as a minimum, and even then, we're unpatiently anticipating the time when we can drop IE 6. I still see quite a few people using IE5 Mac (probably OS9 users stuck with that) in the server logs here and LOTS of IE6 ... so I think it will be a while somehow... *** 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] meta tag questions
You can see dublin core as well as RDF and microformatted information has been indexed by yahoo when you use the BOSS api and/or build a SearchMonkey application. I don't know how much it influences Yahoo's rankings, but it is being used in building the index. http://developer.yahoo.com/boss http://developer.yahoo.com/searchmonkey http://developer.yahoo.com/yql Ted _ From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Ben Dodson Sent: Tuesday, February 24, 2009 12:38 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] meta tag questions I don't know about the Dublin Core issue but my gut feeling with geo.position and your example would be that of course the bed and breakfast in Pisa, Italy should have their location as the hotel will always be in the same place. I think that you've looked at the issue from the wrong side in that you assume it would only show in regional searches (e.g. an italian search engine) whereas in actual fact it should show up in a global search for that region - e.g. if I search for hotels pisa italy I would expect it to show up as it's geo.position clearly states that is where it is and so the search engine can be 100% sure that it is in the area I'm looking for. I haven't done any tests, etc, but that is what I would expect of the tag. How much difference it makes in terms of SEO will be harder to gauge as I doubt that adding that tag will make you rank higher (as the search engines cater for the lowest possible denominator) but it should help in terms of specific search queries. Ben --- e: b...@bendodson.com w: http://bendodson.com/ Feeling social? Connect with me on various social networks at http://social.bendodson.com/ - You might also want to follow me on Twitter at http://twitter.com/bendodson On 24 Feb 2009, at 11:21, Bob Schwartz wrote: I have questions regarding two types of meta tags, Dublin Core and geo.position: 1. Dublin Core: I have only been able to find older studies (2000) regarding the possible improvement in search engine positioning through the use of these tags. The conclusion in these olders studies was no significant imporvement, however they did go on to say that in the future these tags will play a more important role. Has that future arrived or are these tags essentialy still code bloat? 2. geo.position: According to Wikipedia geo.position tags help in returning regional search requests, or as they put it: It understandably makes little sense to look for a baker and find one who has his shop in a completely different town. If this is the case, then it would seem putting geo.position tags on a bed and breakfast site in Pisa, Italy that is trying to reach potential guests around the world would not be a good idea. Anyone have any experience or thoughts regarding these tags? Thanks, Bob Schwartz *** 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] Downloading Fonts
Safari and firefox3 support the @font-face attribute. I don't know the status of Opera and IE8. This allows you to put a font file on your server and reference it in the CSS. Ted _ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of James Ducker Sent: Monday, December 08, 2008 3:13 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Downloading Fonts As a general rule you cannot use non-system fonts on the web, as the end user needs to have them installed as well (I think this is what you're asking?). One workaround is to use sIFR ( http://www.mikeindustries.com/blog/sifr/ ). Also, here is a list of fonts that are generally considered to be web safe: http://web.mit.edu/jmorzins/www/fonts.html - James On Mon, Dec 8, 2008 at 1:03 PM, Marvin Hunkin [EMAIL PROTECTED] wrote: Hi. rebuilding my site. and i have the following fonts in my style sheet. georgia, century school book, courrier, new courrier, comic ms, and others. but i notice, that on my local hard disk, or when i did have it on the web, but closed it for copyright issues. it was only displaying arial. did try searching on google. but found a couple of sites, but did not work. so where can i download fonts for my site? cheers Marvin. E-mail: [EMAIL PROTECTED] MSN: [EMAIL PROTECTED] Skype: startrekcafe We Are The Borg! You Will Be Assimilated! Resistance Is Futile! Star Trek Voyager Episode 68 Scorpian Part One E-mail: [EMAIL PROTECTED] MSN: [EMAIL PROTECTED] Skype: startrekcafe We Are The Borg! You Will Be Assimilated! Resistance Is Futile! Star Trek Voyager Episode 68 Scorpian Part One *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- James Ducker Web Developer (C#, VB, JS, HTML/CSS) http://www.studioj.net.au *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
FW: [WSG] High-Pass Filter and Yahoo's reset stylesheet (question regarding validation)
Here's a reply from Nate K, the architect of grids, fonts, reset, . files in YUI _ From: Nate Koechley [mailto:[EMAIL PROTECTED] Sent: Thursday, November 20, 2008 7:27 PM To: Ted Drake Subject: Re: [WSG] High-Pass Filter and Yahoo's reset stylesheet (question regarding validation) My explanation of the things that don't validate is here: http://tech.groups.yahoo.com/group/ydn-javascript/message/40059 Thanks, Nate On Thu, Nov 20, 2008 at 11:06 AM, James Jeffery [EMAIL PROTECTED] wrote: 20 input, textarea, select Parse Error {*font-size:100%; 20 input, textarea, select Parse error - Unrecognized ;} Test it: http://mi-linux.wlv.ac.uk/~0802390/reset.css http://mi-linux.wlv.ac.uk/%7E0802390/reset.css That's not in reset.css, it's from fonts.css. It's also not the High Pass filter - see here for an explanation: http://tantek.com/CSS/Examples/highpass.html If you're worried about it, extract the IE-only code out of the file and wrap it in conditional comments. - Matthew *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Another Question about JavaScript.
Regardless of the JS, this is a web standards group. This example has no labels on your form inputs. The previous example was using tables for layout. Don't concentrate on a single issue and forget semantic, standards-based markup from the very beginning. Ted *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Mark-up for physical/postal addresses
Personally, IF the address had a name associated with it, I would use a definition list. However, there are some purists out there that can't see beyond using a dl for anything other than defining a word. But John Doe is a term and his address, phone number, etc are describing him: John Doe 123 Acacia Avenue Suburb State Postal Code Tel 888 9581 4077 Fax 888 9581 2835 Can be marked up as the following (including microformats) dl class=vcard dt class=fn orgJohn Doe/dt dd class=adrstrong class='street-address123 Acacia Avenue/strong span class=postal-codeSuburb State Postal Code/span/dd dd class=telspan class=typetel/span: strong class=value888 9581 4077/strong/dd dd class=telspan class=typefax/span: strong class=value888 9581 2835/strong/dd /dl Ted _ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Henrik Madsen Sent: Tuesday, October 28, 2008 9:23 AM To: wsg@webstandardsgroup.org Subject: [WSG] Mark-up for physical/postal addresses Can anyone guide me re. best practice for marking-up physical addresses that would appear like this: 123 Acacia Avenue Suburb State Postal Code Tel 888 9581 4077 Fax 888 9581 2835 Or is it acceptable to keep all in p and use /br's TIA Henrik *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] div over flash
The YUI container library offers the iframe shim, built in for ie6. Watch the wmode:transparent if your flash movie contains actual content. Wmode:transparent makes it justifiably invisible to screen readers. It's basically telling the browser and screen reader the flash movie is for decoration and you can make other stuff obscure it. http://www.last-child.com/make-flash-accessible-to-screen-readers-in-transpa rent-window-mode/ _ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Mark Stickley Sent: Thursday, October 23, 2008 4:02 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] div over flash It is impossible to get a div sitting on top of flash in all browsers. Your best bet is to hide the flash while your overlay is showing and show it when it hides again. If the blank space where your flash was will be obvious you could set a background image similar-looking to the flash on it's container div. Mark 2008/10/23 kevin mcmonagle [EMAIL PROTECTED] hi, forgive me if this it ot, if so please reply off list. Whats the best cross-browser way to get a div on top of swf with css. If i use: param name=wmode value=opaque / with z-index will it be sufficent? -best kevin *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Question about accessibility
It's not too difficult to use CSS to turn a list of links into an image map. Just give the ul the image as a background and position relative. You can then define the size and absolute position of each list item and position the text off screen. This still isn't as accessible as a simple list, but it can work. Another approach is to have a simple text nav. You could then put an empty span in each link and position/size/display:block the spans to sit on top of the image map. I think Andy Budd first described the disjointed rollover with CSS. This gives you the fully accessible text links as well as the fancy image map. You can put a title on the link to have it appear when someone hovers over the link in the image map (not IE). You could also put a hover change on the spans a:hover span {background-position: foo bar;} By the way, the normal text links could be in the footer and the image map in the header with careful use of positioning. Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Joseph Taylor Sent: Wednesday, August 27, 2008 8:37 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Question about accessibility People have already said this, but an unordered list, a little css and some sprites allow for very graphically rich navigation that is usable in almost all circumstances. I have been putting image replaced navigation on all my sites for some time. You could even use a big photograph. Posting what you're trying to do will get you better answers than basic generic responses like this. Joseph R. B. Taylor /Designer / Developer/ -- Sites by Joe, LLC /Clean, Simple and Elegant Web Design/ Phone: (609) 335-3076 Fax: (866) 301-8045 Web: http://sitesbyjoe.com Email: [EMAIL PROTECTED] Jason Pruim wrote: Honestly, I think he just wants a very specific look... He also thinks it looks neater then using plain txt I'll talk to him about it and let him know about the possible down falls with the whole thing... After I read up on image maps that is :) I'm assuming they rely on some sort of client side script? But I haven't googled yet so feel free to ignore the question :) On Aug 27, 2008, at 10:41 AM, Rick Faircloth wrote: You're right about a client like that being a pain in the rear. I had a client who wanted customers to contact them via email, but didn't want to use a contact form and didn't want them to just use a link to email from the website. He was dead-set against forms even though they were the answer. He was so hard to work with, I eventually cut him loose. (Glad I got 50% of the cost up front! :o) I imagine this image-map client was just after a certain look and had been told by someone that an image map was the answer and wasn't open to other solutions which are better and provide the same results. Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Wednesday, August 27, 2008 9:45 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] Question about accessibility Hi Rick, If any client were to tell me how to code their website I would probably tell them to go elsewhere. The client is more than likely going to be a pain throughout the project and then also when making payment. Obviously this is within reason - design aspects - of course they decide. When it comes to the coding, the client most certainly does not know best! If they want it to be of a high quality and well optimised then I will make it using the best of my abilities. There's no reason that they should specify how it is coded, unless they're a developer and they need it formatted in a specific way. This must not be a normal customer anyway if they know about image maps. I'm interested to know why they requested it in the first place.. Quoting Rick Faircloth [EMAIL PROTECTED]: Darren... I find your comment, I would most certainly not allow the use of an image map, interesting. What would you do, as is Jason's situation, if your client demands it? You can always turn down the work, but would you simply because a client wants to do something that you don't like? Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Wednesday, August 27, 2008 7:39 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Question about accessibility Hi Jason, I would most certainly not allow the use of an image map. They are only useful for defining polygon or circular areas on maps (or similar) as links. They are not good for a sites primary navigation. For navigation that is consisting of an image I would create an unordered list: ul id=nav li class=img1link1/li li class=img2link1/li li class=img3link1/li /ul Set the main img background on ul#nav to go behind all the links then set the individual link graphics on each list item anchor
RE: [WSG] Skype changing format of my pages
So, to summarize. The web developer creates a nice looking page with content (phone numbers). A user adds software that takes that content and makes it more useful (click to call). The developer and client doesnt like the way that new functionality looks. The developer and client want to disable the functionality that many users may actually use. Doesnt this sound like a mistake? If a user installs software to make better use of your site, you should allow this. If the client doesnt like the way it looks, have them uninstall the software. I dont think you should hurt the users functionality. If nothing else, it is helping the client by making it easier for the user to contact them. This is why Ebay bought skype years ago. They wanted to make it easier for bidders to contact sellers. For what its worth, I have the skype plugin but have never used the click to call functionality. Its annoying sometimes, but easy to ignore. Ted Drake http://last-child.com From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of designer Sent: Tuesday, August 26, 2008 8:29 AM To: wsg@webstandardsgroup.org Subject: [WSG] Skype changing format of my pages Does anyone know a way to prevent Skype changing telephone numbers into skype buttons on pages I have carefully designed/coded. It bothers others too : http://forum.skype.com/index.php?showtopic=113096 I do not use Skype, but one of my clients does, and my page design (for her site) appears to her with the button instead of the text. (In IE). (She blamed me, at first!) I know she can turn it off by disabling the Skype add on in IE, but what about all the other folk around the world . . . As this is to do with the web designer's work being tampered with, I feel sure it will come under the heading of standards and accessibility. Sadly, I cannot validate it for myself, but I expect it will be deadly. Anyone got any clues? Bob www.gwelanmor-internet.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] iphone should not be part of your url
Slightly off topic... There is a really good Wordpress template/plugin that detects the very specific user-agent for iphone and touch and changes your theme to an iphone specific layout. Sure, it's arguable if you should design for a particular appliance. However, they've done the work for you and it works great, although a bit generic in look and feel. You can always make adjustments to the theme for personalization. Ted www.last-child.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Keryx Web Sent: Sunday, July 20, 2008 2:44 AM To: wsg@webstandardsgroup.org Subject: [WSG] iphone should not be part of your url I am feeling moody today, but... Are we selling our soul for a shiny newish toy from Apple? A specific app or device should not be part of an URL. Period. URL's like iphone.domain.com are an abomination! Even if the content is standards based. Lars Gunther *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Mobile graded browser support
FYI: David Storey is one of the lead engineers of Opera Browser. It's a rare honor to have a browser architect reflect on the industry in mailing lists. Do you see similar responses from Firefox, Safari, or IE architects? So, keep his suggestions in mind, he knows what he's talking about. I just wanted to make sure people realized the relevance of his comments. You may want to go back and restore any of his messages that were deleted and save them for future use. Ted *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] web optimization
The best information is on the Yahoo Developer Network. http://developer.yahoo.com/performance/ Ted _ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Monday, July 07, 2008 1:40 PM To: wsg@webstandardsgroup.org Subject: [WSG] web optimization Hi masters. I would like to know more about web optimization. What are the things to check to make sure that the page loads faster. Thanking you Naveen Bhaskar *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Breadcrumbs showing organisational structure and usability
Damn, this is refreshing to hear for a change! Enough said. Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Mark Harris Sent: Friday, June 06, 2008 9:13 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Breadcrumbs showing organisational structure and usability libwebdev wrote: My organisation manages around 7000+ pages for 100s of departments, using a CMS. Mine is the only department outside the CMS, just because we can. We have been persuaded (read: bullied) to redesign our header to exactly match that of the parent organisation. I have no problem with that per se, but theirs includes breadcrumbs, and we don't want 'em. Who pays your bills? Golden Rule is that the guy with the gold makes the rules. Suck it up. Because we can is not a valid reason to do anything. You are part of the organization, yes? Therefore you should fit within its structures and strictures, whether you like that or not. If they are wrong, document it and prove it, otherwise it sounds like petulance to me. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Stumped need suggestions - how to highlight two links at once
First off, I'd question the usefulness of this. The disjointed relationship between the links would merely confuse the user. It would be really ugly to do this but here you go li class=disjointedmessa href=/ id=bloodp Blood PressurespanBlood Pressure/span/a/li In your style sheet, you'd give position relative to the main container. .disjointedmess a span {display:block; position:absolute; top:450px; left:350px;} .disjointedmess #bloodp span {top:500px;} As I said, this is really ugly and I would recommend against it. Actually, scrap the whole mess. If you really, really, really need to do this, JavaScript is the only solution. My head is starting to swirl. Ted _ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Likely, James A. Sent: Wednesday, June 04, 2008 4:34 PM To: wsg@webstandardsgroup.org Subject: [WSG] Stumped need suggestions - how to highlight two links at once Hello, I need help/suggestions. Want to highlight two links at once if you rollover on of them. I attached an example to make things easier. Basically if you rollover the risks on the right side of the page, the same link would highlight in the left navigation. I am able to get this working using target and hover if they are in the same li but as you can see that would not be the case for this. I am stumped and not sure where to look. Does any one have any suggestions on how this could be done while keeping web standards in mind? Thanks for the help! James hrascreen.jpg *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Alt versus Title Attribute
Sorry but on hover, IE6 will show this is a dog and other browsers will show oh no it isn't If your tooltips are really that critical, use the YUI tooltip javascript to get cross-browser compatibility to display the title attribute. You can also style them. http://developer.yahoo.com/yui/container/tooltip/ You really shouldn't depend on tooltips for content. Think of them as an added element on objects whose purpose or action is not immediately obvious. Here's a better usage to let users know they are leaving your site. It's not the only way of doing this, but an example. a href=http://paris.org; title=this will take you to the Paris.org web siteimg src=paris.jpg alt=city of paris//a Ted -Original Message- Jason Ray wrote: The information in the alt attribute will only display when the image is not available - [snip] The information in the title attribute will display when the pointer hovers over the object or image. Just to confuse the issue, as well as clarify it, this example: img src=../../sitegraphics/dogandlead.gif alt=this is a dog / WILL show the message 'this is a dog' when hovered in IE, even when the image is present, whereas this one: img src=../../sitegraphics/dogandlead.gif alt=this is a dog title=oh no it isn't!/ Will show oh no it isn't! on hover in all browsers (well, common ones anyway) and only display the alt content when the image is missing. IN other words, title takes preference over alt, so far as display on hover is concerned. That means (to me) that it's safer to do both. Bob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Fwd: using fieldsets and legends (outside a form) for adding structural markup
Thierry Koblentz wrote: Does that mean we should drop the ABBR element because IE can't handle it properly? Julien wrote: You have the answer: http://www.tjkdesign.com/articles/how-to_fix_the_ABBR_element.asp ;) Touché! *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Fwd: using fieldsets and legends (outside a form) for adding structural markup
Hi Julien A little history may help. In the early days of standards-based markup, people were looking for more structural ways to markup content. It was a bit of a wild west and you saw various attempts to replace a table with x, y, or z. Unfortunately, the standards-based developers did not always read the html guidelines, or the documentation was just vague enough to give some flexibility (Ive been rightly blamed for bastardizing my much beloved definition list). So, there were a number of sites that began using fieldsets and legends outside of forms. You may still find documentation talking about how nice it is to work with. Unfortunately, fieldsets and legends are only for forms and you shouldnt use them otherwise. Ive actually been dealing with this recently in the zemanta firefox plugin. This inserts a fieldset with a list of links for adding related content to blog posts. I logged a bug and theyll fix it in a future release. But it just goes to show this is a commonly misused pattern. Go for the header and div. its semantic and the header gives screen readers (and Opera) something to navigate with. Ted Drake Last-child.com _ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Julián Landerreche Sent: Tuesday, May 20, 2008 9:45 PM To: wsg@webstandardsgroup.org Subject: [WSG] Fwd: using fieldsets and legends (outside a form) for adding structural markup A workmate come with this idea, which then I have searched on web and haven't found too much information about it, but this: [1] and [2]. The idea: using fieldset and legend for adding structural markup/labes [3]. It seems that using fieldsets _outside_ forms doesn't make the code to invalidate. Also, in HTML 4.01, legend is required, but optional in XHTML. Currently, I like the approach of adding structural markup using a heading (hn class=structural) even just a simple strong class=structural, and if necessary, hide them by CSS I borrowed the idea from NetRelations.se and 456bereastreet.com. Example: div id=main-nav strong class=structuralMain navigation/strong !-- or hnMain navigation/hn -- ul liaSection 1/a/li liaSection 2/a/li liaSection 3/a/li /ul /div So, applying fieldset and legend this could be rewritten like this: fieldset id=main-nav legend class=structuralMain navigation/legend ul liaSection 1/a/li liaSection 2/a/li liaSection 3/a/li /ul /fieldset Another example: a list of actions (that are in fact, simple links, so, it's just another navigation) where it could make even more sense. fieldset id=actions legend class=structuralYou can do the following/legend ul liaCreate/a/li liaDelete/a/li liaEdit/a/li /ul /fieldset Putting aside anything related to CSS styling (legends could be difficult to style, but aren't really difficult to hide using display:none; although using position: absolute; left:-px could be better for accesibility, but that positioning method on legends has inconsistencies across browsers): 1. Could there be accessibility issues using fieldset/legend outside a form? 2. Or could this method enhance the accessibility (in fact, structural labels enhance accessibility)? 3. Is there any other research/resource that can add some light on this? Thanks. Julián. [1] http://www.opendesigns.org/forum/discussion/2047/ [2] http://drupal.org/node/233928 [3] http://www.usability.com.au/resources/source-order.cfm *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Older Browsers
libraries, government organizations, military, and other large organizations have locked down computers that don't allow installation of fire fox. They also have purpose built web applications that only run in IE6 that are critical for their day to day jobs. That is a major reason for the large ie6 userbase still. This is also why microsoft keeps saying they can't break stuff by upgrading to full standards support. This is why ie8 is causing issues and has the option of rendering a page in the older manner. So, if you are building a web site for your portfolio and don't need to worry about those organizations, feel free to add your firefox only link. If, on the other hand, you are building a site with a mass audience, IE6 is still on the horizon. ted Krystian - Sunlust wrote: IE5 ? Each time I hear about IE5 I want to laugh, honestly, IE6 is old, and most companies that actually create revenue in our modern times use Vista and IE7, who would worry/use IE5? My friend who I just finished designing website for is using IE6 but his computer is like 2-3 years old, what kind of a company uses that old hardware ?? Anyway, end with the rant, in my opinion there should be some strong compaign to cut the usage of IE5 and IE6 because it's just silly to try to develop modern websites in our web 2.0 world for those useless browsers. It's like trying to design new aeroplanes and test them with steam engines instead of jet ones. Get a grip, for old browsers theres only one kind of a website I would create: Click this button to download Firefox. Regards, *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] :: CSS Code Formatting ::
From Yslow http://developer.yahoo.com/performance/ Reduce the number of css files used Link to them in the top of the page, no inline styles Gzip and reduce the whitespace when going to production. These are fairly simple steps for the average web developer. Visit yslow for more performance tips. _ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ross Bruniges Sent: Tuesday, May 06, 2008 4:31 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] :: CSS Code Formatting :: Ultimately you want to use one version during your development process (to ensure readability between your development team) but then have a smaller/compacted version to be used once you deploy to the live server (and at which point it's not the end of the world if your CSS is difficult to read) A best of both worlds approach ;- - Original Message From: Amrinder [EMAIL PROTECTED] To: WebStandards Discussion Lish wsg@webstandardsgroup.org Sent: Tuesday, 6 May, 2008 2:49:24 PM Subject: [WSG] :: CSS Code Formatting :: Which approach is better? Should we go for code readability as described by Smashing Magazine or follow what Andy said. _ Sent from Yahoo! Mail http://us.rd.yahoo.com/mailuk/taglines/isp/control/*http:/us.rd.yahoo.com/e vt=52418/*http:/uk.docs.yahoo.com/nowyoucan.html . A Smarter Email. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] An efficient CSS architecture
The Yahoo YUI CSS framework is a big help. http://developer.yahoo.com/yui/ The Reset, base, and fonts give you a good foundation. The grids make it super easy to build layouts. Combine all four into a single css file: http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css And you've got some good performance. The above link means Yahoo handles the distributed caching for you. This means you only have to concentrate on what makes your sites unique. You'll be surprised how lean and efficient your final css markup is when you remove the foundation cruft. Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Karl Lurman Sent: Thursday, April 24, 2008 8:42 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] An efficient CSS architecture Jens, I recommend googling CSS Frameworks. Also, I recommend looking at a site I implemented a CSS framework of my own. It sounds very very much like your approach. http://www.athletics.com.au It works on the concept of layers that can be used to progressively enhance the visual appearance of a given HTML document set. Its actually the base css framework for a content management solution developed by a company called Datalink here in Melbourne, my previous job. Being part of a CMS, it has a few additional layers to further customise the site with respect to customer requirement. Similarly, I used namespacing to separate styles that are part of the base framework with styles that are customer specific. The beauty of the framework is that it is consistent and easy to learn. The idea being that the framework remained unchanged, and only theme and customer specifc stylesheets affected the cascade. Another added benefit was in knowing which sheet a specific style resides in. This was extremely helpful before the likes of Firebug. The only real draw back of this approach is the initial page load. There is an overhead in downloading so many different stylesheets. The best thing to do in this case is to compile your stylesheets into a single build. This is the approach we are applying at my current job here at SitePoint. Good luck with your own framework! :) Karl On Thu, Apr 24, 2008 at 4:05 PM, Jens-Uwe Korff [EMAIL PROTECTED] wrote: Hi all, I'm currently in the lucky position to be able to design a CSS architecture from scratch. I was thinking of creating a layered approach where I have a CSS layer for - the CSS reset - the site layout (structural parts, ie. columns, rows, header, footer) - the site's elements (boxes which can be reused across pages; a box might contain images, heading, paragraphs) - the site's skin (colours, sprites etc.) I'd like to know if you have been through this thought process and if you have proven concepts that you would like to share. (You can email me offline too, but we've got a long weekend here so I'll contact you Monday.) Thank you! Cheers, Jens The information contained in this e-mail message and any accompanying files is or may be confidential. If you are not the intended recipient, any use, dissemination, reliance, forwarding, printing or copying of this e-mail or any attached files is unauthorised. This e-mail is subject to copyright. No part of it should be reproduced, adapted or communicated without the written consent of the copyright owner. If you have received this e-mail in error please advise the sender immediately by return e-mail or telephone and delete all copies. Fairfax does not guarantee the accuracy or completeness of any information contained in this e-mail or attached files. Internet communications are not secure, therefore Fairfax does not accept legal responsibility for the contents of this message or attached files. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] animated scroll
Ah, where's your sense of adventure? Certainly hundreds of javascripts for 1 pound means quality. It reminds me of a night with two super-gigantic pizzas for $2.99. They may not have been good, but I didn't forget about eating them for months. Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David Dorward Sent: Thursday, April 24, 2008 2:08 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] animated scroll On 24 Apr 2008, at 12:49, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Hi , You might want to try this. http://www.quidascript.com/index.php?main_page=product_infocPath=59product s_id=125 I got this package it's cheap as chips and has hundreds of javascripts... Given the liberties they take with O'Riley's trademark ( http://www.quidascript.com/index.php?main_page=product_infocPath=4products _id=13 ), the sheer pain of On the loading of a page, this script changes background colors quickly then returns to normal and the doesn't-work- in-outside-ieness of Have your visitors easily bookmark your site into their browser favorites ... I would avoid this. It might be cheap, but any reward for producing something of that quality would be too much. -- David Dorward http://dorward.me.uk/ http://blog.dorward.me.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Dreamweaver CS3
I use Dreamweaver in code view. However, it makes it easy to convert a semantic marked-up word document into valid code, is easy to organize code, and I am used to the key commands. That probably describes dozens of editors for different people. If it comes with a package, you're in good shape. If not, you may want to consider cheaper options Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of kevin mcmonagle Sent: Friday, April 04, 2008 1:48 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Dreamweaver CS3 I think its very handy even though i hardcode most stuff. Its good for organizing your work flow, with document tabs and what not. The code is pretty clean these days and theres a good built in validator. I think even object embedding (.flvs and what not) is pretty unobtrusive. Sorry if thats off topic. James Jeffery wrote: I've been thinking about buying the new version of Photoshop and Illustrator, as i just purchased a new dual core iMac. Currently i use BBEdit but im thinking about switching to Dreamweaver as i might aswell purchase the creative suite. Is the new dreamweaver any good for us developers? This may not seem related to web standards but i feel it does because back when i used dreamweaver - it was the days when it bloated out your code and caused friction for many developers. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Rogue text appears in IE6.
That is one of my favorite ie6 quirks, the mysterious duplicated text bug. I hope that's what you have and not just a bad comment. It's one of those things that have you scratching your head and marveling over the oddity of it. The answer is at position is everything _ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rob Enslin Sent: Thursday, April 03, 2008 11:51 AM To: wsg@webstandardsgroup.org Subject: [WSG] Rogue text appears in IE6. I've recently built a website trying to move towards more standards-compliant code. After the delight at pushing the site live my world 'caved in' (a little over-dramatic maybe) this morning when a colleague noticed rogue 'ls. text some way down the home page. Live site: http://www.londoncalling2008.com Screen-grab in IE6: http://www.flickr.com/photos/doos/2384241027/ Testing the site: IE7 - no problem FF2 - no problem Safari/PC - no problem Safari/Mac - no problem FF2/Mac - no problem ** IE6 - PROBLEM (http://www.flickr.com/photos/doos/2384241027/) Could anyone find an explanation for this? -- Rob Enslin http://enslin.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] long description and its implementation
It's been a while since I've dealt with the issue of screen reader accessibility and UFO insertion. I thought I remembered ours being screen reader accessible until using window mode: transparent. Here's a blog post about our solution. http://www.last-child.com/make-flash-accessible-to-screen-readers-in-transpa rent-window-mode/ The flash movie is no longer on Yahoo Tech Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Per Allan Johansson Sent: Monday, February 04, 2008 3:06 PM To: wsg@webstandardsgroup.org Subject: RE: [WSG] long description and its implementation Quoting Steve Green [EMAIL PROTECTED]: Screen readers do not read Flash content that is embedded using unobtrusive techniques such as SWFObject. I expect they would read the content that is supposed to be replaced, but I have never encountered an implementation where there was any alternate content. Does anyone have an example I can check? http://www.fruhagen.no/page?id=889 The leftmenu is a big flash. The site was blind to Google, but in the replacement div I also print the sitemap as plain html. Google was happy and the site was open again :) div id=swf-leftmenu ul lia href=page?id=889 title=ForsidenForsiden/a/li lia href=page?id=989 title=MenyMeny/aul lia href=page?id=990Bordbestilling/a/li /ul /li lia href=page?id=984 title=Hva skjer hos ossHva skjer hos oss/aul lia href=page?id=985En fin side, noe skjer/a/li /ul /li lia href=page?id=977 title=Jobbe hos oss?Jobbe hos oss?/aul lia href=page?id=978Jobbe hos oss?/a/li lia href=page?id=979Ledige stillinger/a/li lia href=page?id=986Kontakt oss/a/li /ul /li lia href=page?id=971 title=Om Fru HagenOm Fru Hagen/aul lia href=page?id=976Fakta/a/li /ul /li lia href=page?id=980 title=BildegalleriBildegalleri/aul lia href=page?id=981Bildegalleri/a/li /ul /li lia href=page?id=973 title=SidekartSidekart/a/li lia href=page?id=975 title=FeilsideFeilside/a/li lia href=page?id=991 title=startstart/a/li /ul /divscript type=text/javascript var so = new SWFObject('binary?id=44180', 'leftmenu', '223', '545', '9', '#efefef'); so.addParam('wmode','transparent'); so.addVariable('XMLfeed', 'page?id=965%26pid=889'); so.write('swf-leftmenu'); /script Work just fine as a good replacement. I should really update my css to make it a little better to look at if the flash fails! I made the same deal here: www.fridays.no -- Per Allan Enonic *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Markup question
I would agree with this. The numbering is not truly ordinal and you'll possibly want to add sub elements in the future. Further, I would agree that a definition list is more appropriate that too many headings. dl dtblah blah blah/dt ddem1./em text/dd ddem2./em /dl Now, this can be modified. You could have one dd for each dt and insert paragraphs into that instead of multiple dds. I would look at the content. If each paragraph stands on its own and offers a different definition of the rule, use separate dd's. However, if each paragraph relates with the other paragraphs, I'd put them in one dd and add the em to each p. I'm using an em because it is information that should stand out but not strongly. By separating it with an em, you are not confusing the text, it's not 1.foo it is 1. foo ... Further, if you use the dl approach, you could also add Thierry Koblentz's expanding/contracting dl-based FAQ page (http://tjkdesign.com ) Ted Drake http://last-child.com Paris, France -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Mike at Green-Beast.com Sent: Wednesday, November 28, 2007 11:04 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Markup question Hi John, I would use either a definition list or plain old headings and paragraphs. I say this because while they are numbered, I wouldn't think they are actually ordered. An ordered list should be used if the ordering is specific (think driving directions), but a club constitution wouldn't be ordered. I would think the numbers are used to identify the content sections but not the ordering. To retain this probable meaning, a heading with the number as part of the heading would be the most logical, most light-weight, and most accessible solution. This could be followed by the same within the paragraphs, perhaps adding a strong tag to the number to show importance (that is officially what strong is for). My secondary suggestion would be a DL as I wrote, but again with the numbers added in as content. Respectively, Mike Cherim http://green-beast.com - Original Message - From: John Faulds [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Wednesday, November 28, 2007 4:19 PM Subject: [WSG] Markup question I have to mark up a club constitution where all the paragraphs are numbered but there are also headings that are supposed to relate to paragraphs, e.g.: Heading 1 1. Paragraph goes here 2. Paragraph goes here 3. Paragraph goes here Heading 2 4. Paragraph goes here 5. Paragraph goes here Heading 3 6. Paragraph goes here etc. An ordered list seems like the most obvious choice but what would I do with the headings which fall outside of the list items? -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Re: worst site I've seen lately
Welcome to the world of post-iPhone web design. I've already seen a Yahoo maps hack that adds the same sliding behavior. Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Tom Roper Sent: Sunday, October 28, 2007 6:23 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Re: worst site I've seen lately It hurt my eyes!! What an erratic use of flash! Sent from my iPod Touch On 29 Oct 2007, at 00:30, Christian Montoya [EMAIL PROTECTED] wrote: On 10/28/07, Devi Web Development [EMAIL PROTECTED] wrote: On 10/28/07, [EMAIL PROTECTED] wrote: I just found what I consider to be an extremely annoying, very blinky website someone spent way too much time writing flash for. http://www.ourtype.be/ Sorry, I didn't intend to send that to wsg, although I guess it's related... It kind of is... this could have been done with Flash or Javascript, but the end result would have been the same... bad! Horrible IA here, I can't really skim or even get an idea about the fonts and I can't imagine people would really spend time on that site. -- -- Christian Montoya christianmontoya.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] How to make DHML cover flash
You can get dhtml to cover flash by setting the flash to use wmode:transparent. However, this makes the content in the flash invisible to screen readers. IE6 is hell with z-index. Especially when combined with form elements. IE7 is much better and you should be able to create a page that works in all browsers with just a few issues in IE6. Yahoo! published the Graded Browser Support chart to justify which browsers can be supported reasonably. I don't think the browsers listed below are A-level. However, you shouldn't build to IE, but to standards-compliant browsers, like firefox/opera for win. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Michael Kear Sent: Monday, October 22, 2007 6:14 PM To: wsg@webstandardsgroup.org Subject: RE: [WSG] How to make DHML cover flash Thanks Rogier, I appreciate your help. Since we are likely to have perhaps 1 or 2 users only using any of those browsers, and by far the vast majority of our users are using WindowsXP with IE6 or IE7 (remember this is not a IT related site - our customers are tshirt retailers and advertising agencies) I've decided the cost/benefit of fixing that isn't worth it. The few users inconvenienced by the issue can just use the back button or click on one of the top menu items and get the drop downs from there. Sorry for those people, but them's the breaks. Sometimes you have problems you know are there, but just simply aren't high enough in the priorities to get fixed. I have several other deadlines with this client to meet, and they're far more important than this one. But you're right, Rogier, it ought to be fixed for those users, but it's not going to be unless I have a slow day sometime. Cheers Mike Kear Windsor, NSW, Australia 0422 985 585 Adobe Certified Advanced ColdFusion Developer AFP Webworks Pty Ltd http://afpwebworks.com Full Scale ColdFusion hosting from A$15/month -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rogier Schoenmaker Sent: Tuesday, 23 October 2007 4:55 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] How to make DHML cover flash Hello, Just so you know, there's no dropdown shown in Firefox (IceWeasel) for debian, neither for Epiphany and Konquerer doesn't seem to work with flash. Hope it's useful. Regards, Rogier Schoenmaker. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Popup 'box' on hover
I think it was Jeremy Keith that railed against having CSS do what JavaScript should do and vice versa. This is going beyond what CSS is good for. You'll have inconsistent behaviors, require the user to download invisible images, and more. I'd suggest looking at the container library with the YUI. You'll get great control of the hover activity and the positioning of the popup/div. You can also use AJAX to grab the image dynamically or use the YUI lazy loader to save the initial download expense of the invisible image. http://developer.yahoo.com/yui/container/ Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Nick Roper Sent: Thursday, August 23, 2007 9:01 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Popup 'box' on hover Thanks guys - excellent stuff. Nick *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] HELP with CSS
Hi Olajide Your page suffers from a common ailment. You are approaching CSS before structural markup. You need to re-build your page with semantic markup and then apply the CSS. Here are some common problems that you have. Multiple h1 elements. The H1 should only appear once and should define the whole page. Flyer Design and Nu' Image... should be h3 elements. Div class=thumbnail is repeated. Divs have no structure and are just a container. This should be an unordered list with each div an li and class=thumbnail applied to the ul Why are you using a block quote when there is no quote inside? p In 2005, me and a couple of the youth took on this project to start a youth magazine for the church. Here is the outcome. Designed by yours truely. /p This is a statement by yourself and you are not referencing an outside source. The blockqoute is an incorrect use. Don't use inline images to replace a simple background color: li img src=images/red.gif alt=Olajide Olaolorun height=40 width=40 /li li img src=images/red.gif alt=Olajide Olaolorun height=40 width=40 /li Be careful with using color:#fff without applying a background color to the container. Look at your site with images disabled, white on white text is not very useful. To repeat, you're not alone. Too many people approach CSS without having a good understanding of structural markup. Your code will be bloated and you will end up with complicated CSS until you understand how to use the structural elements correctly. Ted Drake www.last-child.com -- From: Olajide Olaolorun Sent: Thursday, July 26, 2007 1:18 PM To: WSG Subject: [WSG] HELP with CSS Can someone help me out here: http://www.olajideolaolorun.com/gfx/ There is a problem with where the text start and where the pictures end.. For some reson it loads under the pictres and i have to use the p tag to create spacing for it... can someone help me out. -- Best Regards, Olajide Olaolorun ### Personal: http://www.olajideolaolorun.com Business: http://www.tripleo.biz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Accessible Drop Down Menu Example
On Behalf Of Ryan Moore was just looking for an example of a good accessible drop down menu for part of a web application i'm developing. From Thierry --- plug src=http://www.tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp; / HTH --- Regards, Thierry | www.TJKDesign.com - Also, the Yahoo! User Interface library has a nice menu script that is very accessible. It even has full keyboard support. http://developer.yahoo.com/yui/menu/ Ted *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Firefox Wmode
John wrote: Hello, Does anyone have any experience dealing with the bug in Firefox that disables mouseover events in Flash when the animation file is placed in an absolutely positioned element and the Wmode parameter of the animation is set to transparent or opaque? I've built a page where an animation is positioned beneath some other elements, and a button is not clickable in Firefox. Thanks, John --- Do you have other flash items on the page? We had a problem like this while building Yahoo! Tech. We played around with z-index elements for days. Eventually, we discovered an overlapping flash module that was actually throwing a transparent layer above other elements. While the bad flash movie was fairly small, it had animated sections that grew and caused the problem. Also go through your javascript and look for anything that is creating a container with z-index that could be causing an overlap. I hope that helps Ted Drake www.last-child.com http://www.last-child.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] sliding door based button breakign on :active state
Im trying to investigate an issue with a button that uses sliding doors for flexibility. It looks good for normal and hover states. On the active state, the button changes sizes and the backgrounds no longer match up. Heres a test page: http://answers.yahoo.com/question/index?qid=1006032502703 Notice the button for See More Questions in Internet I know the nested strongs are not good. Im going to replace those with something more appropriate and Ive tested it with a replacement. That is not the issue. Has anyone come across an :active issue before? This is a new one for me. Thanks Ted Drake Yahoo! Answers Coming soon... European Finance - Paris Member of the Yahoo! Accessibility Stakeholders Group Enable Your Audience Are you serving the 55 millon kids and adults with disabilities in the United States? How about the 550 million around the world? *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] style sheets - best practices
Hi all I used to think that modularizing css was a grand idea. It certainly makes it easier to maintain your code. At Yahoo!, we have a huge responsibility to reduce our server demands and make pages load as fast as possible. We have found that it is actually better to have one enormous css file than 5 or 6. It requires fewer http requests and you can't count on the user having a cached version on their machine. So, if you are building a site that gets moderate to low traffic, go for the multiple css files and import or link. If you are building a site that will get significant traffic and your server load is important, you should consider consolidation. One other thing about imports; IE6 will get buggy if you only use imports. You should have one css or js link to avoid problems. Ted Yahoo! Tech (Now hiring! Looking for someone that knows CSS, JS, Standards, accessibility, php, xml... Send a resume to [EMAIL PROTECTED]) *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
rel post, was: RE: [WSG] style sheets - best practices
Barney, Do you have any idea where that article was or who wrote it? I'd like to read this. Thanks Ted A while back I read this article on the secret power of the rel property in links... The author went about listing examples of different objects you could link and different terms for what relevance they might have (hence rel values). His enthusiasm was tangible, but he gave absolutely no indication of how this would improve any appreciable aspect of your page as far as user experience was concerned. Am I just being cynical or is it really just a bit unnecessary? Regards, Barney *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] broken sprite - very odd ie6 thing
Hi All I love using sprites, but I've never seen this happen before. I've got a sprite that looks like this + + Only imagine the top plus is a different shade so that when you hover, it shifts and changes color. Simple enough. Only, in IE6, it looks like this in the link _ _ |_ _| _||_ _||_ Instead of +link Has anyone seen this before? I don't know why it is showing such odd behavior with the background image. There's another link in the list with a similarly broken arrow and another with a perfectly fine printer sprite. Ted Drake Front-end Engineer Yahoo! Tech ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] absolute positioning, z-index, and IE6 - summary
Hi All I've been struggling with a conflict between an absolutely positioned drop down list with z-index and the objects that follow it in the page. After doing a lot of testing and searching for information, I've been able to solve some of the issues. I've got a couple blog posts on www.last-child.com about the issue. I thought I'd share the summary for those interested or have been having the same issue. . Conflicting Z-Index in IE6 Internet Explorer 6 has an issue with positioned elements that use z-index. Here's the trouble I just had with this: I have a topnav consisting of an unordered list with a dropdown menu on one of the list elements. The dropdown is a nested unordered list with position:absolute and a z-index to sit on top of any page content below. Fairly simple so far. However, in IE6, the menu is obscured by an h5, random images, and paragraphs on various pages. The z-index should make this list float on top of other elements, but it seems to be ineffective. PPK (http://www.quirksmode.org/) summarized this problem on his post: Explorer z-index bug (http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug. html): It appears that in Internet Explorer (windows) positioned elements do generate a new stacking context, starting with a z-index value of 0, causing the lime-green box to appear above the yellow box. This is a serious violation of the CSS specifications, causing headages and a lot of misunderstanding of what z-index really does. While crediting Aleksandar Vacić for first reporting this bug, PPK doesn't mention Aleksandar's simple solution. Give the parent a position:relative and z-index:1..( http://www.aplus.co.yu/css/z-pos/) Now, of course it isn't always that simple. There's also the issue of subsequent objects that also have a z-index and what happens if their parent is also positioned with a z-index. Please take some time to visit Aleksandar's web site if you are having this conflict. IE7 and more fun According to PPK's web site, this has not been fixed in IE7 Beta2Preview. We'll see how this works out. I've noticed some positioning bugs in IE7 myself. This is something to consider when considering the z-index happiness of Andy Clarke More solutions Hedger Wang (http://www.hedgerwow.com/360/bugs/css-select-free.html ) has an ingenious solution to the conflict between z-index on elements and subsequent select elements. He uses an iframe with z-index-1 that sits under the targeted element. I've used this negative z-index on some of the subsequent elements and it is helping. Fixing all of the pages will be a long journey, but at least there is light at the end of the tunnel. Ted Drake Front-end Engineer Yahoo! Tech ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] broken sprite - very odd ie6 thing
Hi Patrick, Lachlan Unfortunately the project is still behind a firewall, that's why I'm being so vague. Lachlan's advice did get me to look at the links on other pages and it is indeed a very localized issue. So, I can look at conflicts in that area. I think I have more problems with this set of links than just a butchered background image. I'm going to tear it to pieces and see if the new creature works better than before. Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Patrick H. Lauke Sent: Tuesday, March 14, 2006 3:21 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] broken sprite - very odd ie6 thing Ted Drake wrote: Has anyone seen this before? I don't know why it is showing such odd behavior with the background image. There's another link in the list with a similarly broken arrow and another with a perfectly fine printer sprite. Any code we can look at? Even just on a temporary page or something? -- Patrick H. Lauke __ re.dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] z-index conflict in IE6 with positioned elements
Hi everyone. Ive been struggling with some z-indexed, positioned elements that are getting obscured by content further down the page in IE6. After doing a bit of research, I came across these two sites: http://www.aplus.co.yu/css/z-pos/index.php http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html Aleksandar has a suggested fix that works for simple pages. Ive got too many positioned elements on my pages and its a virtual pile-up of ungodly proportions. Has anyone found a solution to this problem? Thanks Ted Drake Front-end Engineer Yahoo! Tech
[WSG] form button css
Hi All I'm having some trouble using an image as a button in a form. I've zeroed out the margins and paddings in this simple search box and yet the button wants to sit about 6px higher than the label and input. I've added this klunky css, margin:6px 0 -6px 0; This just doesn't look good to me. I'm pushing it down 6px and then sucking up the bottom by 6px. If I don't do this, it pushes the label and input down 6px. I haven't worked with buttons much, I prefer to leave the submit buttons alone. Does anyone have a suggestion? Here's the code: form name=searchForm action=foo method=GET onsubmit=return checkQuery(this); label for=prod foo:/label input type=text name= foo id=prod size=50 / button name=submit type=submit img src=/images/foo.gif alt=Submit Button / /button /form #foo form { text-align:center; padding:0; } #foo label { color:#fff; font-size:85%; margin:0 5px; font-weight:bold; } #foo input { margin:0 5px;} #foo button {border:none; height:23px; background:none; padding:0 0 0 0; margin:6px 0 -6px 0;} Thanks Ted Drake -- New Advanced CSS Resource Site: www.last-child.com Contributions welcome, especially safari fine-tuning (I don't have a mac) ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] form button css
Hi Seona Great idea. I dont know if I had any sitewide img margins, but its possible. I added the reference and was able to simplify the css: #foo button {border:none; background:none; padding:0; margin: 0 0 -6px 0;} #foo button img {margin:0; padding:0;} Im still curious if form buttons have an inherent value that makes it display margins differently than inputs or labels. I got it to look spiffy when I floated everything, but that is too drastic for a simple form. Ted Drake www.last-child.com --new Advanced CSS resources site From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Seona Bellamy Sent: Monday, February 27, 2006 4:58 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] form button css On 28/02/06, Ted Drake [EMAIL PROTECTED] wrote: #foo form { text-align:center; padding:0; } #foo label { color:#fff; font-size:85%; margin:0 5px; font-weight:bold; } #foo input{ margin:0 5px;} #foo button {border:none; height:23px; background:none; padding:0 0 0 0; margin:6px 0 -6px 0;} Just a suggestion... is there anywhere else in your css where you're applying some margins or padding to img? Maybe try adding something like: #foo button img { margin: 0; padding: 0; } It might make a difference, but it's hard to know without seeing the rest of the code. Cheers, Seona.
Solution! RE: [WSG] form button css
Ok, I found the ultimate solution while working on another section where inline images were not aligning with text. Im using button with an image per Thierrys suggestion. I didnt want to use background image on an input because there are some browser inconsistencies and I didnt want to use an image in the input due to some accessibility concerns. So, the final css: #ytTopSearch button {border:none; background:none; padding:0; margin:0; vertical-align:middle; cursor:pointer; *cursor:hand; } Vertical-align:middle has the submit button and inline images centered vertically with the text. Ive checked it in FF 1.5 and IE6. Im using the Has anyone come across any problems using vertical-align? By the way, Im working on a new site, www.last-child.com that will be my little scrapbook of code snippets, solutions, etc. This will be an example of the kind of quick tip that will be available. Ive begun by transferring posts from my other site. Its still a bit rough in Safari and Im ignoring IE6 as it isnt representative of browsers used by advanced CSS programmers. Feel free to kick the tires, leave suggestions, find errors, etc. Ted From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of James Gellan Sent: Monday, February 27, 2006 5:44 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] form button css Ted, Its relatively easy to do what you are trying to do ..I accomplished the same thing on my site with this code. .newsletter-button1 {font-family:'Street Corner'; font-style:normal; font-variant:small-caps; font-weight:normal; font-size:10px; color:rgb(51,51,51); letter-spacing:3px; background-color:white; background-image:url('images/silvernavbar.gif'); border-width:1px; border-color:black; border-style:solid; width:80px; } .style131 {font-family: Street Corner} .style129 {color: #434343; font-weight: bold; font-family: Street Corner; font-size: 12px; font-style: normal; line-height: normal; font-variant: normal; text-transform: none; } Thanks, James Gellan Rayne Creative 404-468-6347 - Original Message - From: Ted Drake [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Monday, February 27, 2006 19:48 Subject: [WSG] form button css Hi All I'm having some trouble using an image as a button in a form. I've zeroed out the margins and paddings in this simple search box and yet the button wants to sit about 6px higher than the label and input. I've added this klunky css, margin:6px 0 -6px 0; This just doesn't look good to me. I'm pushing it down 6px and then sucking up the bottom by 6px. If I don't do this, it pushes the label and input down 6px. I haven't worked with buttons much, I prefer to leave the submit buttons alone. Does anyone have a suggestion? Here's the code: form name=searchForm action="" method=GET > checkQuery(this); label for="" foo:/label input type=text name= foo id=prod size=50 / button name=submit type=submit img src="" alt=Submit Button / /button /form #foo form { text-align:center; padding:0; } #foo label { color:#fff; font-size:85%; margin:0 5px; font-weight:bold; } #foo input { margin:0 5px;} #foo button {border:none; height:23px; background:none; padding:0 0 0 0; margin:6px 0 -6px 0;} Thanks Ted Drake -- New Advanced CSS Resource Site: www.last-child.com Contributions welcome, especially safari fine-tuning (I don't have a mac) ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: Solution! RE: [WSG] form button css
Hi Sharron Thanks for the note. I just started working on the site Saturday and have tons of work fixing pages. The content is from my other site, which is getting watered down with posts about photography, culture, etc. Yes, please leave a comment on the post and Ill fix it as soon as possible. I was a teacher up until recently and I feel the drive to teach. I had to quit when I moved to work with Yahoo. This new site is my way of helping to teach others. Ted From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Monday, February 27, 2006 6:42 PM To: wsg@webstandardsgroup.org Subject: Re: Solution! RE: [WSG] form button css Ted, I apologize for getting off topic. I visited you site last-child.com, and your link to FF Alistapart search box won't work for me. Using FF, also can't seem to locate a contact link to notify you. Do you mean for folks who find things that don't seem to work to leave a comment in the comments areas? I am a bit confused. Like they site by the way, bookmarked it! - Original Message - From: Ted Drake To: wsg@webstandardsgroup.org Sent: Monday, February 27, 2006 8:13 PM Subject: Solution! RE: [WSG] form button css Ok, I found the ultimate solution while working on another section where inline images were not aligning with text. Im using button with an image per Thierrys suggestion. I didnt want to use background image on an input because there are some browser inconsistencies and I didnt want to use an image in the input due to some accessibility concerns. So, the final css: #ytTopSearch button {border:none; background:none; padding:0; margin:0; vertical-align:middle; cursor:pointer; *cursor:hand; } Vertical-align:middle has the submit button and inline images centered vertically with the text. Ive checked it in FF 1.5 and IE6. Im using the Has anyone come across any problems using vertical-align? By the way, Im working on a new site, www.last-child.com that will be my little scrapbook of code snippets, solutions, etc. This will be an example of the kind of quick tip that will be available. Ive begun by transferring posts from my other site. Its still a bit rough in Safari and Im ignoring IE6 as it isnt representative of browsers used by advanced CSS programmers. Feel free to kick the tires, leave suggestions, find errors, etc. Ted From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of James Gellan Sent: Monday, February 27, 2006 5:44 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] form button css Ted, Its relatively easy to do what you are trying to do ..I accomplished the same thing on my site with this code. .newsletter-button1 {font-family:'Street Corner'; font-style:normal; font-variant:small-caps; font-weight:normal; font-size:10px; color:rgb(51,51,51); letter-spacing:3px; background-color:white; background-image:url('images/silvernavbar.gif'); border-width:1px; border-color:black; border-style:solid; width:80px; } .style131 {font-family: Street Corner} .style129 {color: #434343; font-weight: bold; font-family: Street Corner; font-size: 12px; font-style: normal; line-height: normal; font-variant: normal; text-transform: none; } Thanks, James Gellan Rayne Creative 404-468-6347 - Original Message - From: Ted Drake [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Monday, February 27, 2006 19:48 Subject: [WSG] form button css Hi All I'm having some trouble using an image as a button in a form. I've zeroed out the margins and paddings in this simple search box and yet the button wants to sit about 6px higher than the label and input. I've added this klunky css, margin:6px 0 -6px 0; This just doesn't look good to me. I'm pushing it down 6px and then sucking up the bottom by 6px. If I don't do this, it pushes the label and input down 6px. I haven't worked with buttons much, I prefer to leave the submit buttons alone. Does anyone have a suggestion? Here's the code: form name=searchForm action="" method=GET > checkQuery(this); label for="" foo:/label input type=text name= foo id=prod size=50 / button name=submit type=submit img src="" alt=Submit Button / /button /form #foo form { text-align:center; padding:0; } #foo label { color:#fff; font-size:85%; margin:0 5px; font-weight:bold; } #foo input { margin:0 5px;} #foo button {border:none; height:23px; background:none; padding:0 0 0 0; margin:6px 0 -6px 0;} Thanks Ted Drake -- New Advanced CSS Resource Site: www.last-child.com Contributions welcome, especially safari fine-tuning (I don't have a mac) ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on
[WSG] making table cells share equally
Hi all you former table hackers out there. Ive got a simple question. If I have two or three columns in a table and I want the cells to share the space equally, what would you suggest? I dont have a width on these cells right now and if one cell has lots of content, its pushing the other column to the curb. Im also using js to remove columns and the table could come with anywhere from 2-6 columns on load. So, I cant really define a set width can I? Thanks Ted www.tdrake.net
[WSG] flash z-index conflict
Hi All Ive got a lovely flash container on the page that is conflicting with my lovely dropdown category box. Id like my lovely dropdown category box (dhtml with clean semantic code and fallback link so its all good!) to sit on top of my lovely flash movie (inserted with UFO - so its all peachy!). However, my lovely flash movie thinks its the coolest thing on the planet and wants to sit on top of my lovely dropdown box. As you can imagine, I dont like be the referee in this battle of the divas. Does anyone have a good cure for handling this one upmanship? Ive applied a super-fantastic z-index of 2000 to the dropdown and a humbling z-index of 10 to the flash container. thanks Ted Drake Front-end Engineer Yahoo! Tech
RE: [WSG] flash z-index conflict
You Rawk! I haven't seen a diva put in here place like that since Julia Childs told Emeril his chicken was scrawny. For the record, here's my ufo script script type=text/javascript var FO = { movie:/images/home-flash-standin.png, width:710, height:250, majorversion:6, wmode:transparent, build:0 }; UFO.create(FO, ythomemedia); /script The wmode is just an attribute you plug in to the js. UFO: http://www.bobbyvandersluis.com/ufo/ Thanks guys. I didn't expect a cure over the weekend. Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Peter Ottery Sent: Saturday, February 18, 2006 5:20 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] flash z-index conflict Ted wrote: -- my lovely flash movie thinks it's the coolest thing on the planet and wants to sit on top of my lovely dropdown box. in the html code that calls your flash movie, add this: param name=WMode value=transparent let us know how you go pete ottery ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] site check
I don't see what this person is complaining about. Are you sure he looked at the right site? I do see a table in your code that could easily be replaced and should be. But in general, the home page didn't look bad. I got a similar message from a client that had a friend look at the design. The guy was spouting some stuff that made sense about using no tables, accessible language, blah blah. Unfortunately, he never looked at the code or really examined the page. He was just passing off something he'd heard to make himself look impressive to the client. I showed him how I had already done everything the guy was telling us to do. So, if your letter writer knows about web standards, really knows and not someone that read a post in a design blog, make sure he/she saw the real page. Otherwise, I'd print the note and check off the stuff as its finished. Since most of it is done already, that shouldn't take long at all. Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of kvnmcwebn Sent: Thursday, February 16, 2006 2:35 PM To: wsg@webstandardsgroup.org Subject: [WSG] site check hello i have a site that i need a bit of advice on, i got some great help here allready for it. ..1st it dosnt validate right now but i will get it to pass after i address some other issues. the site was critiqued rather harshly by a third party consultant- here is the original email. -not sure how much truth is in some of this stuff. i know that there are a good few hacks and some bugs in it but im trying!!! Hi Nick, Well I had a very quick look at it and though visually the site is nice there are a couple of serious problems, I'm afraid. The first is that it has been developed using a table based layout. This is a very outmoded way of developing and can be problematic. Now content and presentation are separated using CSS. This in itself goes long way to creating an accessible site. Some alt text has been used to describe images, which is good. The bigger problem is that there are no HTML headings used in the site, from what I can see. All site content must be marked up using semantic HTML to structure the document.This enables a blind user to see the document and navigate it easily. The site does however look good and hopefully many users will be able to find what they need, but people with disabilities will more than likely have a hard time as the site is not accessible to them. The HTML issue can be easily changed by structuring the page content using structural HTML. here is the address http://63.134.237.108/ any feedback at all greatly appreciated thanks a mill kvn ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] site check
I'd love to see the site of the third party consultant... come on... sneak it into a message to us... Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of kvnmcwebn Sent: Thursday, February 16, 2006 2:35 PM To: wsg@webstandardsgroup.org Subject: [WSG] site check hello i have a site that i need a bit of advice on, i got some great help here allready for it. ..1st it dosnt validate right now but i will get it to pass after i address some other issues. the site was critiqued rather harshly by a third party consultant- here is the original email. -not sure how much truth is in some of this stuff. i know that there are a good few hacks and some bugs in it but im trying!!! Hi Nick, Well I had a very quick look at it and though visually the site is nice there are a couple of serious problems, I'm afraid. The first is that it has been developed using a table based layout. This is a very outmoded way of developing and can be problematic. Now content and presentation are separated using CSS. This in itself goes long way to creating an accessible site. Some alt text has been used to describe images, which is good. The bigger problem is that there are no HTML headings used in the site, from what I can see. All site content must be marked up using semantic HTML to structure the document.This enables a blind user to see the document and navigate it easily. The site does however look good and hopefully many users will be able to find what they need, but people with disabilities will more than likely have a hard time as the site is not accessible to them. The HTML issue can be easily changed by structuring the page content using structural HTML. here is the address http://63.134.237.108/ any feedback at all greatly appreciated thanks a mill kvn ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] just sharing the frustration
Give you writers a very quick lesson in standards. They apply to writing in Word just as much as the web. Don't assume they know about headers, unordered lists, ordered lists, etc. The more they use these basic structural elements in their word documents, the quicker your work will be. It makes sense for everyone. You could even help them set up a basic style sheet to keep them from constantly changing fonts and font sizes. A properly marked up word document will paste into the design view of Dreamweaver very easily. Usually you will only need to do a search for empty paragraph tags and you're done. Dreamweaver will also allow you to select a bunch of paragraphs and hit the unordered list button to instantly convert them to a list. Yes, coders can still use the wysiwyg interfaces. Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Zulema Sent: Tuesday, February 14, 2006 8:00 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] just sharing the frustration Samuel/Ted/Jay, Wow! I will remember all this for the next time, since I do a lot of Word-to-HTML converting. The crazy thing about this one particular Word doc was that it wasn't in formatted bulleted lists because it was copy extracted from a PDF we got from the client as it seems they didn't have the original copy deck anymore I think. Oh well, live and learn. I'm going to find HTMLTidy (which I had but lost on hard drive replace last year) and look up HTML-Kit. I do usually copy/paste right into the design view in dreamweaver for simple stuff. It really does the trick sometimes, if no one's tried it. The writers here at work only work in Word because of the Track Changes feature. Makes it easy for everyone to know what's been changed. Thanks again and hugs to all, Zulema ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Font size menu
Why an ordered list? Regardless of semantic purposes, you may come across some cross-browser compatibility issues if you are doing any kind of image replacement or background images. I would go with an unordered list as you dont need to go to the smallest size before getting to the medium and then largest size. Or drum roll please. Use my swiss army knife, the definition list Dt font sizes Dd small Dd medium dd- large. It could happen! Ted www.tdrake.net From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Darren West Sent: Wednesday, February 15, 2006 1:58 PM To: wsg@webstandardsgroup.org Subject: [WSG] Font size menu Evening group Has anyone got any suggestions as to how I would mark up a font size menu, for example: pFont size:/p ol liA/li liA/li liA/li /ol With font sizes defined ever larger on the list items as a visual indication and the ordered list from an accessible unstyled point of view. Daz
RE: [WSG] Font size menu
Its been a while since Ive messed with it. But as I remember, if you use list-style-type:none on an ol, you can get some odd positioning in IE6. Does anyone else remember this bug? Are you using html or xhtml? If html, wrap the a in smalla/small biga/big Personally, I dont like those tags but I know others do. You can then use CSS to define the look of those letters ted From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Darren West Sent: Wednesday, February 15, 2006 2:38 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Font size menu Cheers Ted! Even as I read ;-) What are the browser issues with ol's? I would go and research but I gotta get this project out the door by Friday :-o As an unordered list would it not loose meaning especially if I signfy the choices visually using the same letter A? I could always use em for the current choice. Daz On 15/02/06, Ted Drake [EMAIL PROTECTED] wrote: Why an ordered list? Regardless of semantic purposes, you may come across some cross-browser compatibility issues if you are doing any kind of image replacement or background images. I would go with an unordered list as you don't need to go to the smallest size before getting to the medium and then largest size. Or drum roll please. Use my swiss army knife, the definition list Dt font sizes Dd small Dd medium dd- large. It could happen! Ted www.tdrake.net From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]] On Behalf Of Darren West Sent: Wednesday, February 15, 2006 1:58 PM To: wsg@webstandardsgroup.org Subject: [WSG] Font size menu Evening group Has anyone got any suggestions as to how I would mark up a font size menu, for example: pFont size:/p ol liA/li liA/li liA/li /ol With font sizes defined ever larger on the list items as a visual indication and the ordered list from an accessible unstyled point of view. Daz
RE: [WSG] just sharing the frustration
There goes Patrick showing off his regular expression prowess again. Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Patrick H. Lauke Sent: Wednesday, February 15, 2006 5:01 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] just sharing the frustration Hope Stewart wrote: The Find And Replace feature in Dreamweaver can also be a huge time saver. Particularly if you're versed in regular expressions...quick and easy way to strip out all the annoying style etc attributes that Word and co like to stick into their HTML, e.g. Find: td[^]* Replace: td P -- Patrick H. Lauke __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] new yahoo user interface library
Hi All As you may know, Yahoo has been hiring some very talented web developers over the past year, not to mention purchasing great companies like flickr and de.licio.us. Now, they have opened that wealth of talent to you for free. Yes, Im pimping my bosses. But seriously, this is really good stuff. Theyve released an open-source platform of standards-based code snippets and best-practices. Many of these are similar to other projects out there. However, Yahoo has taken the time to make sure they scale to millions of hits and pass privacy scrutiny (now stop typing the China related snickering), Im talking about making sure there are no memory leaks or possibly passing along less that secure protocols. Further, the library discusses the JSON data transfer protocol. So, enough of the sales pitch (I had nothing to do with this project.. but I plan on using it!) visit the http://www.yuiblog.com/ yahoo user interface blog and learn how to use these advanced programming techniques. Ted Drake Front-end Engineer Yahoo! Tech
RE: [WSG] just sharing the frustration
Here's a helpful hint on doing this crap. Use htmlTidy, while I haven't used this, I've heard it's really good. Normally, what I do is create a new basic html page in dreamweaver. I go to the design view and paste the content into the screen. I then switch to code view and run a few search and replaces to clean it up. Dreamweaver does a pretty good job of turning word into decent coding. If people would only use styles in word, i.e. header tags, ul, etc. pasting into dreamweaver would be a five minute exercise. Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Zulema Sent: Tuesday, February 14, 2006 6:45 PM To: [EMAIL PROTECTED]; WSG List Subject: [WSG] just sharing the frustration Hello fellow ponies, I just wanted to share my frustration with having to work late on valentine's day contextualizing copy from a Word doc into html with nested lists galore[1]. Took me about five hours and I might have missed a few. [1] http://test.slackbarshinger.com/pei2006/exhibitor/rules_regulations.html Plus, the web site is far from being completed as I am missing flash mastheads, flash nav, and just about all other images which I'm getting Thursday, when the web site is due Tuesday (no biggie right?). *sigh* I know everyone's been through this before and some of you are prolly thinking, that's nothing! why on my /birthday/, I had to But anyhow, to everyone: I hug u. working hard on valentine's day, Zulema ps: thankfully I'm walking outta here in half an hour come heck or high water! ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] print style question
HI All I've got a nagging issue. It's on a local directory, so I can't share the url. I've got a page with two large tables. Each is in its own container div. I'd like to get the second table to print on its own page. I've already made both containing divs block level and applied the page-break-before style to the second table. I've also tried clear:both and float:none to avoid any descending behaviors. Does anyone have a suggestion for finding the printing conflict? Thanks Ted Drake Front-end Engineer Yahoo! Tech ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Target sued over non-accessible site
This has the potential for making some positive improvements in the commercial web sphere. Target is not blind to good design. Their new prescription bottles have been hailed as one of the best designs of the last decade (I think they were designed by a graduate student before Target purchased them. But at least they recognized the value) Target has also commissioned top fashion and architecture designers to develop affordable products (Michael Graves, Phiippe Stark, ...) Target may actually replace their site with an insightful, accessible solution that is a model for other companies. Unfortunately, it takes a law suit to get corporations to make changes these days. Ted www.tdrake.net -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Marilyn Langfeld Sent: Thursday, February 09, 2006 8:43 AM To: wsg@webstandardsgroup.org Subject: [WSG] Target sued over non-accessible site I just read about this on another list. I thought others might be interested. Target is a large, stylish but also discount, retailer in the US. This should be a big case for web accessibility. __ Blind Cal student sues Target. Suit charges retailer's Web site cannot be used by the sightless. ... What I hope is that Target and other online merchants will realize how important it is to reach 1.3 million people in this nation and the growing baby-boomer population who will also be losing vision, said plaintiff Bruce Sexton Jr., 24, a blind third-year student at UC Berkeley. Sexton, who is president of the California Association of Blind Students, said making Target's Web site accessible to the blind would also make it more navigable by those without vision problems http://tinyurl.com/7ze7p __ Best regards, Marilyn Langfeld Langfeldesigns http://www.langfeldesigns.com [EMAIL PROTECTED] ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] [Please don't flame :)] HTML, XML what's the difference.
Hi Marilyn This is far from a perfect world. Before we can have perfectly lovely xml documents, we need to make sure all of the resources delivering content are also delivering perfectly lovely xml. Or... a broken page. Not everyone has the resources to put this together. So, it's good to have a more flexible option out there. Those that can use the better technology will have better sites and will be the stars of their high school reunions. Those of us stuck working with partner content that is questionable will still be in the corner sipping a diet-coke and eating way too many cookies. Ted www.tdrake.net -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Marilyn Langfeld Sent: Wednesday, February 08, 2006 1:46 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] [Please don't flame :)] HTML, XML what's the difference. On Feb 8, 2006, at 4:04 PM, Stephen Stagg wrote: Why do we need an HTML 5? Can't we dispose of HTML and just use styled XML in the future? It would be one helluva way to enforce standards, and we wouldn't have all this wrangling over exactly which element to use. _ Here's a start: http://www.whatwg.org/ As well as I understand, there are dissenting voices about the development of the web: those who want to follow W3C's recommendations towards XHTML, those who want The Semantic Web based on XML, and those who want to extend HTML against the wishes of W3C. Plus those who don't want to change at all. I don't know much more than that, but I'm sure others on the list will fill in the blanks. Best regards, Marilyn Langfeld Langfeldesigns http://www.langfeldesigns.com [EMAIL PROTECTED] ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Websites in Different Languages
You may find some practical advice here: http://www.chin.gc.ca/English/index.html the Canadian Heritage Information Network. Canadian sites that are sponsored by the government are required to be bilingual. This network offers support to Canadian museums and other non-profit organizations. I would assume they have some information on best practices for maintaining multi-lingual sites. Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of White Ash Sent: Friday, February 03, 2006 9:00 AM To: wsg@webstandardsgroup.org Subject: [WSG] Websites in Different Languages Hello! I've designed a website, and we're going to be making an almost identical Japanese version. I'm not sure what is involved ~ is it as easy as including the following at the top of the document: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; html xmlns=http://www.w3.org/1999/xhtml xml:lang=ja lang=ja meta http-equiv=Content-Type content=text/html; charset=Shift_JIS Thanks for any and all guidance! White Ash ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] IE7 hacks
Hi everyone I posted a hack to IE7 today. I know I'm not the first one to find this, but thought I'd throw it out there for all to love on. www.tdrake.net It's pretty simple. But please, think beyond hacks. Ted Drake www.tdrake.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Article: DL + DOM = cool FAQ page
Nice work Thierry. I'm going to add this one to the library. I know there are plenty of hide/show examples out there. This one has a nice combination of clean code and attention to accessibility. Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Thierry Koblentz Sent: Wednesday, February 01, 2006 9:58 AM To: wsg@webstandardsgroup.org Subject: [WSG] Article: DL + DOM = cool FAQ page The advantages of this solution: - It uses semantic markup. - It degrades nicely (hidden elements are visible in script-disabled UAs). - DTs do not appear as links without script support. - It does not use inline event attribute (onclick()). - It does not require A elements in the markup. - It is screen-readers friendly. - It is IE Mac compatible. - It relies on one single hook. http://www.tjkdesign.com/articles/toggle_elements.asp Please report errors/problems/etc.. Regards, Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] use alpha transparent png mask - was: Display problem in IE for the PC
I like the design as well, but I think you're missing a bit of css potential. Instead of putting the fade onto your images, use a background image with alpha transparent png that sits on top of the image. The image would be solid on the outside, transparent square in the middle and have the fade transition. For IE6, I would suggest sending a different background image via conditional comment that uses index transparent gif. But remember, IE7 is on the horizon and allows full alpha transparent png support. We need to start thinking about the future and not locking our pages into 2005/IE6 era. That would allow you to load new images without the photoshop work. If you put it as a div ontop of your image, it would even do a bit to protect from people right clicking and saving the image. Of course, they could always disable styles and do it that way. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Joshua Street Sent: Monday, January 30, 2006 12:55 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Display problem in IE for the PC Maybe give #169; a shot instead of copy; ... not certain, but it may help. Love the design, by the way. On 1/31/06, Kara Spellman [EMAIL PROTECTED] wrote: Hi, This my first website using CSS. I've gotten most of the bugs out of it except for one on the home page. For some reason the copyright caption is forcing the last 2 letters below the colored background box. Not sure why. I've messed around with the CSS, but nothing corrects it. It only happens on IE. I'm using a PC with Windows XP Home (latest version) and IE v. 6. http://www.stevenmaslach.com/home.htm (home page) http://www.stevenmaslach.com/css/styles.css (css file location) Thanks, spellmank ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Web Site Template Review
A form inside a fieldset? [EMAIL PROTECTED]@[EMAIL PROTECTED] Come on everyone, where's the outrage? I remember trying to use a fieldset outside a form and had to don the asbestos fire suit. Seriously, I don't see any benefit to putting the fieldset outside a form. I would assume it's just sloppy coding. What's the justification for doing it backwards? Ted www.tdrake.net -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kenny Graham Sent: Monday, January 30, 2006 1:01 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Web Site Template Review This is the only time I've ever seen a form inside a fieldset, instead of the other way around. I can't even find an example of it that way at w3.org. I know it's valid, but are there any drawbacks to doing it this way? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] BLOCKQUOTE Problem
Why are you using #blockquote? You can target paragraphs et al within a blockquote with descending selectors: blockquote p, blockquote a, blockquote cite, etc. I'm getting a bit tired of my over the top blockquotes: http://www.tdrake.net/durward-and-the-rocket/ But I have messed with some of the styles already. I then used the edit-css tool in the web developer toolbar and started playing around with blockquote p {font-size:85%, line-height:1.1em; color:silver;...} and it worked like a charm. What is a link to your problem page? Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Paula Petrik Sent: Saturday, January 28, 2006 1:40 PM To: wsg@webstandardsgroup.org Subject: [WSG] BLOCKQUOTE Problem All right, this is probably a less than gripping question and more pertinent to academic writing. Nonetheless. The blockquote element requires that it enclose block level elements--in my case usually a p. Since blockquotes are usually in a run of text (#content p), it picks up the content p's line-height. But a blockquote, typographically speaking, should have a reduced line-height to differentiate it from the other paragraphs in the text. (Besides, a blockquote with standard paragraph line-height looks ukky.) Here I run afoul of the cascade unless I use a span; #blockquote p will not work because of the #content p rule. First, is there another, better way of accomplishing reducing the line-height in a blockquote other than using a span? Second, will I be a CSS Night Patrol target if I use a span to reduce the line-height? Thank you, Paula Paula Petrik Professor Department of History Art History Associate Director Center for History New Media George Mason University http://www.archiva.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Cite in blockquote
I believe Jeremy Keith or PPK has a javascript that pulls the cite attribute out of the blockquote and places it as a link after the blockquote. It looks like a research paper citation/footnote. ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Patrick H. Lauke Sent: Thursday, January 26, 2006 8:23 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Cite in blockquote Quoting Svip [EMAIL PROTECTED]: But my question is; does any browser use the cite attribute in the blockquotes? None that I'm aware of, no. -- Patrick H. Lauke __ re.dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Cite in blockquote
I think the actual answer should be. The cite attribute is not displayed by any browser. However it is available if you right click on the blockquote and look at the properties. It is also available for some future semantic web research. I use it often since it only takes a few moments to add it and I never know who will actually use it or see it. I think of it as a future easter egg. It's also good for research papers or your own notes for going back and finding the original sources. And... you can use the js to display it on the page. Has anyone tried using nicetitles.js to display the cite attribute on hover? It should be a fairly easy modification. Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Juergen Auer Sent: Thursday, January 26, 2006 9:38 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Cite in blockquote Hello Svip, On 26 Jan 2006 at 17:10, Svip wrote: But my question is; does any browser use the cite attribute in the blockquotes? I know a little sample from the german Html-bible SelfHtml: Look at http://de.selfhtml.org/html/text/anzeige/blockquote_cite.htm Right-Click on the blockquote 'Die Energie des Verstehens' shows a new Option 'Properties' with the reference. This works with FireFox 1.5 and Netscape 7.2, not with the IE6. Regards Juergen Auer Jürgen Auer, http://www.sql-und-xml.de/ Web-Datenbanken zum Mieten Friedenstr. 37, 10 249 Berlin Tel.: (030) 420 20 060 Fax: (030) 420 19 819 [EMAIL PROTECTED] ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] IE7 updates the select box
Microsoft just announced the select box will be updated in IE7. This will be good news to anyone trying complicated form presentation. http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx Does anyone have a form page that is suffering from conflicts between IE form elements and your CSS presentation? IE7 beta 2 will be released in the not too distant future for developers. We need to begin looking for example pages to test on for finding problems and solutions. Ted Drake Front-end Engineer Yahoo! Tech ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Print stylesheet switcher
Hi Joshua I discussed something like this with Dunstin Diaz, http://www.dustindiaz.com/?id=86paged=2, of the AJAX style sheet switcher fame. He suggested the print style sheets could be handled similarly. For usability sake, I would suggest taking the visitor to a screen that showed them what they are going to get when they print. It would suck to hit print, then walk across the office, wait for the laser printer to get to your page, only to find that it printed something you didn't want. Perhaps the second button would popup a window with the information you want to print and its own print style sheet. Ted www.tdrake.net -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Joshua Street Sent: Tuesday, January 17, 2006 7:54 PM To: wsg@webstandardsgroup.org Subject: [WSG] Print stylesheet switcher Hi all, I've got a page that has a print stylesheet, and two elements of important (i.e. the things you'd want to print) content. One is a list of items, whilst the other element is a kind of More information area (linked by XMLHttpRequest if JS is enabled). In the More information bit, there's meant to be a print details button. It was originally going to exist in an iframe, but I wasn't too keen on that idea because it's generally disruptive in ways that AJAX (or, in lieu of that, plain HTML with effectively-utilised anchors) is not. So now I'm trying to print just the contents of that DIV when a user clicks the print icon (using print(), or window.print(), or whatever), but if the user attempts to print the page normally -- that is, go File-Print -- the listing would print, and the details of the currently selected item would not. To achieve this I plan on using two stylesheets: the default print stylesheet will discard the More Information div, whilst the More Information div's print button will call (hopefully) a JavaScript function that will set the print style to one in which the only item displayed is that DIV (well, and a few other bits like H1, but it doesn't matter: the point is it's another stylesheet), and THEN print(). Normal JavaScript (media=screen) switchers are pretty common, but does anyone have suggestions as to how best to go about this one? n.b. I can't just switch the stylesheet when the More Information field is loaded, because even when it is people may still want to print the standard listing, which remains visible at all times. The switching MUST apply just to the print styles, and MUST occur only when the print 'button' is clicked (the button will be inserted into the markup dynamically, so it remains clean for non-JS users). Kind regards, Josh Street ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] p tag
It would help to have a page to look at. Heres my first guess. Are you floating the image and text? If so, perhaps justify is extending the width of the text to make it too long to fit in the same space as the image and it drops down below the image? Does this make sense? CSS will over-ride any inline attributes, such as align=justify. That should be placed in your CSS instead of the tag. Try p class=wackyparagraph p.wackyparagraph {text-align:justify;} Try sending a link for better feedback. Ted From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Todd Gleaton Sent: Wednesday, January 11, 2006 11:16 AM To: wsg@webstandardsgroup.org Subject: [WSG] p tag Hello All, I am using the p align='justify' to justify my text. I am getting a huge break between the picture above and where the text starts with the tag mentioned above. What is the best way to rid the white space? I've seen this problem a lot but have come to no conclusive way of getting rid of it. Anyone have a good suggestion for this? Thankstg
RE: [WSG] Yet Another Float Problem
Try floating the wrapper to see if that helps. I don't see a difference between firefox and IE, although it could be my version of IE. What is the background image? The guy in the suit? Didn't Opera remove advertising? Ted Drake www.tdrake.net -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Paula Petrik Sent: Monday, December 26, 2005 1:24 PM To: wsg@webstandardsgroup.org Subject: [WSG] Yet Another Float Problem I'm being driven nuts. Pulling out my hair. I cannot get this to work in IE and can't figure out where I'm going wrong. If I float:left the #maincontent, I lose my background image because #wrapper has no height. IE does not want to honor something. The #mainecontent should move up around the floated #nav. Do I need a :clear? Hoping someone is working away somewhere. XHTML and CSS validates and have browsercammed. http://www.archiva.net/hist697ay06/ http://www.archiva.net/hist697ay06/hist697ay06_screen.css Paula Paula Petrik Professor Department of History Art History Associate Director Center for History New Media George Mason University http://www.archiva.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Yet Another Float Problem
I forgot about haslayout when I suggested float. My how your mind begins to skip things when they aren't staring you in the face. Avoid using height:0 as the hack. It could come back to haunt you in the future. Use zoom:1; instead. This will provide layout without creating a potential size conflict in the future. Don't forget, IE7 is on the horizon and your hacks need to be future proof. Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of George S. Williams Sent: Monday, December 26, 2005 1:49 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Yet Another Float Problem Hey, Paula, I had a similar problem last week and it was suggested that I add the following at the bottom of the style sheet- @media screen { * html #wrapper {height: 0;} } which solved the problem. My problem was, apparently, due to an IE bug, Lack of Layout, more information on which is at the following- http://www.satzansatz.de/cssd/onhavinglayout.html Hope this fixes it for you, George On Mon, 2005-12-26 at 16:23, Paula Petrik wrote: If I float:left the #maincontent, I lose my background image because #wrapper has no height. -- Sterling Web Services http://www.websterling.com The Web Done Right ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Could really use some help with image overflow
I started to look at your CSS but got lost in all of the empty rules. I realize you are using a template css file, it would help to clean it up before seeking advice. Not a rant, just a suggestion. I first thought that you might want to add a percentage based width to the image, but that would distort it. I then thought you could add a background color to the paragraph. It seems to have a transparent background that allows the image to sneak past. But that is just a bandaid. If you want the nifty rounded edges to remain, perhaps you could use the png/z-index method on allthatmalarkey.co.uk or is it com? You could have a white mask that sits on top of the header image, as the page is made smaller, the mask would move on top of the banner image. Try putting the image in the CSS, you can control it better (background image). Ted From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Barrie North Sent: Wednesday, December 21, 2005 8:46 AM To: wsg@webstandardsgroup.org Subject: [WSG] Could really use some help with image overflow Hi all, I have a fluid layout and for the life of me cant get the image to be cropped as the screen adjusts. Here is the link: http://www.compassdesigns.net/joomlashack/ If you resize the window the image will stay on top. I have played with z-index, overflow:hidden. I cant for the life of me get this to work. Anyone fancy jumping in and pointing out the obvious thing I am missing J ? Barrie North
[WSG] the kind of assignment that makes you want to scream
Can you imagine being the one stuck with creating this navigation scheme? http://shop2.outpost.com/product/4600108?site=sr:SEARCH:MAIN_RSLT_PG holy moley, mother of all tabs. It makes me itch just looking at it. Ted Drake Front-end Engineer Yahoo! Tech