Re: [WSG] which tag to use for link to reference?

2012-07-01 Thread tee
Thanks David.

I think ePub3 and HTML5 support is still not here. When converting the HTML5 
doctype files to ePub, Sigil (an ePub editor) forces ePub2 version and stripped 
all HTML5 tags. 

Converting to mobil format for Amazon Kindle is even worse, I feel as if 
dealing with the IE6  7. 

Tee

On Jun 30, 2012, at 3:16 AM, David Dorward wrote:

 
 On 30 Jun 2012, at 11:04, tee wrote:
 I thought maybe I can use hyperlink for monolithic instead of adding 3 
 (which will be directed to Appendix), but this often is not desirable 
 because in other sections of paragraphs where citations are used, there 
 aren't alway clear sentences to hyperlink.
 
 A hyperlink (to an aside) is the closest thing HTML has AFAIK.
 
 This is for an ebook project, it's different from the webpage, and the 
 readers are more accustom to the footnotes, but footnote doesn't work for 
 ebook format, because devices' sizes vary, and portrait vs landscape view 
 affects text flow too so strictly speaking there isn't pagination.
 
 
 
 The example syntax given in the EPUB specification[1] is:
 
 html … xmlns:epub=http://www.idpf.org/2007/ops;
…
p … a epub:type=noteref href=#n11/a … /p
…
aside epub:type=footnote id=n1
…
/aside
…
 /html
 
 [1] http://idpf.org/epub
 
 -- 
 David Dorward
 http://dorward.me.uk
 
 
 
 ***
 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
***



[WSG] which tag to use for link to reference?

2012-06-30 Thread tee
In scholarly paper and report, we often use number (e.g.. 1, 2. 3,  displays in 
sup) in between paragraphs when referencing others' work. What is the name of 
the tag used in such manner in HTML or ebook format?


Thanks!

Tee



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] which tag to use for link to reference?

2012-06-30 Thread tee
Sort of. 

But I looked up from HTML5 tag, cite doesn't' seem to be the correct ones to 
use.

Example of my text when we do it in a Word document.

One model to explain political power, ...is referred to as the monolithic 
theory . 3

Where 3 is superscribed, and at the footnote of the given page where the quoted 
texts located, or references (such as a book title, page # etc)

In a case like this, wrapping 3 in cite doesn't seem correct to me.

I thought maybe I can use hyperlink for monolithic instead of adding 3 (which 
will be directed to Appendix), but this often is not desirable because in other 
sections of paragraphs where citations are used, there aren't alway clear 
sentences to hyperlink.


This is for an ebook project, it's different from the webpage, and the readers 
are more accustom to the footnotes, but footnote doesn't work for ebook format, 
because devices' sizes vary, and portrait vs landscape view affects text flow 
too so strictly speaking there isn't pagination.


Tee


 

On Jun 30, 2012, at 12:05 AM, Greg Gamble wrote:

 Are you referring to a citation tag cite?  
 
 Greg
 
 
 -Original Message-
 From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
 Behalf Of tee
 Sent: Friday, June 29, 2012 11:11 PM
 To: wsg@webstandardsgroup.org
 Subject: [WSG] which tag to use for link to reference?
 
 In scholarly paper and report, we often use number (e.g.. 1, 2. 3,  displays
 in sup) in between paragraphs when referencing others' work. What is the
 name of the tag used in such manner in HTML or ebook format?
 
 
 Thanks!
 
 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
 ***
 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Re: WSG Digest

2012-05-29 Thread tee
Very Neat. 


On May 26, 2012, at 4:44 PM, Justin Avery wrote:
 
 Trent Walton originally wrote about it with his article, , before Jordan 
 Moore expanded on the idea with 
 http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography 
 and was even nice enough to produce us a workable demo, 
 http://www.jordanm.co.uk/contentchoreography and explains further 
 http://www.jordanm.co.uk/contentchoreographydemo.

In the demo, navigation in the source code is still sitting below the header 
section when the screen is at 480px and below. How does this work for AT 
(VoiceOver for example) though if I want the navigation stay below the fold? 
I don't supposed the AT is smart enough to do what I want if I don't place the 
navigation code at the bottom section of the page.

tee

 
 On Sat, May 26, 2012 at 3:57 PM, wsg@webstandardsgroup.org wrote
 
 
 From: tee weblis...@gmail.com
 Date: Thu, 24 May 2012 14:14:10 -0700
 Subject: Re: [WSG] Media queries and roles
 
 Don't know the answer for sure, but if you display none or make it
 invisible AT would ignore it no? My logic is, display:none  invisible
 should precede ARIA elements. If a site speficically told the AT not to
 display a block of content, it shouldn't bother to annouce the role(s)
 within it to confuse user.
 
 When doing RWD instead of mobile adaptation,  that navigation goes to
 the bottom of the page for the consideration of Mobile version, my
 approach is to use absolute position to target the desktop version's
 navigation instead of making duplication.
 
 tee
 
 
 On May 24, 2012, at 1:12 PM, Tom Livingston wrote:
 
  List,
 
  We have a project being worked on that is being done using RWD. For
  mobile, we are repeating the nav at the bottom of the page and
  showing/hiding - with display: block/none; -  the appropriate navbar
  based on min-width media queries.
 
  My question is if the desktop main nav has a role of 'navigation',
  should the mobile nav at the bottom have that same role? Will that
  mess up screen readers et al?
 
  TIA
 
  --
 
 *
 From: Tom Livingston tom...@gmail.com
 Date: Fri, 25 May 2012 08:44:14 -0400
 Subject: Re: [WSG] Media queries and roles
 
 On Thu, May 24, 2012 at 5:14 PM, tee weblis...@gmail.com wrote:
  Don't know the answer for sure, but if you display none or make it invisi
 ble AT would ignore it no? My logic is, display:none  invisible should pre
 cede ARIA elements. If a site speficically told the AT not to display a blo
 ck of content, it shouldn't bother to annouce the role(s) within it to conf
 use user.
 
  When doing RWD instead of mobile adaptation,  that navigation goes to t
 he bottom of the page for the consideration of Mobile version, my approach
 is to use absolute position to target the desktop version's navigation inst
 ead of making duplication.
 
  tee
 
 
  On May 24, 2012, at 1:12 PM, Tom Livingston wrote:
 
  List,
 
 
 Thanks tee. My thoughts as well, but wasn't sure.
 
 Also, I thought of absolute pos., but I do not think the structure I
 need will work with that.
 
 Thanks again
 
 --
 
 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


[WSG] box-shadow is causing black borders in IE9

2012-04-20 Thread tee
Can a kind soul helps check this site in IE9. 

http://www.veecosmetics.com/

Please browse a few more pages, the borders occur in the #content, #footer and 
the Randomly Picked block but in a few pages I don't see it and sometimes it 
disappear after I move my cursor away from content area. Pages that the borders 
disappear appears random though.

But it doesn't occur in this test page.
http://jsbin.com/userac/5

I have confirmed it's box-shadow causing it.


#footer #random ul,
#footer, #content
{-webkit-box-shadow:0 0 2px #ccc;
-moz-box-shadow: 0 0 2px #ccc;
box-shadow: 0 0 2px #ccc;}

And a google search showed that I am not the only one having this bizzarre 
behavior in IE9.

http://stackoverflow.com/questions/10039577/ie9-strange-black-border

My version is Windows 7/IE9 via Parallel Desktop.

Thanks!

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Keyboard Tabbing no longer working in FF v11/Mac

2012-04-04 Thread tee
Hi Susanne,

Thanks. That site seems out-dated but I manage to use the 
accessibility.tabfocus piece of info from about:config in my FF.

FF in my Mac is missing  accessibility.tabfocus but PC's has it, so this is 
the cause but how it got missing still is a mystery. 

https://picasaweb.google.com/118239816043983420511/April42012?authkey=Gv1sRgCO-i9LSJg5y9Lw

I nuked the entire copy with all its files in Library, making sure no residues 
left in my system, then re-installed a new copy, yet it's still missing. It's 
as if it's already missing in the Firefox 11.0.dmg.



Tee


On Apr 3, 2012, at 2:46 AM, Susanne Jäger wrote:

 tee wrote:
 
 I wonder what might gone wrong with my FF, it focuses on input fields.: 
 address url, google seach and the one in the page.
 
 check the settings for accessibility.tabfocus
 http://kb.mozillazine.org/Accessibility.tabfocus
 
 Susanne
 
 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Keyboard Tabbing no longer working in FF v11/Mac

2012-04-03 Thread tee
Thanks Matthew.

I wonder what might gone wrong with my FF, it focuses on input fields.: address 
url, google seach and the one in the page.

 See it in action.
http://www.youtube.com/watch?v=_DiPi-OttQkfeature=youtu.be

Tee
On Apr 2, 2012, at 10:24 PM, Matthew Pennell wrote:

 On Mon, Apr 2, 2012 at 11:22 PM, tee weblis...@gmail.com wrote:
 Can anyone please confirm.
 
 http://jsbin.com/inayes/2
 
 Tabbing through the links on a page works fine for me on FF11/Mac,
 both on your example page and on Facebook.com. I've never altered the
 default accessibility settings.
 
 - Matthew



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] Keyboard Tabbing no longer working in FF v11/Mac

2012-04-02 Thread tee
Can anyone please confirm.

http://jsbin.com/inayes/2

guardian.co.uk is one of the sites I know have keyboard supports and it's not 
working too using Firefox.

I don't remember having to do anything special in previous versions of Firefox 
to make keyboard navigation to work. Notice in v11  it has an Accessibility 
feature in Preferences under Advanced. 

Always use the cursor keys to navigate within pages doesn't bring back 
Tabbing feature.

Thanks!

Tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Opera Mini fontsize settings

2011-10-14 Thread tee
Forgot to mention, it's Opera Mini 6.

On Oct 13, 2011, at 5:52 AM, tee wrote:

 Yes, it used to be there, but not anymore.
 
 
 http://bit.ly/qa9GmY
 
 tee
 On Oct 13, 2011, at 5:13 AM, Patrick H. Lauke wrote:
 
 settings  font size (3rd option down)
 
 or am i missing something?
 
 --
 Patrick H. Lauke
 
 
 On 13 Oct 2011, at 13:55, tee weblis...@gmail.com wrote:
 
 I clearly remember OM used to have this feature, but in my recent upgrade, 
 it's gone. Anybody knows about this? This list has Opera Inc employee(s), 
 and I wonder if you are aware of this.
 
 Thanks!
 
 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
***



[WSG] Opera Mini fontsize settings

2011-10-13 Thread tee
I clearly remember OM used to have this feature, but in my recent upgrade, it's 
gone. Anybody knows about this? This list has Opera Inc employee(s), and I 
wonder if you are aware of this.

Thanks!

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Opera Mini fontsize settings

2011-10-13 Thread tee
Yes, it used to be there, but not anymore.


http://bit.ly/qa9GmY

tee
On Oct 13, 2011, at 5:13 AM, Patrick H. Lauke wrote:

 settings  font size (3rd option down)
 
 or am i missing something?
 
 --
 Patrick H. Lauke
 
 
 On 13 Oct 2011, at 13:55, tee weblis...@gmail.com wrote:
 
 I clearly remember OM used to have this feature, but in my recent upgrade, 
 it's gone. Anybody knows about this? This list has Opera Inc employee(s), 
 and I wonder if you are aware of this.
 
 Thanks!
 
 tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS3 Development tools?

2011-10-12 Thread Tee
Does TopStyle has feature that allows user to save a chunk of code or a 
template ? I use CSSEdit in conjunction with Coda and saved some frequently 
used CSS3 this way. It's not perfect; until my tools support CSS3 this is the 
only way I could think to make CSS3 code writing more efficient.

Tee

On Oct 11, 2011, at 23:00, Mike Kear w...@afpwebworks.com wrote:

 Thanks Carlo.   Perhaps i should also add that I build dynamic ColdFusion 
 sites, and use Dreamweaver CS5.5 for my development tool.   Few CF developers 
 use Dreamweaver – they tend to use Eclipse or its derivatives.
 
  
 
 I have found that Dreamweaver doesn’t do much for CSS, unless you use the 
 so-called WYSIWYG design mode – and that’s a hopelessly inefficient mode for 
 efficient dynamic pages.   Specially when you’re using modular software 
 design, with things like ColdSpring handling the component management etc.   
 And since all my display pages have a header file that holds the CSS calls,  
 the body pages never have the CSS classes available.
 
  
 
 That’s why I have been using TopStyle for developing style sheets – it is 
 stand-alone and doesn’t require the dynamic pages Sto exist before it can 
 display a sample of the effect you’re coding.   I just wish TopStyle was 
 available to handle CSS3.  I assume it will be one day, but I need a tool to 
 help me NOW.
 
  
 
 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
 
  
 
  
 
  
 
 From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On 
 Behalf Of carlo juancho funtanilla
 Sent: Wednesday, 12 October 2011 4:32 PM
 To: wsg@webstandardsgroup.org
 Subject: Re: [WSG] CSS3 Development tools?
 
  
 
 Try Dreamweaver CS5
 
 On Wed, Oct 12, 2011 at 7:38 AM, Mike Kear w...@afpwebworks.com wrote:
 
 I’ve been using TopStyle4 for developing my CSS files, but it still isn’t 
 supporting CSS3.
 
  
 
 What tools are you others using to develop CSS3 files?  
 
 
 ***
 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
***


[WSG] Can some of the HTML5 elements be used more than once?

2011-10-05 Thread tee
I can't find any info if it's OK to use some of the HTML5 elements more than 
once. 

What I have in mind, in a ecommerce site which has 3 columns layout, in which 
left/right side columns are used for reports (e.g., recently view, upsell, 
related products, poll or newsletter etc...). 


So can I have?

aside id=leftcol/aside
section id=middle-col/section
aside id=rightcol/aside

p/s. I know I can do something like below but for layout/design consideration, 
this may not be the best approach sometimes.


section id=middle-col/section
aside
div class=sidecol1/div
div class=sidecol2/div
/aside

Similarly, can nav element be used twice? One for cateogries menu, and one for 
general menu that is used for Customer Service, FAQ sort of the pages.

Thanks!

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Can some of the HTML5 elements be used more than once?

2011-10-05 Thread tee
Thank you both. Much appreciated.

The HTML5 Outliner is great!

tee

On Oct 5, 2011, at 4:06 AM, Frances de Waal wrote:

 Hi Tee,
 
 You can have multiple semanticle HTML5 elements like header, article, 
 section, , footer, aside and nav elements in one webpage. It all depends on 
 it if you want to give the content a semantical meaning, if so, use the 
 corresponding new elements. Only if the box is for other purposes like 
 layout, div is the one to use. As welcome as the elements are, I find that it 
 also often leads to quite a puzzle sometimes to have a clear and logic use of 
 them. 
 
 Frances 
 
 www.waalweb.nl
 www.smartscripts.nl
 Zelfstudiehandboek Websites Ontwikkelen met HTML, CSS en Dreamweaver
 WaalWeb | Halfweg, Noord-Holland | KvK 34350833
 
 Op 5 okt 2011, om 12:44 heeft tee het volgende geschreven:
 
 I can't find any info if it's OK to use some of the HTML5 elements more than 
 once. 
 
 What I have in mind, in a ecommerce site which has 3 columns layout, in 
 which left/right side columns are used for reports (e.g., recently view, 
 upsell, related products, poll or newsletter etc...). 
 
 
 So can I have?
 
 aside id=leftcol/aside
 section id=middle-col/section
 aside id=rightcol/aside
 
 p/s. I know I can do something like below but for layout/design 
 consideration, this may not be the best approach sometimes.
 
 
 section id=middle-col/section
 aside
 div class=sidecol1/div
 div class=sidecol2/div
 /aside
 
 Similarly, can nav element be used twice? One for cateogries menu, and one 
 for general menu that is used for Customer Service, FAQ sort of the pages.
 
 Thanks!
 
 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
 ***



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] A very strange webkit bug, or Firefox?

2011-10-01 Thread tee
Hi Albert,

Thanks for the thought. One thing I am certain though, it's triggered by 
a[href^=http] and with the padding element.

I only added a[href^=http] rule at final stage, and before that the image had 
no padding top issue. What is so strange is that it only occurs to the even set 
of the floated block and in webkit, thus clouded my judgement too and wasted so 
much time to find the cause

With this rule intact I need to add display block for grid-items li a. 

a[href^=http]{background: url(icon-external.png) no-repeat right 
3px;padding-left:13px;}


Tee

On Sep 30, 2011, at 8:53 PM, Albert Scheiner wrote:

 Hi tee,
 
 I played a bit around with your examples, didn't find  a good answer yet why 
 the browsers are rendering it that way, but I can tell that it is not a 
 [padding-top|bottom] issue. It is rather like a white space as the space 
 above is exactly like adding a [nbsp;] and it stays the same even for 
 [padding-left or padding-right 1px or 100px], but [white-space: no-wrap] 
 didn't help. Firefox displays it correctly, if you remove the [display:block] 
 from the image and make both inline-elements again. The other solutions is to 
 make the A-tag a block level element by giving it a [display: 
 inline-block|block]. All browsers seem to like that!
 
 Hope that helps and that maybe someone else has an answer for this 
 inline-elements vs. block-level-elemets behaviour ;)
 
 Cheerio,
 Albert
 
 Am Thu Sep 29 20:17:19 2011 schrieb tee:
 Please go to these pages from Webkit browsers (first) and Firefox.
 
 There shouldn't have padding top for the image for We Recommend, padding 
 top is caused by the padding-left:13px; – any value will trigger the 
 padding in the EVEN set of the floated block in Webkit browsers  [1].
 
 a[href^=http]{background: url(icon-external.png) no-repeat right 
 3px;padding-left:13px;}
 
 http://jsbin.com/ozeqon [1]
 
 
 If you change padding-left to padding-top or padding-bottom, the extra 
 padding goes away.
 
 In these two examples the paddings are gone.
 padding-top
 http://jsbin.com/ozeqon/3/
 
 padding-bottom
 http://jsbin.com/ozeqon/5
 
 
 
 [1] If you check the page from Firefox, you will see that all images have 
 padding (top) above image (this is the reason for my or Firefox in the 
 subject line), however in my origninal code I had padding-right:13px
 
 (which is why I first  thought it's webkit bug - all in all wasted my  3 
 working days to find the cause and I assure you nobody can't imagine how 
 upset I was when I found what caused the issue – and I think I will go jump 
 from the bridge if anybody going to tell me the padding in the above rule 
 isn't the issue but my other CSS codes).
 
 
 a[href^=http]{background: url(icon-external.png) no-repeat right 
 3px;padding-right:13px;}
 
 http://jsbin.com/ozeqon/4/
 
 Let see what padding:13px does. It's identical to padding-left:13px; above.
 
 http://jsbin.com/ozeqon/6
 
 
 
 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
 ***
 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] A very strange webkit bug, or Firefox?

2011-10-01 Thread tee
On Oct 1, 2011, at 4:02 AM, Kristaps Ancāns wrote:

 Just use CSS standarts http://www.w3.org/Style/CSS/ and you will see that 
 image img / will allways have an empty space after it, because image img 
 / is always displayed as display:inline + if link a href=#/ doesn't have 
 property as display:block, it will always display as inline. Applying 
 display:block (in most of cases you need to apply height value also) will 
 solve whatever problem you have regarding extra white space after image img 
 / or link a / 
 

Well, you are correct according to the CSS spec and adding display block to a 
element that wrapped the image fixes it .

But the issue I had is not because I didn't have display block for img. It's 
because webkit browsers ignore it when a[href^=http] attribute selector is 
used with padding left/right, and occurs in even set of floated blocks only.

tee



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


[WSG] A very strange webkit bug, or Firefox?

2011-09-29 Thread tee
Please go to these pages from Webkit browsers (first) and Firefox.

There shouldn't have padding top for the image for We Recommend, padding top 
is caused by the padding-left:13px; – any value will trigger the padding in 
the EVEN set of the floated block in Webkit browsers  [1].

a[href^=http]{background: url(icon-external.png) no-repeat right 
3px;padding-left:13px;}

http://jsbin.com/ozeqon [1]


If you change padding-left to padding-top or padding-bottom, the extra 
padding goes away.
 
In these two examples the paddings are gone.
padding-top
http://jsbin.com/ozeqon/3/

padding-bottom
http://jsbin.com/ozeqon/5



[1] If you check the page from Firefox, you will see that all images have 
padding (top) above image (this is the reason for my or Firefox in the 
subject line), however in my origninal code I had padding-right:13px 

(which is why I first  thought it's webkit bug - all in all wasted my  3 
working days to find the cause and I assure you nobody can't imagine how upset 
I was when I found what caused the issue – and I think I will go jump from the 
bridge if anybody going to tell me the padding in the above rule isn't the 
issue but my other CSS codes).


a[href^=http]{background: url(icon-external.png) no-repeat right 
3px;padding-right:13px;}

http://jsbin.com/ozeqon/4/

Let see what padding:13px does. It's identical to padding-left:13px; above.

http://jsbin.com/ozeqon/6



tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] A very strange webkit bug, or Firefox?

2011-09-29 Thread tee
 On 29/09/2011 11:26, Kristaps Ancāns wrote:
 
 Display:block for A element should solve your porblem.

Thank you! 

Can't believe it! I swear that was the first thing I did when I saw that 
padding in Webkit browsers.

Checked my style again and found this:

.grid-items li a img {display:block;}

Still, anybody know why the padding in that rule results different rendering in 
Webkit, and only occure in even set of block?

tee


 
 On 29/09/2011 11:26, Kristaps Ancāns wrote:
 
 Display:block for A element should solve your porblem.
 
 
 
 Kristaps Ancāns
 
 Senior web developer (coder)
 Mob.: +34 644340683
 E-pasts: kristaps.anc...@gmail.com
 Skype: kristaps.ancans
 Web: fyfi.net, metalguide.org, motorolleri.lv
 
 
 
 On Thu, Sep 29, 2011 at 12:17, tee weblis...@gmail.com wrote:
 Please go to these pages from Webkit browsers (first) and Firefox.
 
 There shouldn't have padding top for the image for We Recommend, padding 
 top is caused by the padding-left:13px; – any value will trigger the 
 padding in the EVEN set of the floated block in Webkit browsers  [1].
 
 a[href^=http]{background: url(icon-external.png) no-repeat right 
 3px;padding-left:13px;}
 
 http://jsbin.com/ozeqon [1]
 
 
 If you change padding-left to padding-top or padding-bottom, the extra 
 padding goes away.
 
 In these two examples the paddings are gone.
 padding-top
 http://jsbin.com/ozeqon/3/
 
 padding-bottom
 http://jsbin.com/ozeqon/5
 
 
 
 [1] If you check the page from Firefox, you will see that all images have 
 padding (top) above image (this is the reason for my or Firefox in the 
 subject line), however in my origninal code I had padding-right:13px
 
 (which is why I first  thought it's webkit bug - all in all wasted my  3 
 working days to find the cause and I assure you nobody can't imagine how 
 upset I was when I found what caused the issue – and I think I will go jump 
 from the bridge if anybody going to tell me the padding in the above rule 
 isn't the issue but my other CSS codes).
 
 
 a[href^=http]{background: url(icon-external.png) no-repeat right 
 3px;padding-right:13px;}
 
 http://jsbin.com/ozeqon/4/
 
 Let see what padding:13px does. It's identical to padding-left:13px; above.
 
 http://jsbin.com/ozeqon/6
 
 
 
 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
 ***
 
 ***
 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] media queries can't understand body tag

2011-09-29 Thread tee
If you have SDKs, you can open Dashcode, create a page for Mobile Safari and 
check the resource log. There is also Browser simulator but this one for both 
desktop and mobile I think. 

Still exploring so not fully sure what I see is exactly correct.


Trying to figure all these another question has arisen. Take iPad for example 
which supports portrait and landscape, so if I have two separate images target 
for the two, doesn't it load two images? Say, I first view a page from 
landscape and this loads the image from it media query, then I switch to 
portrait, it loads the image from its media query, when it does, the one from 
landscape has already been loaded so it won't just magically gone when I am 
still at the portrait right?

If I'm driving anybody crazy, some comfort for you: I am alredy driving myself 
crazy, so you are just offloading the craziness from me. The craziness you 
thought from my question isn't from my question actually.

tee

On Sep 29, 2011, at 9:37 AM, David Laakso wrote:

 
 
 I did figure it after my post, from xcode's web inspector, a feature I never 
 used before until today.
 
 
 Tee
 
 
 
 
 Care to share what you found out?
 Thanks.
 
 ~d
 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] media queries can't understand body tag

2011-09-28 Thread tee
By the way, the other day I stumble on this adaptive images script.  It works 
better for CMS system.

http://adaptive-images.com/

Tee
On Sep 27, 2011, at 10:42 PM, Hassan Schroeder wrote:

 On 9/27/11 8:44 PM, Tom Livingston wrote:
 David, with nothing but mobile Safari, if I hit a page with multiple
  queries or an element specced as display:none but has a bg image, how
  to you *verify* that an unwanted image loads anyway or not?
 
 As I said in my original email: set up a test page on one of your
 servers and tail the appropriate log file; you can see when images
 are fetched.
 
 The original question was about media queries, not elements set to
 `display: none`, but the same method should work.
 
 -- 
 Hassan Schroeder - has...@webtuitive.com
 webtuitive design ===  (+1) 408-621-3445   === http://webtuitive.com
 http://about.me/hassanschroeder
 twitter: @hassan
  dream.  code.
 
 
 ***
 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] media queries can't understand body tag

2011-09-28 Thread tee
 
 
 With Android/2.2.2 [low-end touch screen] there is a horizontal yellow 
 loading bar above the address bar-- it begins at the left rail and moves to 
 the right rail. Opera Mobile and OperaMini on Android both have a circular 
 whirling gizzmo loading button [same on a low-end SanyoMirro]. 
 

But it's iOS Safari that some people were talking that loads all images, not 
Andriod, not Opera Mini.

So if I have 

main style sheet

body {background : url(bg-img.png)  }


then this

@media screen and (max-width:768px){ body { background:gray 
url(bg-bodytop-768.jpg) no-repeat left center} } 



 iOS Safari does load two images this is how I always understood it, but if I 
target images in the media queries than no extra bg image will be loaded and 
this is what I learned later from Ethan Marcotte's book, but I have never seen 
an article that tells how you can test what elements get loaded in the mobile 
Safari (I don't think it's accurate seeing it from a simulator or Desktop 
version of Safari). In his book, he didn't give a clear demostration either but 
this:

First, we’re setting a background image on the .blog ele- ment. (Specifically, 
the two-toned blog-bg.png graphic we used in Chapter 2 to create the illusion 
of two columns.) Then for smaller displays, those narrower than 768px wide, 
we’re instead placing a simple tiled GIF on the blog element, since we’ve 
linearized the display of those narrower pages.
The problem with this approach is that some small screen browsers, most notably 
Mobile Safari on the iPhone and the iPad, will actually download both graphics, 
even if only one is ultimately applied to the page. While smaller screens don’t 
always equate to lower bandwidth, we’re currently punishing users on smaller 
screens with the download of a much heavier image than they’ll ever see.
Thankfully, these aren’t problems with responsive design in and of itself—we 
just need to rethink the way we’ve imple- mented it.

In fact, I took this approach on my personal portfolio site 
(http://ethanmarcotte.com). By default, the content is arranged in a very 
linear manner, one friendly to mobile devices and narrow browser windows (Fig 
5.12). But as the viewport wid- ens, the grid becomes more complex and more 
asymmetrical (Fig 5.13). And at the highest end of the spectrum, the “full” 
design finally reveals itself: the layout becomes even more complex, and some 
heavier assets, like that big abstract back- ground image, are introduced (Fig 
5.14).


And this is all I learned that images that are placed in media queries won't 
get loaded twice, or all.


Using Safari's Web Inspector I see 4 bg images were loaded in my previouis 
example.

tee





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] media queries can't understand body tag

2011-09-28 Thread tee
Hi Hassan,

Thank you for your patient. I did figure it after my post, from xcode's web 
inspector, a feature I never used before until today.

From the this inspector I could see the difference from the one from Safari.

Some people are kind and patience by nature (you), some never afraid to show 
his stupidity and ignorance publicly (I'm talking about myself), and some are 
snarky by nature, which is David :-) Luckily the world is big enough to for 
everyone.

Tee


On Sep 28, 2011, at 5:27 PM, Hassan Schroeder wrote:

 
  but I have never seen an article that tells how you can test what
  elements get loaded in the mobile Safari
 
 Maybe the third time's the charm --
 
 Set up your test page and access it from your iOS device while
 *watching the server log*. Did the device request the image in
 question or not?
 
 Is there something confusing or ambiguous about that?
 
 --


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] RE: WSG Digest

2011-09-27 Thread tee
I wonder if there is a way to restrict mobile phone devices from scaling, but 
allows touchscreen devices (ipad, samsung galaxy etc) do so.


Tee
On Sep 27, 2011, at 3:31 AM, David Laakso wrote:

 On 9/27/11 5:04 AM, Dave Smith wrote:
 
 Hi Tee
 
 When trying the max/min width approach, was the Meta Viewport Tag used?
 ::trim::
 
 all the best, Dave @davesmiths
 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


Re: [WSG] media queries can't understand body tag

2011-09-27 Thread tee
So iOS Safari loads 4 bg images in this case?


@media screen and (max-width:480px){ body { background:olive 
url(bg-bodytop-480.jpg) no-repeat left -50px} } 


@media screen and (max-width:768px){ body { background:gray 
url(bg-bodytop-768.jpg) no-repeat left center} } 


@media screen and (max-width:1024px){ body { background:blue 
url(bg-bodytop-1205-and-bigger.jpg) no-repeat center center} } 


@media screen and (max-width:1024px){ body { background:blue 
url(bg-bodytop-1024.jpg) no-repeat left 20px} }


tee


On Sep 27, 2011, at 4:20 PM, Tom Livingston wrote:

 I believe it's the iOS Safari with the issue, where it would be most 
 troublesome. Not sure how to test this.



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] media queries can't understand body tag

2011-09-27 Thread tee
Hi Tom,

Thank you. I don't know how to check it either, I have iPad and iPod, so would 
like to learn how to check too.

Used to think browsers load all bg images even with display none declared, and 
one of the reasons I wanted to try out the min/max width approach this time is 
because I (thought) read it from Responsive Web Design ebook by Ethan Marcotte, 
that by targeting the rules in the media queries it prevent browers from 
loading unnecessary rules. But I can't find this important peice of info from 
the book with a quick search just now.


tee


On Sep 27, 2011, at 7:02 PM, Tom Livingston wrote:

 Actually, the way you have this, I think it will work. If you had
 something in your base styles, or in the first media query that was
 set to display:none with a bg image, then that may get downloaded
 anyway. Again, tell me how to check and i'll be glad to test it for
 you.
 
 On Tue, Sep 27, 2011 at 9:59 PM, Tom Livingston tom...@gmail.com wrote:
 I'm not 100% sure, but I believe so, yes. I was just brow-beaten
 offlist by someone because of my reply below. YES, I have an iPhone,
 but what I don't know is how to test - with JUST iOS Safari - whether
 of not a bg image is downloaded to Safari. I'd be glad to test it for
 you, if you can tell me how to confirm it.
 
 On Tue, Sep 27, 2011 at 9:51 PM, tee weblis...@gmail.com wrote:
 So iOS Safari loads 4 bg images in this case?
 
 
 @media screen and (max-width:480px){ body { background:olive 
 url(bg-bodytop-480.jpg) no-repeat left -50px} }
 
 
 @media screen and (max-width:768px){ body { background:gray 
 url(bg-bodytop-768.jpg) no-repeat left center} }
 
 
 @media screen and (max-width:1024px){ body { background:blue 
 url(bg-bodytop-1205-and-bigger.jpg) no-repeat center center} }
 
 
 @media screen and (max-width:1024px){ body { background:blue 
 url(bg-bodytop-1024.jpg) no-repeat left 20px} }
 
 
 tee
 
 
 On Sep 27, 2011, at 4:20 PM, Tom Livingston wrote:
 
 I believe it's the iOS Safari with the issue, where it would be most 
 troublesome. Not sure how to test this.
 
 
 
 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***
 
 
 
 
 
 --
 
 Tom Livingston | Senior Interactive Developer | Media Logic |
 ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
 
 
 
 
 -- 
 
 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
***



[WSG] media queries: device-width vs max/min width

2011-09-25 Thread tee
I would love to hear what other think about the approach for device-width vs 
max/min width.

For myself, I have done a couple sites targeting device-width and really think 
this is better approach. The hype about responsive design got me to try out the 
max/min width approach, I find that I need to tackle more the the window 
resizes (and this means writing more CSS rules means penalizing touchscreen 
device user), and the experience can be quite awful seeing it from desktop 
browser. 

I'm sort of in a defeated mood right now, really feel that except the ego to 
show off, I'm unable to find a convincing reason that desktop user needs to be 
given a responsive website anything smaller than 800px.

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] IE7 Issues - The Final Three

2011-09-24 Thread tee
I would remove the clear rule below copyright p tag, and change the bottom 
frame of the bg image to a new div with background position: left top, then 
wrap the copyright p tag  and all the ULs starts from navFoot in this new div.

e.g.
.footer {background: (bottom-frame.jpg) no-repeat center top; clear:both; 
overflow:hidden}

div class=footer
all elements outside the frame go here
/div

Whenever there is element floated left and right, the only way to make IE7 
behaves is wrap them in a div.

Notice there is go-up menu for language, if absolute position is used 
somewhere, don't declare overflow in the .footer, but keep the clear rule after 
the copyright p tag so that the menu doen't get cut off.

Hope this helps!

tee

On Sep 24, 2011, at 2:16 AM, Cole Kuryakin wrote:

 Hello Sean –
  
 Thanks very much for the link – I tried the (giving the parent element 
 [#content_main] a higher “z” than the hr [#content_main hr] but still no love 
 in IE7. Will have to keep investigating this problem.
  
 The most critical problem I have is Bug 2 – vanishing wrapper footer, footer 
 nav and copyright line.
  
 I just did some more experimenting and found that If I remove the clearing 
 div (right before the end of the wrapper div) bang! Everything comes back in 
 IE7… but of course, disappears in EVERY other browser. Arg! Already have a 
 height declaration in my .clear rule so don’t really know where else to go on 
 this but have to keep trying.
  
 Thanks for your suggestions… if anything else comes to mind particularly 
 regarding bug 2 please let me know.
  
 Cole
  
 From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On 
 Behalf Of Sean K
 Sent: Saturday, September 24, 2011 1:24 PM
 To: wsg@webstandardsgroup.org
 Subject: Re: [WSG] IE7 Issues - The Final Three
  
 Hi Cole,
 
 Bug no. 1
 
 You may need to re-think the mark-up a little. Check this article 
 http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
 
 Bug no. 2
 
 add this to your current stylesheet to trigger hasLayout for that element.
 
 html #formNav {height: 1%;}
 
 
 If you have a specific IE stylesheet then:
 
 #formNav {height: 1%;}
 
 
 Hope this helps.
 
 Sean
 
 
 On Sat, Sep 24, 2011 at 1:46 PM, Cole Kuryakin c...@koisis.com wrote:
 Hello All -
 
 After more than a day I've been able to successfully quash all ie7 issues
 except for three.
 
 I'm hoping that someone can guide me to a solution for these remaining
 problems.
 
 Live development site is here: www.koisis.com/index.php
 
 
 
 Z-INDEX OF POSITIONED HR
 
 Looking at the home page (above) in FF, IE8 or IE9, you'll see that the
 green HR rule (directly below Welcome to Our World) flows BEHIND the
 little green geko. This is as it's suppose to be.
 
 In IE7, however, the rule is ABOVE the geko.
 
 Z-index issues are well documented for IE7 but try as I might - using all of
 the documentation I've read on IE7-z - I can't get this hr to go beneath the
 Geko.
 
 POSITIONED WRAPPER EFFECT, COPYRIGHT LINE AND FOOTER NAV
 
 Again, if you look at the bottom of the home page (above) in FF, IE8 or IE9
 you'll see a graphical wrapper effect (visually defining the bottom of the
 wrapper div) as well as a copyright line and footer nav UL. This is how it's
 suppose to look. In IE7 however, all three elements vanish. Hours and hours
 of research and css/structure re-writing have not gotten me anywhere.
 
 
 
 MYSTERY PADDING/MARGIN (WHATEVER) on LI button
 
 I've got two rectangular buttons (cancel and submit) on the contact page
 (http://www.koisis.com/index.php?cmd=01.09.00.01lac=en-us).
 
 In FF these buttons look as it should. In IE7 however, neither buttons are
 in alignment.
 
 The Cancel button is an LI, the Submit button is a form input button.
 
 Again, hours of searching and css tweaking have resulted in nothing more
 than additional hair-loss.
 
 
 
 If anyone can suggest ways to one or more of these issues in IE7 i'd be
 hugely grateful.
 
 Thanks to all in advance.
 
 Cole
 
 
 
 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***
 
 
 
 
 -- 
 Kind regards,
 Sean Kerr
 Web Developer
 
 
 
 M: 0418 697 201
 E: bullr...@gmail.com
 W: http://www.seankerr.com
 
 
 To look where you're going is to be motivated by fear. To go where you're 
 looking is to be driven by desire, confidence and vision.
 
 
 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org

Re: [WSG] media queries can't understand body tag

2011-09-19 Thread tee
Please see this.

http://bit.ly/mWvfWC

The reason I want to target body tag in media queries is because I don't want 
to panelize mobile user to load the large background image.  I started first 
with min-width but the result was more problematic, so I switched to max-width. 
As to the reason why there is a min-width and max-width separately for 1024px 
is because I want to use a background image (no repeat-x) that fills up the 
width of the desktop's screen (e.g. 2500px), and there is no reason to ask the 
1024 screen resolutions' user loads this large image.

tee

On Sep 18, 2011, at 2:43 PM, Benjamin Hawkes-Lewis wrote:

 On Sun, Sep 18, 2011 at 4:34 PM, tee weblis...@gmail.com wrote:
 Hmmm, media queries can't understand body tag; a id or class for the tag is 
 needed. Spec on W3C site doesn't indicate though as I see example like so:
 
 @media all { body { background:lime } }
 
 A browser bug?
 
 Works for me in Chrome:
 
 http://pastehtml.com/view/b7qe04of6.html
 
 Do you have a testcase you can point to that fails in a named browser?
 
 --
 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] media queries can't understand body tag

2011-09-19 Thread tee
Thank you very much! Yes, this works! I didn't realize order could be an issue.

I took a look at that boston global site that everybody was talking the other 
day, it has this order:

@media screen and (min-width:480px)

@media screen and (min-width:620px)
@media screen and (min-width:810px)
@media screen and (min-width:1400px)

@media screen and (max-width:810px)

@media screen and (max-width: 810px), print

@media screen and (min-width: 380px) 

@media screen and (min-width: 480px) 

@media screen and (min-width: 480px) and (max-width: 620px), print
@media screen and (min-width: 480px) and (max-width: 639px), print 
@media screen and (min-width: 620px), print 
@media screen and (min-width: 810px) 
@media screen and (min-width: 980px)
@media screen and (min-width: 1220px)

@media screen and (min-width: 480px)
@media screen and (min-width: 480px) and (max-width: 620px)
@media screen and (min-width: 620px)
@media screen and (max-width: 810px)
@media screen and (min-width: 900px)
@media screen and (min-width: 960px)
@media screen and (min-width: 1200px)

@media screen and (min-width:810px)

@media screen and (min-width: 1200px)
@media screen and (max-width: 620px)
@media screen and (max-width: 620px), print 
@media screen and (min-width: 480px) 
@media screen and (min-width: 480px) and (max-width: 620px), print
@media screen and (min-width: 620px), print 
@media screen and (min-width: 800px), print 
@media screen and (min-width: 900px), print





tee


On Sep 19, 2011, at 3:28 PM, Hassan Schroeder wrote:

 On 9/19/11 3:02 PM, tee wrote:
 Please see this.
 
 http://bit.ly/mWvfWC
 
 It appears to work the way I *think* you want it to if you order the
 css statements as:
 
 @media screen and (max-width:1024px){ body { background:red} }
 
 @media screen and (max-width:768px) { body { background-color: black; } }/*do 
 not delete*/

 @media screen and (max-width:480px) { body { background-color:olive; } }/*do 
 not delete*/

 @media screen and (min-width:1024px){ body { background: blue 
 url(bg-bodytop.jpg) no-repeat left top} }/*do not delete*/
 
 But let me know if that's an incorrect assumption :-)
 
 -- 
 Hassan Schroeder - has...@webtuitive.com
 webtuitive design ===  (+1) 408-621-3445   === http://webtuitive.com
 http://about.me/hassanschroeder
 twitter: @hassan
  dream.  code.
 
 
 ***
 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] media queries can't understand body tag

2011-09-19 Thread tee
Resend. Please discard previous ones.

Thank you very much! Yes, this works! I didn't realize order could be an issue.

I took a look at that boston global site that everybody was talking the other 
day, it has this order:

@media screen and (min-width:480px)

@media screen and (min-width:620px)
@media screen and (min-width:810px)
@media screen and (min-width:1400px)

@media screen and (max-width:810px)

@media screen and (max-width: 810px), print

@media screen and (min-width: 380px) 

@media screen and (min-width: 480px) 

@media screen and (min-width: 480px) and (max-width: 620px), print
@media screen and (min-width: 480px) and (max-width: 639px), print 
@media screen and (min-width: 620px), print 
@media screen and (min-width: 810px) 
@media screen and (min-width: 980px)
@media screen and (min-width: 1220px)

@media screen and (min-width: 480px)
@media screen and (min-width: 480px) and (max-width: 620px)
@media screen and (min-width: 620px)
@media screen and (max-width: 810px)
@media screen and (min-width: 900px)
@media screen and (min-width: 960px)
@media screen and (min-width: 1200px)

@media screen and (min-width:810px)

@media screen and (min-width: 1200px)
@media screen and (max-width: 620px)
@media screen and (max-width: 620px), print 
@media screen and (min-width: 480px) 
@media screen and (min-width: 480px) and (max-width: 620px), print
@media screen and (min-width: 620px), print 
@media screen and (min-width: 800px), print 
@media screen and (min-width: 900px), print


In my site, this is what I have and apart from the body image not showing if no 
id/class assigned, some of the rules (e.g. unfloat floated boxes) also couldn't 
pick up correctly

@media screen and (max-device-width: 810px) {
* { -webkit-text-size-adjust: 100%; }
}


@media screen and (min-width:810px)

@media screen and (max-width:360px)
@media screen and (max-width:480px)
@media screen and (max-width:768px)
@media screen and (max-width:1024px)
@media screen and (min-width:1024px)


tee
On Sep 19, 2011, at 3:28 PM, Hassan Schroeder wrote:

 On 9/19/11 3:02 PM, tee wrote:
 Please see this.
 
 http://bit.ly/mWvfWC
 
 It appears to work the way I *think* you want it to if you order the
 css statements as:
 
 @media screen and (max-width:1024px){ body { background:red} }
 
 @media screen and (max-width:768px) { body { background-color: black; } }/*do 
 not delete*/

 @media screen and (max-width:480px) { body { background-color:olive; } }/*do 
 not delete*/

 @media screen and (min-width:1024px){ body { background: blue 
 url(bg-bodytop.jpg) no-repeat left top} }/*do not delete*/
 
 But let me know if that's an incorrect assumption :-)
 
 -- 
 Hassan Schroeder - has...@webtuitive.com
 webtuitive design ===  (+1) 408-621-3445   === http://webtuitive.com
 http://about.me/hassanschroeder
 twitter: @hassan
  dream.  code.
 
 
 ***
 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
***



[WSG] media queries can't understand body tag

2011-09-18 Thread tee
Hmmm, media queries can't understand body tag; a id or class for the tag is 
needed. Spec on W3C site doesn't indicate though as I see example like so:

@media all { body { background:lime } }

A browser bug?

Tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] accessibility statements... what are they worth?

2011-09-04 Thread tee
 

On Sep 4, 2011, at 4:51 AM, Andrew Harris wrote:

 Hi all,
 I recently had some problems with the Myki website (I like to use the
 keyboard to navigate - they don't make it easy!), which prompted me to
 visit the site's accessibility page.
 http://www.myki.com.au/Home/Accessibility/Accessibility/default.aspx
 
 There, they make a claim about their efforts to reach WCAG AA
 compliance. Ever pedantic, I ran a few checks over the site, and found
 many errors that would indicate that this simply isn't so. In fact
 only one of the five pages I tested actually passed!
 
 Does it have to wait for someone to bring an action against them, or
 is there some other sort of trigger that can be used to prompt them to
 action? After all, this isn't just some business selling widgets, it's
 a public transport ticketing system!
 
 -- 

The site claims WCAG 1.0 AA compliance.

If I'm not mistaken, keyboard navigation is not included in WCAG 1.0. The site 
(whoever wrote the accessibity statement) may be confused it with access key 
navigation.

If I were a user of this site, I would write email to suggest the site needs 
upgrade to WCAG 2.0 AA comformace, it probably gets ignored, but if more users 
write in it will bring the attention.

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] ebook.epub markup and device compatiblity as well as web standards concern

2011-09-03 Thread tee
Curious if anyone here has experience with ebook development using epub format 
that you can share, e.g., common mistake, devices compatibility and 
accessibility issue.

I am in need to make an ebook using the popular epub format, and my research 
shows that it's basically the same as building a website, using XHTML, CSS, XML 
etc.

Was reading a web related ebook the other day from iPad's ibook, the book has 
tabular layout and images, because I had the font size enlarged, and this 
resulted the tabular layout got cut off, which is fine if it can break the row, 
and display whatever left on the next page. It doesn't, instead bottom part of 
the text in the row got cut off as it reaches footer, so I set the font size to 
normal, the table displays more rows but with the same result with bottom part 
of the text in the last row of the given page got cut off. Similar occurs to 
images too.

It's an ebook from A Book Apart, therefor I assume that with the solid team 
behinds it, this is not caused by negligence in layout but something that can't 
overcome.

Thanks!

tee

***
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?

2011-08-27 Thread tee
 
On Aug 25, 2011, at 10:15 PM, Jay Tanna wrote:

 
 Personally I don't go out of my way to do anything special.  I design the 
 site as it comes and if some people can't access it - tough luck.  There is 
 no point in spending any additional time or money in buying specialist tools 
 for people who are challenged in some form!  Some people on certain forums 
 call me dragon because of my no nonsense views and I don't normally let them 
 down!.
 

Well Jay, you are in the majority. We won't call you dragon–which I understood 
is on the raise due to the girl with the dragon tatoo, and it will reach to 
higher level next year when the year of the dragon arrives. 

Instead, we will call us dinosaur. Extinct. Defendless.

If I may ask, what is the reason that you are in this list? Convert us to 
dragon perhaps?

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] web accessibility with adobe tools

2011-08-24 Thread tee
Marvin,
Maybe you can contact Andrew Kirkpatrick who is Group Product Manager and 
Accessibility from Adobe.

Someone from the list may know his email address who can send it to you 
offlist. 
I googled him and found his twitter 
http://twitter.com/awkawk 
You can contact him via twitter I suppose. 

tee


On Aug 24, 2011, at 2:44 PM, Marvin Hunkin wrote:

 hi.
 well trying to use adobe online system is a bit of a pain, and having to jump 
 via hoops.
 so did find their number in australia.
 so will rin on friday, and see what they say about accessibility in their 
 tools.
 marvin.
 
 



***
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?

2011-08-23 Thread tee
 
 
 Then this will do...
 body { font-family: sans-serif; }
 
 
If you ever do this, I strongly suggest you test it on older Windows System.

tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] adobe cs5 web premium

2011-08-23 Thread tee
Marvin,

Why not send an email or call Adobe Inc?

Unless someone has already used the Adobe products with screen readers, nobody 
can give you answer except Adobe. 
Quite honestly, Adobe targets its products to visual oriented designers, not 
screen reader's users, so I will be surprised if it has good accessibility 
support caters for screen readers. Acrobat software maybe an exception here.

tee

On Aug 24, 2011, at 11:12 AM, Marvin Hunkin wrote:

 hi.
 well i did find the web page and did see what is in it.
 so, which products in the web premium version is acessible with screen 
 readers.
 i know illustrator and photo shop is probably not acessible with jaws, but 
 what about fireowrks, i know dream weaver is, and what about flash.
 marvin.



***
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?

2011-08-20 Thread tee
 
On Aug 18, 2011, at 6:55 PM, Josh Street wrote:
 
 
 Many dyslexics have difficulty with certain fonts or with small print; 
 others would prefer to have a colored background to reduce contrast.

Stumbled on this article: 
Dyslexie, A Typeface Designed To Help Dyslexics Read

Comment from Pam T offers a voice that I rarely read from people who does 
website accessibility and accessibility practitioners.


http://www.fastcodesign.com/1664561/dyslexie-a-typeface-designed-to-help-dyslexics-read
 
 Unfortunately, the preferences of dyslexic people vary considerably. For 
 example, it is unusual for someone to be better at reading all capitals. 
 Generally, this makes text much harder to read, both for non-dyslexics and 
 dyslexics. Also, some dyslexic people are tremendously confused by sans-serif 
 fonts, which make it difficult to distinguish a capital I from the 
 lower-case 'l' for example.
 
 Read more: http://www.dyslexia.com/library/webdesign.htm#ixzz1VR2sig6D
 


Curious, do any of the accessibility practitioners not think user has 
responsibility too? I ask this because I don't remember reading anything about 
it.

tee



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


Re: [WSG] iOS Safaro issue (?): Fixed and Absolute position

2011-08-12 Thread tee
Hi Tatham,

Thank you!!  Feel utterly silly I never discover the feature in 7 by 8 
iPad screen and 2 by 3 screen from iPod Touch
So I did some exploring, notice in mobile site that mimics App like interface, 
it doesn't work, take the new twitter mobile site for example, and the iScroll 
that Caleb mentioned (thanks Caleb!) also disable the go to top.

So I guess respecting native support is better yes?

tee


On Aug 11, 2011, at 8:21 PM, Tatham Oddie wrote:

 Hi Tee,
 
 (or is there magic tap for go to top shortcut?)
 
 Just tap at the top of the screen - ie, on the time display.
 
 Almost any iOS list / screen will scroll back to the top.
 
 
 -- Tatham



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] keyboard navigation support for accordion/tabs

2011-08-12 Thread tee
Was adding ARIA support for tabs menu for a site , so I checked a few sites 
that have ARIA support and examples done by some people, but left with a 
keyboard navigation support queston for tabs instead.


First I always thought the correct approach is this:

1.  [tab1]  [tab2] [tab3] and an press enter to access to content in each 
tab.


But all the ARIA support examples I stumbled on use DHTML Style Guide Working 
Group's recommendation which uses arrow keys to access the menus, I am however 
unable to find a site that uses this approach though. Yahoo is the example, 
which I think uses #1 method, but the focus so poorly supported I am not 100% 
positive excet

2.
http://test.cita.illinois.edu/aria/tabpanel/tabpanel1.php
http://codetalks.org/source/widgets/tabpanel/tabpanel1.html
http://hanshillen.github.com/jqtest/

Amazon's example is worse, it has carousel in each tab and no way to access to 
second tab.

Thanks!

Tee





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] iOS Safaro issue (?): Fixed and Absolute position

2011-08-11 Thread tee
David,

On Aug 10, 2011, at 8:18 PM, David Laakso wrote:
 
 
 I think position:fixed works on iOS5...
 
 
Thank you, I didn't even aware of it–it's been a while since I have the device 
connects to my desktop.
 [1]
 http://www.lazycoder.com/weblog/2010/05/27/quick-jquery-hack-to-fix-positionfixed-toolbars-in-iphoneipadipod-touch/
 =
 
Tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] iOS Safaro issue (?): Fixed and Absolute position

2011-08-11 Thread tee
 
On Aug 10, 2011, at 8:18 PM, David Laakso wrote:
 
 I think position:fixed works on iOS5...
 http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5

Hmmm, I guess this isn't as useful because iOS5 isn't released  yet for 
end-users. The newest version is 4.3.5 and I was at 4.3.2.

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] border doesn't work when -ms-filter (gradient) is used

2011-08-10 Thread tee
Hi Russ, 

I didn't see this post of yours until 5 minutes ago which was rescued from my 
gmail web account spam box, and it was because I realized I haven't been 
receiving Some links for light reading for many months.

Thanks for taking the time to do the test, and the info about the MS filter.

Tee
On Jul 9, 2011, at 5:04 PM, Russ Weakley wrote:

 Hi Tee,
 
 Unfortunately, this is a known issue. 
 
 Basically, this MS gradient filters will drown out or over-ride borders. 
 You can see this more dramatically if you apply an MS gradient filter to a 
 box that also has a border-radius defined. The MS gradient filter will render 
 a gradient background as a square box - over-riding the round corners 
 entirely. 
 
 Bottom line: these MS filters are very crude, and also cause performance 
 issues - making page load much slower.
 
 Apologies if this was just a rough test, but if you were going to try and 
 make these gradients cross-browser, you would need to do something like this 
 (excluding the MS filter in sample below):
 
 #c td
 {
   background-image: -webkit-gradient(linear,left top,left 
 bottom,from(#fff),to(yellow));
   background-image: -webkit-linear-gradient(#fff,yellow);
   background-image: -moz-linear-gradient(#fff,yellow);
   background-image: -ms-linear-gradient(#fff,yellow);
   background-image: -o-linear-gradient(#fff,yellow);
   background-image: linear-gradient(#fff,yellow);
 }
 
 The first one if for the current version of webkit - which uses the oldest 
 syntax
 The second one is for Chrome and the upcoming webkit versions (using the W3C 
 syntax)
 The third one is obviously mozilla (using a slightly older syntax, but works 
 with the W3C syntax)
 The fourth is for IE10 (using the W3C syntax)
 Then Opera (using the W3C syntax)
 And last, the actual W3C version
 
 Aren't vender-specific extensions a joy :(
 
 Be careful abut using the center keyword to define the start position/angle 
 as this is really only supported by Mozilla (which uses a slightly older 
 syntax). All other browsers support the W3C syntax, which allow the start 
 position/angle to be defined using four options:
 
 Option 1 - leave blank
 You can actually leave the start point or angle undefined, and the browser 
 will use the initial value “top” as the start point. 
 
 Option 2 - single keyword
 You can define the start point/angle using a single keyword: left, 
 right, top, bottom
 
 Option 3 - two keywords
 You can define the start point/angle using two keywords: left top, left 
 bottom, right top, right bottom
 Note: center is not permitted.
 
 Option 4 - angle
 You can define the start point/angle using any positive or negative angle: 
 0deg, 90deg, -50deg ... etc
 
 I prefer option 1 where possible (simplest to write) or option 4 (can define 
 exact angle).
 
 HTH
 Russ
 
 
 On 10/07/2011, at 8:54 AM, tee wrote:
 
 Is this an IE9 bug?
 
 http://jsbin.com/acawat
 
 First table has -ms-filter: progid:DXImageTransform.Microsoft.gradient for 
 th and td, border lines are gone except the first (border-top for th) and 
 the last {border-bottm for td).
 
 Thanks!
 
 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
 ***
 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] iOS Safaro issue (?): Fixed and Absolute position

2011-08-10 Thread tee
iOS Safari has rendering issue with fixed position, that is, the element will 
stay at the middle of the page when the hight of content is longer than the 
device height.

Side note: as a touchscreen device user, I find a go to top link provides an 
appreciated usability and accessibility, especially when the bottom section of 
the page has no useful navigation that allows users to go to previous/next page 
or the main menu (or is there magic tap for go to top shortcut?)

A site I was working, client doesn't want the conventional go to top link but 
something fancy that will show up when user scroll down, and fade out when 
scroll up to the top, this part isn't a problem with jquery, and I have found 
simple script that does this too, but in IOS Safari (can anyone confirm this is 
the case too for non-iOS device?) it shows up in the middle of the page, and 
when you are at the bottom section of the page you won't be able to see it.

Please see these two examples:

This one uses fixed position.
 http://briancray.com/tests/topofpage/index.html


And I changed it to absolute position but  it still behaves the same.
http://jsbin.com/oravun/

Anyway to get around this?

Thanks!


tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] major web site project

2011-08-10 Thread tee
I suggest we spam this person 100 times each until he figures how to die 
without bothering us!

On Aug 10, 2011, at 7:30 PM, garment4u...@gmail.com wrote:

 go die
 
 2011/8/11 garment4u...@gmail.com garment4u...@gmail.com
 Please !!
 WSG !!
 NEVER AGAIN !
 
 2011/8/12 Marvin Hunkin startrekc...@gmail.com
 Hi.
 
 Well looking to do a major web project, and will be a blindness related site.
 
 With information, services, and links to vendors.
 
 And my side project  will be to continue to rebuild my star trek project.
 
 So any ideas, suggestions, for layout, content, etc would be welcomed.
 
 Marvin.
 
  
 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Drop-down menu issues

2011-07-29 Thread tee
 
On Jul 29, 2011, at 4:59 AM, Nancy Johnson wrote:
 Other issues have come up non-508 and it was extremely challenging to
 style each level with and without a link.
 
 Then I discovered Superfish and wanted to upgrade the technology,
 however it won't work for keyboard only users without a link.
 
 Question... Is it appropiate to use a href=# or any other means to
 indicate no link?  there is no onclick event straight html.  Is there
 something else?

I think you are confusing with the link (because of drop-down menu?), content 
and keyboard navigation.

1. Keyboard navigation allows a user to tab through links within a page. If a 
section  of content consists of links and content,  it simply looks for the 
next link. It couldn't magically provide tab-able navigation within the content 
if there is no herf link whether the content is in a drop-down menu (or similar 
effect) or not.

2.  If a phrase, a sentence of paragraph or a li element is not a link (to 
somewhere) and it's not used to trigger a JS effect within the page (such as 
tab, accordion, collapsable, or popup), you should never use a href=#.

3. A drop-down menu is a conventional set of navigational elements that group 
together within a section using show/hide sort of effect. Maybe you can still 
call it drop-down menu if it's a mixed of navigational elements and content, 
but IMHO the name doesn't matter because it boils down to this: using JS effect 
to control a section of the page that has both navigational elements and 
content. What matters is how you go about doing it right that doesn't add 
obstacle for the users, and for an effect like this, you probably don't want to 
use suckerfish or superfish or any drop-down menu script but something simple 
that controls the show/hide, then use absolute position to control the hidden 
div so when it triggers (either by hover or click or keyboard tab), it mimics a 
drop-down effect instead of collapsable. Google jQuery show hide you should be 
able to find plenty examples.

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Re-ask: z-index bug in webkit?

2011-07-25 Thread tee
Hi Mathew,

Thanks for that info which I knew it's public and forever, and I still have my 
reason to using the short url when posting link to public list.

Apart from this reason:
Can anyone see my bitly links? 
Individual links are permanent by design and are always publicly accessible. 
You can see your list of publicly viewable links under the Public Timeline link 
in the Manage tab. This list of your bitly links is available to the public at 
http://bit.ly/u/[your username]. While the list is public by default, you can 
turn off access to this list in the Account section of site by clicking on your 
name and adjusting the settings.

Tee
On Jul 23, 2011, at 4:55 AM, Mathew Robertson wrote:

 http://code.google.com/p/bitly-api/wiki/ApiDocumentation#/v3/expand
 
 http://bit.ly/oyBzIY+
 
 You should read the fine print  ie: if you generate a short url, you can 
 always get back the original url... and its public anyway.
 
 cheers,
 Mathew Robertson



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Re-ask: z-index bug in webkit?

2011-07-23 Thread tee
Hi Birendra,

It's not strange, what you saw is correct. bit.ly is a short url service. I had 
reason not wanting to post the url. Wish there is a way to remove that email of 
yours.


Anyhow, thanks for checking. The issue has been fixed.

tee

On Jul 21, 2011, at 11:51 PM, Birendra wrote:

 Strange it's take me to the another site



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] z-index bug in webkit?

2011-07-21 Thread tee
I have never experienced z-index issue before in webkit browsers and this one 
really got me. It's been two days still haven't been able to solve.

Visit from Chorme or Safari, the slideshow has a transparent layer for texts. I 
do believe the z-indx order is correct because it works for IE6/7.

http://bit.ly/qJoJcy

Thank you!
tee



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] z-index bug in webkit?

2011-07-21 Thread tee
http://bit.ly/nX5se0


On Jul 21, 2011, at 7:21 PM, Al Sparber wrote:

 On 7/21/2011 10:10 PM, tee wrote:
 I have never experienced z-index issue before in webkit browsers and this 
 one really got me. It's been two days still haven't been able to solve.
 
 Visit from Chorme or Safari, the slideshow has a transparent layer for 
 texts. I do believe the z-indx order is correct because it works for IE6/7.
 
 http://bit.ly/qJoJcy
 
 Actually, it does not work well in any modern browser. Perhaps IE7 is its 
 sweet spot :-)
 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] Re-ask: z-index bug in webkit?

2011-07-21 Thread tee
p/s: Please ignore my previous thread as it is a static page and the slide 
images' links to my local server.

I have never experienced z-index issue before in webkit browsers and this one 
really got me. It's been two days still haven't been able to solve.

Visit from Chorme or Safari, the slideshow has a transparent layer for texts. I 
do believe the z-indx order is correct because it works for IE6/7.

http://bit.ly/oyBzIY

Thank you!
tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Re-ask: z-index bug in webkit?

2011-07-21 Thread tee
Strange, it works for me.
 http://bit.ly/oyBzIY

tee
On Jul 21, 2011, at 10:27 PM, Birendra wrote:

 Hi Tee
 
 The link isn't working. http://bit.ly/oyBzIY;
 
 Please can you check the link.
 
 Regards
 Birendra
 -Original Message-
 From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
 Behalf Of tee
 Sent: Friday, July 22, 2011 10:38 AM
 To: wsg@webstandardsgroup.org
 Subject: [WSG] Re-ask: z-index bug in webkit?
 
 p/s: Please ignore my previous thread as it is a static page and the slide
 images' links to my local server.
 
 I have never experienced z-index issue before in webkit browsers and this
 one really got me. It's been two days still haven't been able to solve.
 
 Visit from Chorme or Safari, the slideshow has a transparent layer for
 texts. I do believe the z-indx order is correct because it works for IE6/7.
 
 http://bit.ly/oyBzIY
 
 Thank you!
 tee
 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] html5 quest: figure

2011-07-18 Thread tee
Can the figure element use for slideshow, e.g.

div class=slider
figure
img src=image /
figcaption description,,,/figcaption

/figure

figure
img src=image /
figcaption description,,,/figcaption

/figure

figure
img src=image /
figcaption description,,,/figcaption

/figure

/div

Or maybe the question should be , can a single figure contains many figcaption? 
And use it for slidershow's markup.

figure
img src=image1 /
figcaption description,,,/figcaption
img src=image2 /
figcaption description,,,/figcaption
img src=image3 /
figcaption description,,,/figcaption
/figure

Thanks!

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] html5 quest: figure

2011-07-18 Thread tee
 
 
 
 Not really sure whether this answers your question from an article in html5 
 doctor but either way you may want to check it for yourself [1].
 
 The figcaption element is optional and can appear before or after the 
 content within the figure. Only one figcaption element may be nested 
 within a figure, although the figure element itself may contain multiple 
 other child elements (e.g., img or code).
 [1]
 http://html5doctor.com/the-figure-figcaption-elements/
 
 ~d
 
 

Thanks David,

I came from the html5doctor's office :) Couldn't get the prescription that I 
thought useful for this particular case.

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] accessibilty: avoid radio buttons?

2011-07-16 Thread tee
I am building a site that must meet wcag 2.0 compliant. A web form has radio 
buttons option, and according to afb.org:

Radio buttons are not supported consistently by all versions of browsers, 
screen readers, and combinations. A correctly labeled and tagged set of radio 
buttons is a very difficult control for users of screen-reading technology. If 
a choose only one situation is called for, a select menu is preferable.

Is this a sound advice?

Thanks!

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] accessibilty: avoid radio buttons?

2011-07-16 Thread tee
Andrew,

Keyboard yes, not sure about NVDA as I don't have this software, but accessible 
for VoiceOver. 

Thanks!

tee

On Jul 16, 2011, at 4:34 PM, Andrew Boyd wrote:

 On Sun, Jul 17, 2011 at 9:14 AM, tee weblis...@gmail.com wrote:
 I am building a site that must meet wcag 2.0 compliant. A web form has radio 
 buttons option, and according to afb.org:
 
 Radio buttons are not supported consistently by all versions of browsers, 
 screen readers, and combinations. A correctly labeled and tagged set of 
 radio buttons is a very difficult control for users of screen-reading 
 technology. If a choose only one situation is called for, a select menu is 
 preferable.
 
 Is this a sound advice?
 
 Thanks!
 
 tee
 
 Tee,
 
 does it work with a keyboard only? Can you operate it with a screen
 reader like NVDA with your eyes closed? There's a whole lot more to
 code-level conformance than those two things, and a whole lot more to
 WCAG 2.0 conformance than code-level conformance, but if you get those
 two things right then you've made a brilliant start.
 
 Best regards, Andrew
 
 -- 
 ---
 Andrew Boyd
 http://uxbookclub.org -- connect, read, discuss
 
 
 ***
 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] Breaking validation using noscript - Is there a solution?

2011-07-15 Thread tee
Mike,

I have not learned all the touch gestures yet so I am not positive tapping 
twice activates the link is correct behavior, at least not until today that I 
see it in tesco site.

Tapping twice is zoom in though, this is how I understand it, and tapping twice 
 in tesco site also enlarge the tapped area of the page, but it also activates 
the link, however it takes a frustrating guessing, for example, it doesn't work 
on the top section of the tabs, but works for the vertical ones where Liftstyle 
 Community is, but it only works the second time after the area has been 
zoom-in (first twice tapping), and there is quite a bit of guessing to tap on 
the right area to trigger the link. For the tabs on the top, it doesn't work, 
but I found out, the first tap open up the panel, and the second tap on the 
same area activates the link, the same works for vertical ones too.

So this seems correct and echos the desktop's behavior, first hover, then click 
to link destination. I am not a very savvy touchscreen user yet, so I am not 
fully sure if it's just me who found it confusing (and I really expect the 
first tap brings me to the destination for a normal link), or the majority 
people will find it confusing too. My though has always been, there is no hover 
for touchscreen device, so I don't use the hover for link, and for effect like 
tabs, accordion, or collapsing panel, I don't use the same area for link that 
switches between tabs or accordion menu link to another page.

And the confusion comes from this: I first visited the site from iPad, I 
couldn't visit any page  in the mentioned areas【1】but the tab switching between 
panel is an expected result. Then I visited the page from desktop browser, and 
I saw hover is for switching panel, click for the link destination.

【1】 Did you already re-worked the area? I remember I also tapped the same tab 
twice, not simultaneously but after the panel has opened the first time I 
visited the page, I also remember I tapped the content in the panel to look for 
link.

tee

On Jul 15, 2011, at 1:11 AM, Foskett, Mike wrote:

 Hi Tee,
 
 On an iPad touching one of the tabs changes the tab content, in the same 
 manner as hover, while tapping it twice activates the link itself.
 Standard iPad / iPhone behaviour I thought?
 
 
 Regards
 
 
 Mike
 
 -Original Message-
 From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On 
 Behalf Of tee
 Sent: 14 July 2011 22:07
 To: wsg@webstandardsgroup.org
 Subject: Re: [WSG] Breaking validation using noscript - Is there a solution?
 
 Mike,
 
 Joe praised the site so I took a look from iPad as I was reading email in bed 
 - the tabs on the homepage are not touchscreen friendly though. Touching each 
 tab the panel ketp chaning but links to nowhere.
 
 
 tee
 On Jul 14, 2011, at 6:03 AM, Joseph Taylor wrote:
 
 Not sure what to recommend for the noscript tag - Frank's idea is pretty 
 good.
 
 Just a thought, is the error really critical if it works? Using XHTML 
 Strict, you're gonna have a tough time making the validator happy.
 
 Nice job on the Tesco site by the way. Real nice. I especially like the two 
 sections of links with changing images - that's just badass!
 Joseph R. B. Taylor
 Web Designer/Developer
 --
 Sites by Joe
 Clean, Simple and Elegant Web Design
 Web: http://sitesbyjoe.com
 Phone: (508) 840-9657
 Email: j...@sitesbyjoe.com
 
 
 
 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***
 
 
 This is a confidential email. Tesco may monitor and record all emails. The 
 views expressed in this email are those of the sender and not Tesco.
 
 Tesco Stores Limited
 Company Number: 519500
 Registered in England
 Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL
 VAT Registration Number: GB 220 4302 31
 
 
 ***
 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] Breaking validation using noscript - Is there a solution?

2011-07-14 Thread tee
Mike,

Joe praised the site so I took a look from iPad as I was reading email in bed - 
the tabs on the homepage are not touchscreen friendly though. Touching each tab 
the panel ketp chaning but links to nowhere.


tee
On Jul 14, 2011, at 6:03 AM, Joseph Taylor wrote:

 Not sure what to recommend for the noscript tag - Frank's idea is pretty good.
 
 Just a thought, is the error really critical if it works? Using XHTML Strict, 
 you're gonna have a tough time making the validator happy.
 
 Nice job on the Tesco site by the way. Real nice. I especially like the two 
 sections of links with changing images - that's just badass!
 Joseph R. B. Taylor
 Web Designer/Developer
 --
 Sites by Joe
 Clean, Simple and Elegant Web Design
 Web: http://sitesbyjoe.com
 Phone: (508) 840-9657
 Email: j...@sitesbyjoe.com



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] border doesn't work when -ms-filter (gradient) is used

2011-07-14 Thread tee
Hi Birendra,

td is the type selector, any element declared in the td, the child/descendant 
of td will pick it up unless you overwrite the rule.

the border line in td in IE9 gone is caused by this:

-ms-filter: 
progid:DXImageTransform.Microsoft.gradient(startColorStr='#ff', 
EndColorStr='#FAFAF9');

Since that -ms-filter is IE proprietary syntax could it be treated as a bug 
in IE9? This is what I wanted to find out.

THanks!

tee

On Jul 11, 2011, at 9:30 PM, Birendra wrote:

 HI Tee
 
 That's strange it's work here fine. Normally when you give any id to div or
 td you have to mention the same id for the default property. So they are
 work fine in ie.
 
 In your case you give the class property in default tag td but actually
 this tag came under the #a so I think you have to define #a before the
 default tag.
 
 Try this I think this will work.
 
 Regards
 Birendra
 
 -Original Message-
 From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
 Behalf Of tee
 Sent: Tuesday, July 12, 2011 12:33 AM
 To: wsg@webstandardsgroup.org
 Subject: Re: [WSG] border doesn't work when -ms-filter (gradient) is used
 
 Birendra,
 
 No. It won't. 
 
 td already has a border-bottom. If it works,  #a td will pick up the
 border-bottom.
 
 Thanks anywaw!
 
 tee
 On Jul 10, 2011, at 9:51 PM, Birendra wrote:
 
 Hi Tee
 
 Just you have to define the # in the td. Just like this #a td { 
 border-bottom:1px solid #f3c0aa}
 
 This will help you.
 
 Regards
 Birendra(Web Designer)
 
 -Original Message-
 From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] 
 On Behalf Of tee
 Sent: Sunday, July 10, 2011 4:24 AM
 To: wsg@webstandardsgroup.org
 Subject: [WSG] border doesn't work when -ms-filter (gradient) is used
 
 Is this an IE9 bug?
 
 http://jsbin.com/acawat
 
 First table has -ms-filter: 
 progid:DXImageTransform.Microsoft.gradient for th and td, border 
 lines are gone except the first (border-top for th) and the last
 {border-bottm for td).
 
 Thanks!
 
 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
 ***
 
 
 
 
 ***
 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] border doesn't work when -ms-filter (gradient) is used

2011-07-11 Thread tee
Birendra,

No. It won't. 

td already has a border-bottom. If it works,  #a td will pick up the 
border-bottom.

Thanks anywaw!

tee
On Jul 10, 2011, at 9:51 PM, Birendra wrote:

 Hi Tee
 
 Just you have to define the # in the td. Just like this #a td {
 border-bottom:1px solid #f3c0aa}
 
 This will help you.
 
 Regards
 Birendra(Web Designer)
 
 -Original Message-
 From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
 Behalf Of tee
 Sent: Sunday, July 10, 2011 4:24 AM
 To: wsg@webstandardsgroup.org
 Subject: [WSG] border doesn't work when -ms-filter (gradient) is used
 
 Is this an IE9 bug?
 
 http://jsbin.com/acawat
 
 First table has -ms-filter: progid:DXImageTransform.Microsoft.gradient for
 th and td, border lines are gone except the first (border-top for th) and
 the last {border-bottm for td).
 
 Thanks!
 
 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
 ***
 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] border doesn't work when -ms-filter (gradient) is used

2011-07-09 Thread tee
Is this an IE9 bug?

http://jsbin.com/acawat

First table has -ms-filter: progid:DXImageTransform.Microsoft.gradient for th 
and td, border lines are gone except the first (border-top for th) and the last 
{border-bottm for td).

Thanks!

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] IE issues: display none vs absolute position for show/hide effect

2011-06-17 Thread tee
David,

Thanks! 

On Jun 16, 2011, at 9:47 AM, David Hucklesby wrote:
 
 But that's the reason it shows up momentarily on slow connections. I
 suspect it only shows in IE due to longer latency in those old browsers
 - JavaScript takes a whole bunch longer to kick in.

 
 Using jQuery hide comes too late in those browsers. Which is precisely
 the problem that the solution I offered is designed to address.
 

Well, I didn't know this because the is the first time I face this issue and 
yet i have used 'hide' very often. So I didn't really understand why you 
suggested to use extra JS in the head section and use display none (something I 
really wanted to avoid) until you explained it .


 Some folks sure are stubborn! ;)
 


Stubborn is a must quality you need to survive in the dog eats dog jungle if 
you haven't already knew that :-)



 -- 
 Cordially,
 David


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] IE7 page load issue, can it be prevented?

2011-06-15 Thread tee
 
David,
thanks.
I didn't use your code because I didn't think my code has any problem. This 
seems to be occurring in IE only and related to page load - I thought it's 
IE7/8 issue but IE9 too when the site has been browsing for a while and a 
certain page is more heavier than other.

I use simple show hide 

jQuery('#mini-cart').hide();
 jQuery('#mini-cart-a').click(function() {
jQuery('#mini-cart').toggle(400);
   return false;
  });
  

#mini-cart {position:absolute; width:300px; overflow: hidden} 

the hidden layer shouldn't show through during page load.

tee

On Jun 15, 2011, at 9:26 AM, David Hucklesby wrote:

 On 6/14/11 7:45 PM, tee wrote:
 David,
 
 Thanks for the response. I made two screencasts.
 
 In advanced browsers and no problem. The dropdown at the left top
 somtimes does show through if the connection is very slow and the
 page takes more than 10 seconds to load.
 
 http://www.youtube.com/watch?v=Z11rqWBLLuc
 
 
 In this movie taken from IE7, between 17 to 18 seconds you can see
 the hidden layers (choose your tea and tea bag (2) ) shown through
 while the page is still loading.
 http://www.youtube.com/watch?v=dI9QvAFKoSM
 
 I am trying to find a way if it's possible to prevent this from
 happening despite the slow connection.
 
 
 On Jun 14, 2011, at 8:21 AM, David Hucklesby wrote:
 
 On 6/13/11 6:31 PM, tee wrote:
 Some pages of the site loads very slow in IE7 (about 15
 seconds), and while the page was loading and (I assume) IE7 was
 still parsing the scripts, all the hidden elements shown through.
 I wander if there is a way to prevent this.
 
 https://picasaweb.google.com/weblist99/Jun132011?authkey=Gv1sRgCKrj4sKyz-33-gEfeat=directlink
 [...]
 
 
 
 Here's what works for me. I include this code in thehead  of the document:
 
 !-- add class=js to html element if JavaScript is on -- script
 type=text/javascript document.documentElement.className='js';
 /script
 
 To display/hide an element, div#part-2 for example, use this CSS:
 
 .js #part-2 { display: none; } /* hide if JS is enabled */
 
 Apologies if I misunderstood. Your example code is beyond my
 comprehension this early morning... :(
 
 
 Tee,
 
 How are you hiding that content in the first place? (Your code is beyond
 my feeble brain's comprehension. Sorry.)
 
 This is exactly what the code I sent you is meant to avoid. Without JS,
 the hidden content shows up. With JS, the 'js' class is applied before
 the page loads. Thus the CSS rule to hide that content applies, and the
 content has no chance of appearing until your script overrides it.
 
 Does this not work for you? Or are you using this technique, and somehow
 find it fails?
 
 Sorry I can't be much more help.
 -- 
 Cordially,
 David
 
 
 
 ***
 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] IE7 page load issue, can it be prevented?

2011-06-15 Thread tee
Thanks Jon,

I am not trying to hide the texts from desktop screen and has screen reader 
able to read it - I want the content be available at all time for search 
engines, browsers, CSS enabled/disabled and JS enabled/disabled. 

I am simply using a simple show/hide script to achieve a visual effect - a 
show/hide effect like this:
http://www.learningjquery.com/2006/09/slicker-show-and-hide

The difference is, I use absolute position for hidden div so that when it gets 
clicked, the surrounding content, notably, the content below the content from 
the hidden div, does not get shifted like the above example show.

I need to move on from this issue so right now I'm forced to declare an inline 
display:none for the hidden #mini-cart ID, and this finally prevents the 
hidden layer show through behavior in IE browsers. Theorically, it's very 
unlikely this site will be used by Screen Reader's user or anyone using the 
site would disabled the CSS, so the display:none does the trick. But I am 
trying to take the accessibility into account, and the display:none will 
prevent screen reader from accessing content in the hidden div. 

But IE appears to have issue when no display:none is used. 


jQuery('#mini-cart').hide();
 jQuery('#mini-cart-a').click(function() {
   jQuery('#mini-cart').toggle(400);
  return false;
 });


#mini-cart {position:absolute; width:300px; overflow: hidden}

In advanced browsers and no problem. The dropdown at the left top somtimes 
does show through if the connection is very slow and the page takes more than 
10 seconds to load.

http://www.youtube.com/watch?v=Z11rqWBLLuc


In this movie taken from IE7, between 17 to 18 seconds you can see the hidden 
layers (choose your tea and tea bag (2) ) shown through while the page is still 
loading. 
http://www.youtube.com/watch?v=dI9QvAFKoSM
tee

On Jun 15, 2011, at 7:04 PM, Jon Reece wrote:

 Tee,
 You could try hiding it only visually with css:
 
 From html5 boilerplate,
 
 /* Hide only visually, but have it available for screenreaders: by Jon Neal.
   www.webaim.org/techniques/css/invisiblecontent/j.mp/visuallyhidden */
 .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; 
 overflow: hidden; padding: 0; position: absolute; width: 1px; }
 
 
 And then toggling that class in your click event:
 
  jQuery('#mini-cart-a').click(function() {
jQuery('#mini-cart').toggleClass('visuallyhidden');
   return false;
  });
 
 
 - Jon
 
 
 
 On Wed, Jun 15, 2011 at 9:30 PM, tee weblis...@gmail.com wrote:
 
 David,
 thanks.
 I didn't use your code because I didn't think my code has any problem. This 
 seems to be occurring in IE only and related to page load - I thought it's 
 IE7/8 issue but IE9 too when the site has been browsing for a while and a 
 certain page is more heavier than other.
 
 I use simple show hide
 
 jQuery('#mini-cart').hide();
  jQuery('#mini-cart-a').click(function() {
jQuery('#mini-cart').toggle(400);
   return false;
  });
 
 
 #mini-cart {position:absolute; width:300px; overflow: hidden}
 
 the hidden layer shouldn't show through during page load.
 
 tee
 
 
  On Jun 14, 2011, at 8:21 AM, David Hucklesby wrote:
 
  On 6/13/11 6:31 PM, tee wrote:
  Some pages of the site loads very slow in IE7 (about 15
  seconds), and while the page was loading and (I assume) IE7 was
  still parsing the scripts, all the hidden elements shown through.
  I wander if there is a way to prevent this.
 
  https://picasaweb.google.com/weblist99/Jun132011?authkey=Gv1sRgCKrj4sKyz-33-gEfeat=directlink
  [...]
 
 
 ***
 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
***


[WSG] IE issues: display none vs absolute position for show/hide effect

2011-06-15 Thread tee
Repost, change subject line.

David and Jon,

I am not trying to hide the texts from desktop screen and has screen reader 
able to read it - I want the content be available at all time for search 
engines, browsers, CSS enabled/disabled and JS enabled/disabled. 

I am simply using a simple show/hide script to achieve a visual effect - a 
show/hide effect like this:
http://www.learningjquery.com/2006/09/slicker-show-and-hide

The difference is, I use absolute position for hidden div so that when it gets 
clicked, the surrounding content, notably, the content below the content from 
the hidden div, does not get shifted like the above example show.

I need to move on from this issue so right now I'm forced to declare an inline 
display:none for the hidden #mini-cart ID, and this finally prevents the 
hidden layer show through behavior in IE browsers. Theorically, it's very 
unlikely this site will be used by Screen Reader's user or anyone using the 
site would disabled the CSS, so the display:none does the trick. But I am 
trying to take the accessibility into account, and the display:none will 
prevent screen reader from accessing content in the hidden div. 

But IE appears to have issue when no display:none is used. 


jQuery('#mini-cart').hide();
 jQuery('#mini-cart-a').click(function() {
   jQuery('#mini-cart').toggle(400);
  return false;
 });


#mini-cart {position:absolute; width:300px; overflow: hidden}

In advanced browsers and no problem. The dropdown at the left top somtimes 
does show through if the connection is very slow and the page takes more than 
10 seconds to load.

http://www.youtube.com/watch?v=Z11rqWBLLuc


In this movie taken from IE7, between 17 to 18 seconds you can see the hidden 
layers (choose your tea and tea bag (2) ) shown through while the page is still 
loading. 
http://www.youtube.com/watch?v=dI9QvAFKoSM
tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] IE7 page load issue, can it be prevented?

2011-06-14 Thread tee
David,

Thanks for the response. 
I made two screencasts.

In advanced browsers and no problem. The dropdown at the left top somtimes 
does show through if the connection is very slow and the page takes more than 
10 seconds to load.

http://www.youtube.com/watch?v=Z11rqWBLLuc


In this movie taken from IE7, between 17 to 18 seconds you can see the hidden 
layers (choose your tea and tea bag (2) ) shown through while the page is still 
loading. 
http://www.youtube.com/watch?v=dI9QvAFKoSM

I am trying to find a way if it's possible to prevent this from happening 
despite the slow connection.


Thanks



On Jun 14, 2011, at 8:21 AM, David Hucklesby wrote:

 On 6/13/11 6:31 PM, tee wrote:
 Some pages of the site loads very slow in IE7 (about 15 seconds),
 and while the page was loading and (I assume) IE7 was still parsing
 the scripts, all the hidden elements shown through. I wander if there
 is a way to prevent this.
 
 https://picasaweb.google.com/weblist99/Jun132011?authkey=Gv1sRgCKrj4sKyz-33-gEfeat=directlink
 
 
 
 If I understand you correctly, you have sections on the page that are
 set to display if JavaScript is off, but want to hide them before the
 page loads in the event scripting is enabled?
 
 Wisely, you don't rely on the noscript element - that does not work if
 scripts are blocked by a firewall.
 
 Here's what works for me. I include this code in the head of the document:
 
  !-- add class=js to html element if JavaScript is on --
  script type=text/javascript
document.documentElement.className='js';
  /script
 
 To display/hide an element, div#part-2 for example, use this CSS:
 
 .js #part-2 { display: none; } /* hide if JS is enabled */
 
 Apologies if I misunderstood. Your example code is beyond my
 comprehension this early morning... :(
 -- 
 Cordially,
 David
 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] IE7 page load issue, can it be prevented?

2011-06-13 Thread tee
Some pages of the site loads very slow in IE7 (about 15 seconds), and while the 
page was loading and (I assume) IE7 was still parsing the scripts, all the 
hidden elements shown through. I wander if there is a way to prevent this.

https://picasaweb.google.com/weblist99/Jun132011?authkey=Gv1sRgCKrj4sKyz-33-gEfeat=directlink

In other advance browsers, the tab section in the same page has similar issue 
if a user has been browsing the site for a while, and has generated a number of 
dynamic data, I fixed this by adding display none to the hidden box directly in 
html when client refused to accept it's a normal behavior due to the connection 
at his end, but this dirty trick doesn't work for IE7.

All these are controlled by JS show/hide, the hidden box has a overflow 
declared to prevent the hidden box show through during the loading.

Thanks!

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] Bad value group for attribute rel on element a: Keyword group is not registered.

2011-06-12 Thread tee
Can one explains it. 

I have this markup which the rel=group is for a js gallery so that the popup 
images can be viewed as continuously image gallery.

lia href=certification/USDA.jpg rel=group class=cert title=USDA 
certificationUSDA certification/a (NO. A-2007-00252_1 / 2010-03564)/li

lia href=certification/EU.jpg rel=group class=cert title=EU 
certificationEU certification/a (NO. A-2007-00252_1 / 2010-03563)/li

doctype is HTML5. Does it the error meant I can only use rel=group  once only?

•  Line 689, Column 120: Bad value group for attribute rel on element a: 
Keyword group is not registered.
…n/USDA.jpg title=USDA certificationUSDA certification/a (NO. A-2007-0025…
Syntax of link type valid for a and area:
A whitespace-separated list of link types listed as allowed on a and area 
in the HTML specification or listed as an allowed on a and area on the 
Microformats wiki without duplicate keywords in the list. You can register link 
types on the Microformats wiki yourself.


Thanks!

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Bad value group for attribute rel on element a: Keyword group is not registered.

2011-06-12 Thread tee
 
On Jun 12, 2011, at 9:32 PM, Hayden O'Sullivan wrote:

 Only the rel types listed in the html5 specification will validate. I don't 
 think group is in that list.

group is the name I used for the rel attribute. 

Never mind, found the issue, it was caused by different encoding for   (from 
the copy editor). 
tee





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] tackling bg image in iPad portrait view - total disater!

2011-06-03 Thread tee
In the examples below, the page uses a 1500px wide background image, and it has 
this structure to make the visual render properly.

  div id=sitewrap  --100% width with repeated bg imgage
   div id=container-wrap --100% width with bg-hdr-1500.jpg
 div id=container -- width:1014px

I need to keep the zoom feature enabled for iPad device, and ideally I want to 
target the portrait view only (with the condition that no futher treatment is 
needed for landscape view)

1.  With no viewport nor media queries, the #container-wrap bg image got 
cut off in both landscape and portrait.
http://jsbin.com/aholi4/



2.  With viewport which includes a media queries for portrait, the 
landscape view renders correctly (no media queries )
meta content=width=device-width; initial-scale=1.0; name=viewport
http://jsbin.com/apeti4/10/

I serve a 768px wide background for portrait view but it's not working 
correctly, the bg image shows up fine but not the page's layout, the page 
doesn't scale down like #1, furthermore, desktop safari is picking up this 
queries.
@media all and (orientation:portrait) {
#container-wrap{width:100%;text-align: left;background:transparent 
url(bg-hdr-768.jpg) no-repeat center top;}
 #container, .quick-access-wrap{width:99%}
 #content, #footer, {width:100%}
}


3. Same as above except desktop Safari.
@media only screen and (device-width: 768px) 
http://jsbin.com/iziqi3
@media only screen and (device-width: 768px) {
  #container-wrap{width:100%;text-align: left;background:transparent 
url(bg-hdr-768.jpg) no-repeat center top;}
 #container, .quick-access-wrap{width:99%}
 #content, #footer, {width:100%}
}


4. background-size treatment 

with 100% auto; it shrinks (to 50% of original size I think) and with 
100%100%; it double the size (no screen catcher example for this).  
Cackground-size treatment affects both landscape and portrait.
http://jsbin.com/uworu3/


!-- bacgkround image ( bg-hdr-1500.jpg) loads from the desktop style --

#container-wrap{
width:100%;background-position: center top;
 -webkit-background-size:100% auto;
 -moz-background-size:100% auto;
 -o-background-size:100% auto;}

Thanks!

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Qt WebKit?

2011-05-24 Thread tee
Thank you. 
Still not 100% sure if it's a compliant mobile browser that can display normal 
website without stupid Nokia codes.

tee

On May 23, 2011, at 3:12 AM, Henrik Madsen wrote:

 
 Here's a video: http://www.youtube.com/watch?v=9hv-oouXsPc
 
 
 
 
 Henrik Madsen
 +61 08 9387 1250
 hen...@igenerator.com.au
 www.igenerator.com.au
 
 On 23/05/2011, at 5:58 PM, tee wrote:
 
 I received an enquiry wanting to find out if a site I built for Mobile 
 devices works with Qt WebKit. Never heard of this but from the name I 
 gathered it's something to do with browser using webkit engine, for advanced 
 Nokia touchscreen phones perhaps. 
 
 http://qt.nokia.com/products/library/qtwebkit
 
 I can't tell it's a nokia web browser or a framework, or both. 
 
 Thought?
 
 Thanks!
 
 tee



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


[WSG] Qt WebKit?

2011-05-23 Thread tee
I received an enquiry wanting to find out if a site I built for Mobile devices 
works with Qt WebKit. Never heard of this but from the name I gathered it's 
something to do with browser using webkit engine, for advanced Nokia 
touchscreen phones perhaps. 

http://qt.nokia.com/products/library/qtwebkit

I can't tell it's a nokia web browser or a framework, or both. 

Thought?

Thanks!

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] pop up windows and Google

2011-05-12 Thread tee
A simple back link should work, if the popup can be accessed in every page, 
maybe you need to link to home, if not, link to the page where the popup link 
shows.

IMHO, you may want to re-evaluate the technicality of the popup. If the 
certain types of information belong to a section of a page, you can still use 
popup, but make sure that when JS turns off, the certain types of information 
is treated as part of the page, not a link that pulls a page of content  via 
Ajax fetch (and I assume that is what you used); you can achieve this by using 
combination of simple show/hide and absolute positioning for the popup div, 
this way, there will be no issue with google search result.

tee

On May 12, 2011, at 2:14 AM, Bob Schwartz wrote:

 I have several sites where i use pop-up windows to present certain types of 
 information.
 
 When someone does a Google search sometimes Google lists results from these 
 pop-up pages.
 
 When the searcher clicks on the Google result he gets the pop-up window as a 
 stand-alone page in his browser with no links to anywhere on the actual site.
 
 Savvy people would just delete the part after the domain in the url bar, hit 
 enter and be at the site, but I'm discovering not all are savvy.
 
 So, is anyone aware of any clever javascript that would detect if the page 
 had not been opened as a pop-up and write a link to the actual site (and not 
 write the link if opened as a pop-up)?
 Or, any other suggestion (besides don't use pop-ups)?
 
 Thank you,
 
 Bob Schwartz
 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] Can I have a Safari check?

2011-05-09 Thread tee
http://208.43.169.106/m151/index.php/patterns.html

Add the product to cart. What do you see after that? An enable cookies page? A 
empty cart page or a product has successfully added to cart?

Please provide your Safari version. On my machine, it's v5.0.5 (6533.21.1) and 
I am getting an empty cart page (when cookies was empty I got a enable cookies 
page), however in iPod and iPad,  everything works.


Strange thing is it's only happening in this site and I am kinda suspecting 
it's something to do with ip address because the domain has not pointed to the 
server yet, but it doesn't really make sense.

Thanks!

tee



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Can I have a Safari check?

2011-05-09 Thread tee
 

On May 9, 2011, at 1:47 PM, Hassan Schroeder wrote:
 
 
 I just get the enable cookies page - Version 5.0.5 (6533.21.1) on
 OS X 10.6.7. Going back to the add product page and resubmitting
 doesn't change that, though I can see there *is* a cookie set from
 the domain/IP in question.
 


Thank you both! This helps!

I dug it further and found the cause. The application has a session cookie 
management, and you can set how it's being handled. The default is use HTTP 
only, it looks like the Safari v5.0.5 has issue with this when a domain is not 
pointed to the server. 


tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Can I have a Safari check?

2011-05-09 Thread tee
Carl,

Thanks for checking! The issue had been solved so I deleted the site - it was a 
test site. 

tee
On May 9, 2011, at 8:39 PM, Carl Heaton wrote:

 Tee,
 
 Well I am getting a 404 off the bat with WIn7 Chrome.
 
 C


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] a more cross-browser consistent box shadow effect?

2011-05-09 Thread tee
Please go to this site and choose the box shadow, 
http://css3generator.com/

In IE9, no shadow for the left/top but right/bottom only

#container {-webkit-box-shadow: 0 0 3px #ccc;
-moz-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;}

My test shows that 0 0 6px is the closer I can get to make left/top  show in 
IE9, problem is, this will not work so well for Opera for the result I wanted. 

And a near future problem: I was hoping maybe in 6 months time it'll be safe to 
drop the vendor prefixes for a number of CSS3 elements including box-shadow. 
Should I do so I can never get the closer result across browsers. Am I right 
that if the vendor prefixes existed, browsers that can handle CSS3 native will 
still treat their prefixes?

Thanks!

tee





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Desktop. Tablet. Mobile.

2011-05-06 Thread tee
lol,  for many iwe designersi, if a website without a slideshow (do you 
like the lightbox or fancybox or shadowbox?), a carousel (should it go with 
original, coda or slider sir?), a dropdown menu (do yo need mega?), an 
Accordion, a Tabs, gradients, drop-shadow elements  (CSS or image flavor sir?), 
a fancy hover/toggle/click animation, a website is not a website, it's merely a 
document sits on a webpage.

Oh do you want it HTML5? That will be 20% extra fee sir. ( the iwe 
designeri does is change the doctype).

tee 
On May 5, 2011, at 11:55 PM, Birendra wrote:

 Hi Stuart
  
 You are right on one point that heavy graphics make the site slower… but you 
 can use a gradient to give a life in the site… and for the gradient you don’t 
 need to use the images… this will be done by the css techniques… now as per 
 my knowledge mobile and ipad device support the new css techniques..
  
 My only concern is that the site doesn’t has any life… normally user like 
 those site which had a good graphics or gradient…
  
 I hope you understand my point of the site designing.
  
 As I check the site in the iphone it’s looks ok I can’t say it’s look good 
 are very good… something like the site will work without any error or 
 disturbing the design… but now a days it’s not only important… user need a 
 site with brilliant color scheme or graphics so they are attracted to surf it.
  
 Regards
 Birendra
  



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


Re: [WSG] Today's Google home page (1 May)

2011-05-01 Thread tee
 
On Apr 30, 2011, at 7:24 AM, Grant Bailey wrote:

 Hello everyone,
 
 Today's Google home page ('160th Anniversary of First World's Fair') has a 
 graphic that provides a 'magnifying glass' when you hover over it.
 
 It's very impressive and I'm wondering what technologies Google has used to 
 render the magnification feature. Does anyone know? SVG, Flash, etc.?
 
 Also: does the technology satisfy web usability guidelines?
 
 I would be grateful for any responses.
 
 Thank you and kind regards,
 
 Grant Bailey


Look likes a very clever simple hover effect with combination of absolute 
positioning to me. Maybe with canvas too. 

http://www.google.com/logos/2011/worldsfair11-hr.jpg
http://www.google.com/logos/2011/worldsfair11-hp-3.gif


It has a webkit animation fading and easing effect :)

div id=hplogodiv id=loupediv class=loupe-canvas 
id=loupe-canvas-middivimg src=logos/2011/worldsfair11-hp-1.gif 
class=hplogocimg src=logos/2011/worldsfair11-hp-2.gif class=hplogodimg 
src=logos/2011/worldsfair11-hp-3.gif class=hplogofimg 
src=logos/2011/worldsfair11-hp-4.gif class=hplogosimg 
src=logos/2011/worldsfair11-hr.jpg class=hplogoh/div/divdiv 
class=loupe-canvas id=loupe-canvas-topdivimg 
src=logos/2011/worldsfair11-hp-1.gif class=hplogocimg 
src=logos/2011/worldsfair11-hp-2.gif class=hplogodimg 
src=logos/2011/worldsfair11-hp-3.gif class=hplogofimg 
src=logos/2011/worldsfair11-hp-4.gif class=hplogosimg 
src=logos/2011/worldsfair11-hr.jpg class=hplogoh/div/divdiv 
class=loupe-canvas id=loupe-canvas-bottomdivimg 
src=logos/2011/worldsfair11-hp-1.gif class=hplogocimg 
src=logos/2011/worldsfair11-hp-2.gif class=hplogodimg 
src=logos/2011/worldsfair11-hp-3.gif class=hplogofimg 
src=logos/2011/worldsfair11-hp-4.gif class=hplogosimg 
src=logos/2011/worldsfair11-hr.jpg class=hplogoh/div/divimg 
src=logos/2011/worldsfair11-hp.png 
style=height:200px;left:0;position:absolute;top:0;width:200px;z-index:6000/divdiv
 id=hplogot160th Anniversary of the First World#39;s Fair/div/div

 Also: does the technology satisfy web usability guidelines?

Code wise it seems so. IMHO, it's  a presentational setup, therefore lack of 
accessibility implementation doesn't seem to pose an issue.

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] RE: The pop-up wont resize the window if it overflows the page height under IE !

2011-04-07 Thread tee
Can't make sense of it based on the codes you posted. I think you will have a 
better luck if you can copy the page's source codes and make it to a html page 
with CSS and Javascript linked, then post the link here.

tee

On Apr 7, 2011, at 1:48 AM, Rateb BEN MOUSSA wrote:

 Hello all,
 
 
 Sorry for the inconvenience, yesterday I've sent a mail with attached
 pictures, I was wondering if anyone on this distribution can help me
 to make a popup behave under IE the same as in FF.
 
 The application is in an intranet, so I can't give you a direct link,
 but as shown in the below pictures, when I pass the mouse over the
 link, in FF I see the right scroll bar (get longer) but in IE nothing
 change even if the popup overflow the height of the the page.
 
 Snapshot FF 3.6.16:
 http://i56.tinypic.com/6f032g.jpg
 
 Snapshot IE 8.0
 http://i51.tinypic.com/spx5vk.png
 
 
 The CSS:
 -
 a.info {
 font-weight:normal; position:relative; text-decoration:none;
 }
 a:hover.info {
 background:none; text-decoration:none; z-index:10;
 }
 a.info span {
 display:none;
 }
 a:hover.info span {
 background:#FADD7F; border:1px solid #00629F; color:#66;
 display:inline; font-size:80%; font-weight:normal; left:20px;
 line-height:12px; padding:2px 4px; position:absolute; text-align:left;
 top:20px; width:150px; z-index:99;
 }
 a.info_large {
 position:relative; text-decoration:none;
 }
 a:hover.info_large {
 background:none; text-decoration:none; z-index:10;
 }
 a.info_large span {
 display:none;
 }
 a:hover.info_large span {
 background:#FADD7F; border:1px solid #00629F; color:#66;
 display:inline; font-size:80%; font-weight:normal; left:20px;
 line-height:12px; padding:2px 4px; position:absolute; text-align:left;
 top:20px; z-index:99;
 }
 
 
 The HTML:
 -
 td nowrap=nowrap class=tailleListea class=info_large
 href=../odm/odm_management.php?odm_id=20358932035893 img
 border=0 src=../images/infos.gifspan23/03/2011 (Stéphane
 Schneider) : qsdbr
 qsdbr
 qsdbr
 qsbr
 dbr
 qsdbr
 qsbr
 dbr
 qsdbr
 qsbr
 dqsbr
 dbr
 qsdbr
 qsdbr
 br
 qsdbr
 qsdbr
 qsd/span/a/td
 
 
 Any idea about how to figure out with this problem, how to fix the
 render of this page to become the same under IE/FF.
 
 PS: Look at the circle and the distance between the scroll bar and the
 bottom of the page.
 
 
 --
 Cordialement / Regards
 
 
 --
 Rateb BEN MOUSSA
 Développeur/Référent technique PHP5
  | URL : www.itipart.com
  | Mob : +216 22 84 70 72
  | Skype : rateb.alpha
  | tn.linkedin.com/in/RatebBENMOUSSA
  | Linux user #486726
 
 
 ***
 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] RE: The pop-up wont resize the window if it overflows the page height under IE !

2011-04-07 Thread tee
Can't see it in IE7 XP and IE8 using compatible mode from IE9 in Windows 7.

Everything appears correct. My guess is, your screen is shorter in height, and 
IE (or just IE8? You didn't mention IE7 and IE9) doesn't count the height from 
a hover thus no horizontal scrollbar.

If the layout doesn't use frame this shouldn't be a problem as the left column 
has enough room in  height to accommodate the content area's height. The easier 
way may be adding some 200 or 300 padding bottom for the content's div using 
conditional comment - but I don't see there is a div wrapper for content area. 
Maybe you can add margin-bottom for table, or add a div as a wrapper of table, 
and add padding-bottom for it.


tee

On Apr 7, 2011, at 9:41 AM, Rateb BEN MOUSSA wrote:

 Here is the zipped page (including CSS and JS)
 
 http://db.tt/EntXQ8i
 
 
 Cordialement / Regards



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS challenge: make a li stays same bg color when cursor moves to its siblings

2011-04-06 Thread tee
 

 I tweaked the Javascript a bit and one line of CSS. I think this is what you 
 were trying to accomplish?http://jsbin.com/acori/16/


Many thanks! Yes it does.

 $('#nav li ul  li').hover(function() 

It never occurs to me to target hover class. I thought when cursor moves away 
from a li and move to its's siblings, the hover no longer applies to that li 
class but the sibling where the cursor points to.

tee




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] CSS challenge: make a li stays same bg color when cursor moves to its siblings

2011-04-05 Thread tee
I am trying to achieve this via jQuery by adding a class as I don't think it's 
possible with CSS (but maybe one of the CSS3 selectors can doit?). 

http://jsbin.com/acori/15/

The menu is generated by the CMS system so there is restriction to adding new 
class directly to a specific menu item. It's a 3 level menu but the flyout 
starts from second level (2nd level menu 3).

By default, the 1st level menu has a top-level class for anchor tag while 2nd 
and 3rd level don't have. What I want (and thought the easier way) to achieve 
is to target the top-level to find the 2nd level menu 3, so that I can add 
a current class for  2nd level menu 3, so that when flyout menu expanded, 
and when cursor moves to the third level, the 2nd level menu 3 has the same 
white background color as the hover does.

I have this code in which the last line is how I want to add the current 
class. 

 jQuery(#nav ulli).find(a.level-top  
li).parent(li).addClass(current)


Thanks!

tee





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] what is the exact version of FF 3.6 x prior to FF4?

2011-03-31 Thread tee
I upgraded to FF4 without checking the compatibility of the addons. 

Both YSlow and Page Speed aren't compatible, now I need to install the previous 
version that I used, but can't remember the exact version. There seems to be a 
number of 3.6.x.

This is for Mac. Thanks!

BTW, FF mobile is out.

tee



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] what is the exact version of FF 3.6 x prior to FF4?

2011-03-31 Thread tee
Thanks all!


On Mar 31, 2011, at 1:05 AM, Fabien BENARIAC wrote:
 
After upgrading to FF4, most addons worked -- until I restarted FF.
 I just have to re-install firebug... YSlow was ok after for me. btw, I think 
 a upgrade is usefull (I don't understand why you want to run FF3x modules 
 with FF4x...)
 
Sometimes I hate it when I asked a simple question and having to end up 
explaining the background story in details:)

I don't want to run FF3x addons with FF4x. I want to run a separate FF3x with 
addons that don't work for FF4 yet.

Some addons are not compatible with FF4x, which I have learned, because FF4 
uses 64bits whereas FF3x is 32bits.

 I upgraded FF4 the day it released, at that time, Firebug FF4 compatible 
showed an error (and the YSlow didn't work so I disabled both), WAVE Toolbar 
was not available until a couple days later (kudos to WebAIM people working 
fast, or I would had to ask the question few days earlier). Google Page Speed 
is still not compatible, from its page, there is a A week to a few weeks. In 
the meantime comment dated on Mar 22. Today is Mar 31.

It looks to me the developers at Google didn't even bother to test the 
extension with FF4 beta, and thought it could just work. just fine.
When it didn't and people reported it, they ignored for months.

http://code.google.com/p/page-speed/issues/detail?id=453

YSlow, just checked again.  Seems to have bug that caught me off guard, the Run 
Test button is not clickable.

I nee the Page Speed because my client use it for site test. It has released 
the extension under  Experimental Extension API I learned yesterday when I was 
desperate to make the Page Speed works. After trying it, I find I rather stay 
with the FF's version thus my question for previous FF.


tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] possible to make DT and DD behave like TH and TD column visually?

2011-03-31 Thread tee
http://jsbin.com/emiye5/4/

The DD and DT are floated, when a DD has more content, the next set can't 
stayed align horizontally. 

P/s. I only use DL because LI doesn't make sense here and I can't get the 
visual result I wanted. 

#data-attribute {width:700px;background:#f9f9f9;overflow:hidden;}
#data-attribute dt{font-weight:bold;width:15%;}
  #data-attribute dd{width:85%;clear:right}
 #data-attribute dt, #data-attribute dd {float:left;padding:5px 0;margin:0;
border-bottom:1px solid #ddd;}


BTW, can one confirms if clear:right ever work or it only works with certain 
combination? I have clear:right in the dd and it's not helping. Actually I 
never able to get clear right work.
Thanks!

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] what could be the cause that Safari can't load a page?

2011-03-31 Thread tee
I know that in the pre v2, Safari had this problem with sites that use JS. But 
I rarely see any for a very long time.

These days I have seen quite a numbers, the problem are not always the same but 
it's always the Safari, these days the page simply couldn't load, then freeze, 
and I am forced to quit the browser. From Firefox developer tool, I can't find 
suspicious error though. 

Could it be possible that Safari has security flaw that is exploited by very 
cleaver hacker? Something like Google services got hacker and the hackers made 
it like it was Google server problem?

My Safari version is 5.0.4 (6533.20.27)

http://bit.ly/eKE1He  (safe to click - I made the shorten url myself, but if 
you rather not clicking it, that's ok. The link goes to a blogger's site). 

Thanks!

tee

***
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?

2011-03-31 Thread tee
 
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
***



Re: [WSG] what could be the cause that Safari can't load a page?

2011-03-31 Thread tee

 
 The load is continuous.
 OS X 10.4
 Safari/4.1.3
 Had to force quit on video error.
 Check markup:
 http://html5.validator.nu/
 
 ~d

Thanks. 

The first video link on the right column?

tee



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] question about screen reader behavior when pulling in content via Ajax fetch

2011-03-27 Thread tee
Thank you all for the feedback!

Steve's one is most assuring. One page uses quirks mode should be OK if it 
doesn't cause issue to Screen Reader.


tee


On Mar 27, 2011, at 6:01 AM, Steve Faulkner wrote:

 hi tee
 
 which the page has no dtd, body and html tags?
 
 if it renders in the browser the lack of thes above should not effect
 screen readers.
 
 note if you have a html file consisting solely of:
 
 Ppoot/P
 
 the DOM  constructed by the browser looks like this:
 
 HTML
 HEAD/HEAD
 BODY
 Ppoot/P
 /BODY
 /HTML
 
 what you will probably find is that because you have no doctype the
 page will be rnedered using quirks mode in browsers.
 
 regards
 
 Stevef


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] question about screen reader behavior when pulling in content via Ajax fetch

2011-03-26 Thread tee
I have a small login  popup box, and is using Ajax fetch to pull in the login 
page. Due to the way the system works, the login page default is to use a page 
template instead of just the chunk of login code placed in a header or 
left/right column, though can be done too but  my view is that the login code 
shouldn't be in every page since it's to be showed in a modal window so I want 
it retrieves via Ajax. 

I created a template, strip out dtd, body and all other areas except  the code 
that retrieves the content area (where it will then load the login code 
template), this all works well.  My concern is, will it be any problem for 
screen reader read the  login page's info, enter email which the page has no 
dtd, body and html tags?

Thanks!

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] is this infection of Safari or FB page?

2011-03-16 Thread tee
Sorry about this post! I couldn't get any answer from anyone, any Mac user from 
the web community that I know of, and my enquiry to Apple as well as Facebook 
went silence too.

For those who have no Mac system, these are the videos I captured.
http://www.youtube.com/watch?v=lwZxjqlUM2Y 
http://www.youtube.com/watch?v=cn6yFCROa-4
http://www.youtube.com/watch?v=mVwoIF8BHMw

Warning! If you think your Mac system may get infected, please don't click on 
the links below. There are just two examples, there are many more pages like 
these related to sensitive info that CCP tries to block.

http://www.facebook.com/pages/POKE%E6%AA%A2%E8%88%89%E5%B0%81%E9%8E%96%E4%BA%94%E6%AF%9B%E5%A4%A7%E8%A1%8C%E5%8B%95FB/131841410222482

http://www.facebook.com/pages/%E8%BE%BE%E8%B5%96%E5%96%87%E5%98%9B/105635379469836

Background story (and one I strong suspecting):  it's the work of Chinese 
hackers hired by the CCP. There is another thing that you web developers should 
know too (and if you can, please spread the news), the Chinese Jasmine 
Revolution founders are all using iPad (very unwise of them to say it 
publicly), and the recent crackdown have been  targeting iPad user in a 
specific city/ 
Province. If you know how crazy this regime is to try to hold on the power, you 
would believe that billions of RMB likely have been gathered to develop viruses 
specifically targeting Mac, iPad and iPhone.


tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] is this infection of Safari or FB page?

2011-03-16 Thread tee
 
On Mar 16, 2011, at 4:36 AM, Joseph Ortenzi wrote:

 Not only off topic, it also appears to be giving us a link to something 
 dangerous (I disabled it, BTW).
 

Well, strictly speaking, it's not.  If you build websites and need to perform 
browser check, and you need to check on Safari,  it's  unwise not to be aware 
of such issue, which I am pretty sure, nobody in the English speaking world 
aware of.

As for dangerous, I am not fully sure about it, my warning is more a this is 
a porn site kind of warning IMHO. You can see from the youtube videos links of 
the behavior of infection to tell whether it's dangerous or not. I have 
visited ten of pages of such Facebook pages in the past few months, and symptom 
occurs in Safari only, in My Mac, iPad and iPhone Safari. I have run a system 
wide virus check on my Mac, unless the software is incapable of finding any 
thing or there is no infection.

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] html5 and iframes?

2011-03-10 Thread tee
 
On Mar 10, 2011, at 1:52 AM, designer wrote:

 
 - Original Message - From: Birendra biren...@viteb.com
 To: wsg@webstandardsgroup.org
 Sent: Thursday, March 10, 2011 4:58 AM
 Subject: RE: [SPAM] Re: [SPAM] [WSG] html5 and iframes?
 
 
 
 Hey Bob
 
 Here is the your site code use this. It's work fine in my system.
 
 Site code
 
 
 Thanks v.much Birenda, but, if you validate the page, you'll see this :
 
 Line 102, Column 51: The frameborder attribute on the iframe element is 
 obsolete. Use CSS instead.
 olorscheme=lightamp; frameborder=0 width=600 

Bob, I wouldn't worry about the validation error. If you want the error goes 
away, don't use HTML5. Obsolete doesn't mean browser can't parse it. 

If you don't want to drive yourself crazy, just move on :)

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?

2011-03-10 Thread tee
 
On Mar 6, 2011, at 4:52 PM, Rob Crowther wrote:

 On 06/03/11 20:22, tee wrote:
 but I can never get h2:first-child works
 
 Here's an example, specifically using h2 elements since you mentioned them:
 
 http://www.boogdesign.com/examples/css3/first-child.html
 
 By default, every element has a blue border, but any element which is a 
 :first-child has a red border:
 
 :first-child {
border: 1px solid red;
 }
 
 In addition, h2 elements which are children of #content and first-child 
 within their parent have white text on a black background:
 
 #content h2:first-child {
color: #fff;
background: #000;
 }

Indeed. I'd just got a chance to check one of the sites that the h2 is used for 
accordion title and still doesn't work. But if I bring it to JSBin without 
other code, it works. So something must be conflicting with it.

Thanks!

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] why :first-child pseudo-class doesn't work for some selectors/elements?

2011-03-06 Thread tee
http://jsbin.com/apate4/9/

  dt, dd { border-top:1px solid #555;float:left }
  dt:first-child {border-top:0}
dd:first-child {border-top:0}
  h2, p {background:#ddd;padding:15px;margin:5px}
  h2:first-child,p:first-child  {background:#95B26B} p/s. I tried declared the 
two individually as I thought maybe they can't be grouped, but it makes no 
differences.

According to the spec, it should work.
The :first-child pseudo-class represents an element that is the first child of 
some other element.
http://www.w3.org/TR/css3-selectors/#first-child-pseudo

Assigning a class to the element is of no help.


tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?

2011-03-06 Thread tee
 I see! 

In the entire time I thought this applies to any first child of p, and so are 
for the first h2 and first dd in any give page if first-child is declared.

p:first-child

p The last P before the note./p
div class=note
   h2 Note /h2
   p The first P inside the note./p
/div


How embarrassing!  I'd been using first-child for over a year, probably much 
longer mostly for li, but only recently started using it for heading and dd, 
and  I found it doesn't work.

Thank you!

tee

On Mar 6, 2011, at 2:34 AM, David Dorward wrote:

 Because those elements are not the first child element in their respective 
 containers.
 
 
 On 6 Mar 2011, at 10:03, tee wrote:
 
 http://jsbin.com/apate4/9/
 
 dt, dd { border-top:1px solid #555;float:left }
 dt:first-child {border-top:0}
   dd:first-child {border-top:0}
 
 !-- Container -- dl 
 !-- 1st Child --   dttest/dt
 !-- 2nd Child --   ddThere should be no border top here/dd 
 
 Since the dd is not the first child, a selector using :first-child won't 
 apply.
 
 
 h2, p {background:#ddd;padding:15px;margin:5px}
 h2:first-child,p:first-child  {background:#95B26B} p/s. I tried declared the 
 two individually as I thought maybe they can't be grouped, but it makes no 
 differences.
 
 !-- Container -- body 
 !-- 1st Child --   dl ... /dl
 !-- 2nd Child --   h2Heading 2 this is the first-child and the bg color 
 should be in Olive./h2 
 
 Ditto.
 
 -- 
 David Dorward
 http://dorward.me.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?

2011-03-06 Thread tee
The example below is something I constantly seeing, should have gone testing it 
again making sure my memory is still fresh, but I am a bit lazy right now as I 
haven't had my coffee yet.

The :first-child pseudo-class represents an element that is the first child of 
some other element..

I have often used li:first-child or li a:first child in different section of a 
page, why is that I can get the first-child in, say,

#hdr li:first-child
.sidebox li:first-child (and it applies to all sidebox sections)

.sidebox li ol:first-child, #content h2:first-child

In a typical 2 columns layout,  in content area, there are a number of h2 in 
different sections and there is no first-child declared but h2, but I can never 
get h2:first-child works yet #hdr li:first-child and .sidebox li:first-child  
work. This is still a bit confusing, is that means #hdr li:first-child (which 
is not wrapped inside #content) considers the first child of some other element 
for the entire page? If yes, why is that the .sidebox li ol:first-child and 
.sidebox li:first-child still work?



tee





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] http://ie6countdown.com/

2011-03-04 Thread tee
http://ie6countdown.com/

In some countries, the usages are disturbingly high. I wonder how the stats are 
collected and how accurate it is.

24.8% from South Korea is quite shocking as internet and IT communication 
technology is very advanced. 

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] screen reader friendly and keyboard accessible popup?

2011-02-26 Thread tee
 
On Feb 24, 2011, at 9:57 PM, Thierry Koblentz wrote:
 
 
 If you use anything other than buttons or links make sure to use tabindex=0
 to make your elements focusable via keyboard, and attached role=button to
 it.
 
 As a side note, the challenge with collapsing panels is to let users
 open/close panels, but at the same time make all focusable items in the
 hidden panels non focusable, or simply remove the panels via display:none.
 The challenge is to expose content to SE, but at the same time allow keybord
 users to navigate the documents without having to go through everything
 focusable item in the document (in all panels, collapsed or not). If we
 implement collapsible panels in the first place it is to minimize content
 overload - so imho it should be the same for all users.
 

Thanks for the reminder!

tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



  1   2   3   4   5   6   7   >