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 ) 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: > > http://www.idpf.org/2007/ops";> >… > … 1 … >… > >… > >… > > > [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 ***
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 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 ? > > 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 ***
[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] 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, wrote > > > From: tee > 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 > 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 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 ***
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 > > -- *** 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-OttQk&feature=youtu.be Tee On Apr 2, 2012, at 10:24 PM, Matthew Pennell wrote: > On Mon, Apr 2, 2012 at 11:22 PM, tee 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 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 ***
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 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 ***
[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] 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" 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 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 ***
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? >> >> >> >> >> >> p/s. I know I can do something like below but for layout/design >> consideration, this may not be the best approach sometimes. >> >> >> >> >> >> >> >> >> 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 ***
[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? p/s. I know I can do something like below but for layout/design consideration, this may not be the best approach sometimes. 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] 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 will allways have an empty space after it, because image /> is always displayed as display:inline + if link 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 /> or link > 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 ***
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 [ ] 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] 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] 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 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 ***
[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] 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] 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
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
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 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 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 ***
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] 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 ***
[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} all elements outside the frame go here 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 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.01&lac=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 >
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 ***
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
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 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 ***
[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] 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?
> > > 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] 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 ***
[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
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 ***
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] 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] 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 > Please !! > WSG !! > NEVER AGAIN ! > > 2011/8/12 Marvin Hunkin > 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 ***
[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] 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 ***
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 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 . 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 ***
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] 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] 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] 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] Modal forms - what to call them?
On Jul 21, 2011, at 3:18 AM, Stevio wrote: >> > > To the contrary, I think you strengthen my argument by highlighting the > differences. There are advantages to both the modal and non-modal facebook > implementation of images, and different users may prefer one over the other, > which is the point I was trying to make. It is not a perfect illustration of > what I am looking to do and I did not claim it was, so please do not over > examine the comparison. > > If a user choice is clear and makes sense, and is not confusing, then why not > give them that choice? My original intention was not to offer both choices > but I have come to realise as I have developed the system, that if both > options are implemented, then why not allow users to choose. They may prefer > to be working on a page that is non-modal and they can click on links like > home and have more workspace, or they may prefer to use a modal form to > quickly add a record. Let's not write off an idea just because it isn't the > way it's normally done. > > Thank you for your thoughts. Less is more really! Giving your user both choices just because they are both implemented isn't necessary a good choice. Overly consideration is bad consideration. You mentioned it's a CMS, so if there is a user account (e.g. admin area), why not create an option in the admin to allow your user to choose either one if you want to be considerate? Putting both choices on the front-end at all times is a bad choice, never mind your good intention. If there is no admin and you really must have it, perhaps use cookies to control the options, the first time a user visits the site, present both choices with an option for your user to choose one option, and please never bug your user who has already made the choice again unless he/she empties the cookies or switch computer or browsers. A well-designed site that take care of good interface and usability won't make user sometimes want to use this and sometimes prefer to use that. Facebook has the worse UI I ever seen: what kind of rude developer/web designer use [x] for delete, edit and post options and make it only hover? Every time I think about this I cringe. 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 element is optional and can appear before or after the > content within the . Only one element may be nested > within a , although the element itself may contain multiple > other child elements (e.g., or )." > [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] html5 quest: figure
Can the figure element use for slideshow, e.g. description,,, description,,, description,,, Or maybe the question should be , can a single figure contains many figcaption? And use it for slidershow's markup. description,,, description,,, description,,, 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 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 ***
[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] 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] 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 ***
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 ***
[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?
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 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-gE&feat=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 ***
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-gE&feat=directlink > [...] >>> >>> >>>> > Here's what works for me. I include this code in the of the document: >>> >>> >> type="text/javascript"> document.documentElement.className='js'; >>> >>> >>> 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?
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-gE&feat=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 element - that does not work if > scripts are blocked by a firewall. > > Here's what works for me. I include this code in the of the document: > > > >document.documentElement.className='js'; > > > 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-gE&feat=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 ***
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] 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. USDA certification (NO. A-2007-00252_1 / 2010-03564) EU certification (NO. A-2007-00252_1 / 2010-03563) 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 certification">USDA certification (NO. A-2007-0025… Syntax of link type valid for and : A whitespace-separated list of link types listed as allowed on and in the HTML specification or listed as an allowed on and 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 ***
[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. <--100% width with repeated bg imgage <--100% width with bg-hdr-1500.jpg <-- 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 ) 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/ #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] 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] 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 ***
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 ***
[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] Desktop. Tablet. Mobile.
lol, for many we designers, 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 we designer 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 :) 160th Anniversary of the First World's Fair > 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 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] 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: > - > href="../odm/odm_management.php?odm_id=2035893">2035893 border="0" src="../images/infos.gif">23/03/2011 (Stéphane > Schneider) : qsd > qsd > qsd > qs > d > qsd > qs > d > qsd > qs > dqs > d > qsd > qsd > > qsd > qsd > qsd > > > 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] 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 ul>li").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 ***
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] 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 ***
[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 ***
[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 ***
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] 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] 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: > > poot > > the DOM constructed by the browser looks like this: > > > > > poot > > > > what you will probably find is that because you have no the > page will be rnedered using quirks mode in browsers. > > regards > > Stevef *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] question about screen reader behavior when pulling in content via Ajax fetch
I have a small login popup box, and is using Ajax fetch to pull in the login page. Due to the way the system works, the login page default is to use a page template instead of just the chunk of login code placed in a header or left/right column, though can be done too but my view is that the login code shouldn't be in every page since it's to be showed in a modal window so I want it retrieves via Ajax. I created a template, strip out dtd, body and all other areas except the code that retrieves the content area (where it will then load the login code template), this all works well. My concern is, will it be any problem for screen reader read the login page's info, enter email which the page has no dtd, body and html tags? Thanks! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
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 ***
[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] 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] html5 and iframes?
On Mar 10, 2011, at 1:52 AM, designer wrote: > > - Original Message - From: "Birendra" > To: > 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=light&" 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?
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] 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 The last P before the note. Note The first P inside the note. 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} > > >test >There should be no border top here > > Since the 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. > > > ... >Heading 2 this is the first-child and the bg color > should be in Olive. > > 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 ***
[WSG] why :first-child pseudo-class doesn't work for some selectors/elements?
http://jsbin.com/apate4/9/ dt, dd { border-top:1px solid #555;float:left } dt:first-child {border-top:0} dd:first-child {border-top:0} h2, p {background:#ddd;padding:15px;margin:5px} h2:first-child,p:first-child {background:#95B26B} p/s. I tried declared the two individually as I thought maybe they can't be grouped, but it makes no differences. According to the spec, it should work. The :first-child pseudo-class represents an element that is the first child of some other element. http://www.w3.org/TR/css3-selectors/#first-child-pseudo Assigning a class to the element is of no help. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***