Re: [WSG] which tag to use for link to reference?
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?
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?
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
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
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
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
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
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
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
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
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?
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?
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?
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?
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?
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?
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?
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
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
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
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
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
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
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
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
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
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
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
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
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
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?
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
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?
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
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?
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
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?
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
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
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
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
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
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
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
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
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?
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?
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?
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?
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?
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?
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
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
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?
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?
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?
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] border doesn't work when -ms-filter (gradient) is used
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
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
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
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?
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?
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
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?
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?
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.
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.
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!
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?
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?
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
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?
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?
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?
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?
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.
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)
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 !
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 !
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
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
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?
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?
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?
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?
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?
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?
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
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] is this infection of Safari or FB page?
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?
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?
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?
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
***
Re: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?
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?
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 ***
Re: [WSG] screen reader friendly and keyboard accessible popup?
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 ***
Re: [WSG] screen reader friendly and keyboard accessible popup?
On Feb 25, 2011, at 2:21 PM, Andrew Boyd wrote: Jamie, this just proves to me that nobody really likes Lorem ipsum... :) I used to use the first paragraph of Italo Calvino's If on a Winter's Night a Traveler for such purpose. Someone wrote me off list (not from this list) gently warned me I violated both the Italian writer and English translator copyrights, and suggested I should use Lorem ipsum :---) 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?
Thierry, Thanks for the suggestion! It got me think of a few things. Structurally and semantically, do you find a distinctive difference between Modal and Collapsible? I wanted to make sure I am on the right track; when I think of the use of Modal Window, I think of a block of content that is not part of the main content in a given page, e.g. a Ajax fetch, an image gallery (which makes use of the herf link to pull the larger image), a dialog box, a content in the aside element. The choice of the Modal Window, is not so much of a UI/Design choice but the integrity of content structure and that it does not obscured the flow of the content when AT is used, so making sure the focus brought back to the original trigger is something that needs to deal with - a Modal script I use, doesn't offered this feature, it jumps back to the first link. With Collapsible, it's largely a UI/Design choice, structurally, the content in it is part of the main content, it's just a simple show/hide that makes good use of space, and apart from button that you recommended, a heading can be served as a trigger too depending on the content (for the site I was working, in a few pages heading is more appropriate, as in other pages , button is indeed better than p tag). With Collapsible, we don't normally provide a close button. What I was trying to do with this pop up, is a simple modified version of Collapsible (show/hide) that the Collapsible's container uses absolute positioning, thus a close button is provided, and when closed, it will goes back, not to the original trigger but the link after the trigger. I do not see any issue about with this, but would love to hear how you guys think about it. Lastly, I guess there isn't any benefit to use ARIA role just for this pop up when the entire site is not made for it (it's not a simple WordPress blog that consists of a handful of template files but eCommerce site with hundred of template files and it will be an enormous task. I am however have been slowly building a HTML5 theme with ARIA support for it from scratch, but it likely won't be finished until next year as I feel there is so much needed to know about the proper use of ARIA). tee On Feb 23, 2011, at 9:33 AM, Thierry Koblentz wrote: Hi Tee, Please take a look at this example. The first example is keyboard accessible however I am also concern with the empty link that may create extra noise for screen reader, e.g if every single page has a popup, it will have two empty links, one is the popup trigger and the other the close link. Sure it's just two empty links, as I started using VoiceOver more frequent to test the sites, I find the two links quite annoying. http://jsbin.com/efimu5 I'd use buttons instead of links, or I'd add role=button to the links. I'd also add role=alertdialog to the modal, making sure that the focus goes to the close button/link within the modal and also making sure that when the user closes the modal, focus is brought back to the original trigger. See: http://www.w3.org/TR/wai-aria/roles *** 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?
On Feb 24, 2011, at 2:19 AM, tee wrote: making sure the focus brought back to the original trigger is something that needs to deal with - a Modal script I use, doesn't offered this feature, it jumps back to the first link. Maybe not! http://jsbin.com/awidi4 But the browsers behave differently so I am not sure if it's a script issue or the browsers - using the tab navigation, the close button seems getting in the way also. Firefox appears to be getting right - tab through the gallery or escape it halfway (by pressing the escape key) and/or without using arrow key to navigation the gallery in the Modal window, it's being brought to the next link from the link where you escaped, whereas Webkit goes back to the first link if arrow key has not been used. For Ajax fetch, it's the same but because there is no focus for Google site it's difficult to tell which is the last link. Not sure if it's iFrame, I am not able to escape halfway within the Google page. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] screen reader friendly and keyboard accessible popup?
Please take a look at this example. The first example is keyboard accessible however I am also concern with the empty link that may create extra noise for screen reader, e.g if every single page has a popup, it will have two empty links, one is the popup trigger and the other the close link. Sure it's just two empty links, as I started using VoiceOver more frequent to test the sites, I find the two links quite annoying. http://jsbin.com/efimu5 Is there a much better approach that works great for both keyboard and screen reader user? Was looking up the keypress and focus events, but not certain they are good for such function. Thanks! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
