[WSG] Is it possible to style an attribute?
Hello, I was wondering if anyone could clarify whether it is possible to style an attribute. I realise this sounds odd, so allow me to explain what I wish to do. In my web page there are a number of terms that need to be defined. I like the user to be able to hover over the term and get the definition that way. For example: dfn title=Made famous in the #8216;Star Trek#8217 TV seriesteleportation/dfn ... produces Made famous in the 'Star Trek' TV series ... when the user hovers over the defined term 'teleportation'. I would prefer the words 'Star Trek' to appear in italics instead (yes, I am fussy). Is there any way to do this? I would be grateful for responses. Thank you and kind regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Expected behaviour of links to external websites
Alex, If the link is to an external site then personally, I prefer the link to open in a new window automatically. Also, not all devices make it easy for users to open a link in a new window on request. Regards, Grant Bailey On 20/12/2011 1:09 PM, Alex Mironov wrote: Hi I have been doing some research on expected behaviour of clicking on links from within a website to other external websites. Much of my research suggests that the recommended practice is to keep people within the same window/tab except in some instances. This gives users maximum control as they have the choice to left click on the link and open in a new tab/window. I have included a few links: http://uxdesign.smashingmagazine.com/2008/07/01/should-links-open-in-new-windows/ http://www.useit.com/alertbox/9605.html I was wondering if anyone had any views/resources as to whether users should remain in the same window or should be taken to a new window/tab when they click on an external link? Regards Alex Mironov *** 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] Divs for tabular data
David, I'm not sure about DOM issues but in my opinion, use of tables is consistent with accessibility and semantic requirements if an external style sheet is used to style the tabular data. Usually, some use of divs is required if you want to present the tabular data in a particular way. Regards, Grant Bailey On 5/12/2011 6:22 PM, David McKinnon wrote: OK, so I'm working on a project in which the developers are laying out tabular data using divs. The site is using the 960 CSS grid system so making the 'tables' work just means applying the appropriate class to align each div/table cell to the grid. They say this is good because: 1. It's fast 2. They can manipulate the resulting DOM much more easily than they could with a table 3. Developers find it easier to, say, add or remove columns from the tables, without having to edit the code all the way down the table (no wysiwyg editors here!) To me this doesn't seem very good because: 1. It's not very semantic (although they've used micro data in the class names for some divs) 2. It doesn't seem very accessible -- I might be wrong about this, but to me good semantics is foundational to accessibility 3. There's a lot of markup -- I know tables aren't exactly light on code, but they seem quite light and efficient in comparison 4. It doesn't seem to me like the code will be very easy to maintain for anyone but the developers. The lead developers assure me that this is good practice for speed and efficiency, but I'm not convinced. Nevertheless, I don't want to be advocating tables as best practice if they aren't. What do you think? Are tables too hard for the real world in large sites or web apps where large amounts of DOM manipulation is required? Or have these guys taken the 'Tables are bad' thing a bit too far? Kind regards, 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 ***
[WSG] Breaks within table cells
Hello, I would be grateful if someone could help with this, as I'm not a tables expert. I want to separate two separate entries in the one cell, to indicate alterntatives. Like this (see picture): The coding for this part of the table looks like this: td class="Table_Text"Client / solicitorbrClient / accountant/td td class="Table_Text"Bad advice/td td class="Table_Text"Economic loss/td/tr Unfortunately, I have not been able to style the left-most cell so that it looks like the picture attached. I tried to style the br using the line-height property but this only worked in Google Chrome. If anyone could offer hints I would be grateful. Thank you and kind regards, Grant Bailey (attachment) ***List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfmUnsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfmHelp: memberh...@webstandardsgroup.org***
Re: [WSG] Breaks within table cells
A brilliant suggestion that worked perfectly. Thank you very much Chad! Kind regards, Grant Bailey On 24/11/2011 12:13 AM, Russ Weakley wrote: Why not use a list within the table as it is a list of items. There you go! Option 3 :) *** 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] Using ellipsis to indicate truncated overflow content
David, Thank you for your reply. I think you mean page layout - I was asking about tables for data. I've since been able to muddle through. Regards, Grant On 15/11/2011 7:42 PM, David Laakso wrote: On 11/15/11 12:49 AM, Grant Bailey wrote: Is anyone able to offer suggestions as to how demonstrate to the user that overflow content has been truncated, like this (see attachment). Grant Bailey I guess the question for me is whether I understand the question??? Set width in %, min-width in pixels, and max-width in em on the outermost page wrapper. Avoid use of position absolute and position fixed. Set the page blocks in percent. Set p with margin left/right in percent and margin top/bottom in em or pixels. That will give you desktop. high d pi laptop, and both tablets [ horiz 1024 and vertical 768]. For mobile handsets you need to add a device width meta-tag. Kick the first media query in at around 560 and then another at 480 -- this will give you vertical and horizontal iPhone as well as low through high end Android. If you need to hit IE/6 then it needs to be hacked for doubling the margins and doing weird stuff to the height such as with vertical lists. A rough layout using these principles: http://chelseacreekstudio.com/me.html Best, ~d *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Using ellipsis to indicate truncated overflow content
Hello, Is anyone able to offer suggestions as to how demonstrate to the user that overflow content has been truncated, like this (see attachment). There are some jQuery solutions available but I was hoping for a CSS-only solution, especially one that could cope with flexible column widths. If anyone could offer suggestions I would be grateful. Thank you and regards, Grant Bailey (attachment) *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***attachment: Capture.JPG
Re: [WSG] Using ellipsis to indicate truncated overflow content
Matthew, Thank you, yes, the text-overflow property is great but does not work in Firefox 3.6. Do you know of a work-around for Firefox. Many thanks, Grant Bailey On 15/11/2011 4:56 PM, Matthew Pennell wrote: On Tue, Nov 15, 2011 at 6:49 AM, Grant Bailey grant_malcolm_bai...@westnet.com.au wrote: Is anyone able to offer suggestions as to how demonstrate to the user that overflow content has been truncated, like this (see attachment). text-overflow: ellipsis? http://www.quirksmode.org/css/textoverflow.html - Matthew *** 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] Table with middle column of flexible width
Hello everyone,
I'm trying to present a table that will be viewable in browsers with
different screen widths (e.g. desktop, mobile, etc.).
My approach is to create a table with fixed-width outside columns and a
variable-width internal column (I've classed this variable-width column
as column_main).
The code below works fine, however, I'd like the rows to remain the same
height (with any excess text to overflow), and this is where I am
running in to problems: as the browser window shrinks, the rows get
thicker. I'd like all rows to stay the same height with excess text to
overflow (preferably with an ellipsis cue).
If someone could suggest a solution I would be most grateful. Note that
I have tried to limit the height of the rows using the code labelled
/**/ below but my browser (Firefox 3.6) will not honour it.
Many thanks and regards,
Grant Bailey
***
HTML:
table border=1px cellpadding=10px cellspacing=1px
tr
td class=column_leftmostimg alt= border=0
src=../../Images/M4/gavel.png //td
td class=column_maina href=Topics/4.1/Introduction to
torts.htmlTopic 1: Introduction to torts/adiv
class=topic_descriptionThis topic provides an introduction to the law
of torts./div/td
td class=column_PDFa title=Download PDF [83 KB]
href=/webct/RelativeResourceManager/Template/Module_5/PDFs_M5/5.1.pdfimg
class=pdf_icon alt=PDF icon src=../../Images/Common/pdf_icon.png
//a/td
td class=column_rightmosta title=Download Podcast [5.61MB]
href=/webct/RelativeResourceManager/Template/Module_4/Podcasts_M4/IBL_4.1
(Introduction to Torts).mp3img class=podcast_icon alt=Podcast
icon src=../../Images/Common/podcast_icon.png //a/td
/tr
CSS:
table
{
margin-top: 1em;
margin-bottom: 1em;
font-weight: normal;
font-size: 1em;
line-height: 1em;
font-family: 'Arial';
color: #00;
line-height: 1em;
}
tr /**/
{
max-height: 95px;
text-overflow: ellipsis;
overflow: hidden;
}
td.column_leftmost
{
width: 4.438em;
}
td.column_leftmost img
{
border: 0em; width:100%;
}
td.column_main
{
padding-right: 1.875em;
}
td.column_PDF
{
width: 3.125em;
}
img.pdf_icon {
border: 0em; width:100%;
}
td.column_rightmost
{
width: 3.125em;
}
img.podcast_icon {
border: 0em; width: 100%;
}
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Attributes within source element (HTML5)
Jon, Thanks for your email. Yes, I am quite sure the path is correct, in fact, I had Dreamweaver create it and I checked it manually. Very strange ... Regards, Grant Bailey On 10/11/2011 2:34 PM, Jon Reece wrote: Hi Grant, There's nothing in the current spec (editor's draft included) indicating that the /src/ attribute (whether on the alternative /source http://www.w3.org/TR/html5/the-iframe-element.html#the-source-element/ element or the /video http://www.w3.org/TR/html5/the-iframe-element.html#the-video-element /element) should not accept either type of URL. Are you sure your absolute path is correct? - Jon On Wed, Nov 9, 2011 at 9:28 PM, Grant Bailey grant_malcolm_bai...@westnet.com.au mailto:grant_malcolm_bai...@westnet.com.au wrote: Hello, I was wondering whether someone could clarify the following. I'm trying to play video using the HTML5 video tag, as follows: ... h1img id=banner alt= src=/Images/Common/IBL_banner.png //h1 video id=movie width=640 height=360 preload controls poster=/Images/M4/M4_Introtorts.png source src=/Video/4_1/pr6.mp4 type='video/mp4; codecs=avc1.42E01E, mp4a.40.2' / /video Note that I am using site root-relative links. These work fine for the img tag (I can see the IBL_banner.png image) but not for the video tag (I have tested in Firefox, Chrome and IE8). I changed the links within video to document-relative links, like this: ... source src=../Video/4_1/pr6.mp4 type='video/mp4; codecs=avc1.42E01E, mp4a.40.2'/ Now the video works. Could someone please clarify: does the video element not support site root-relative links? Or am I doing something wrong? I would be grateful for comments. Thank you and kind regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org mailto:memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Attributes within source element (HTML5)
Hello, I was wondering whether someone could clarify the following. I'm trying to play video using the HTML5 video tag, as follows: ... h1img id=banner alt= src=/Images/Common/IBL_banner.png //h1 video id=movie width=640 height=360 preload controls poster=/Images/M4/M4_Introtorts.png source src=/Video/4_1/pr6.mp4 type='video/mp4; codecs=avc1.42E01E, mp4a.40.2' / /video Note that I am using site root-relative links. These work fine for the img tag (I can see the IBL_banner.png image) but not for the video tag (I have tested in Firefox, Chrome and IE8). I changed the links within video to document-relative links, like this: ... source src=../Video/4_1/pr6.mp4 type='video/mp4; codecs=avc1.42E01E, mp4a.40.2'/ Now the video works. Could someone please clarify: does the video element not support site root-relative links? Or am I doing something wrong? I would be grateful for comments. Thank you and kind regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Accessibility With Moodle
Hi Marvin, Thanks for your post. I'm interested in reading the other replies. I would have thought that accessibility was a priority for Moodle. It is widely used now. Certainly a matter of relevance for persons considering whether to use it as their LMS. Regards, Grant Bailey On 22/10/2011 1:45 PM, Marvin Hunkin wrote: hi. using jaws 12.0.1170 and jaws 13.0.241. and doing a online diploma in website development from http://wsi.tafensw.edu.au, and they use http://wwwmoodle.org which is not very accessible with jaws. i have e-mailed support at supp...@moodle.org about that jaws 12 and 13, in firefox, does not read some of the content after a while, and just says blank. and it has javascript, or java submenus, and jaws gets stuck on that. firefox 7.0, was really bad, and after a while had to try internet explorer 9. and it read the content a little better, but a couple of times, got stuck on the submenu. so, maybe if everyone wrote to http://www.moodle.org, might be able to get some real progress about this. has any one else used moodle, with a screen reader, and their experiences, good, bad, the ugly. and at the moment, the lecturers have to rewrite their content, and send it to me via e-mail. so in three months, have only completed three subjects. which is a slow and timely process. they also have other online students, face to face, and i have tried to ask them, and they said that moodle, is making changes to their e-learning platform, but could take a few months. and when i was able to login. a lot of broken links, enrollment keys, to login, and a combo box, when i was in the right area, no keyboard shortcuts, and some combo box items, just said item 3, or what ever. this is really, really annoying. so my question is. for a large institution, how easy is to fix accessibility, of education institutions, to hand create the e-learning pages, and then put accessibility into these pages? and if there are any other more easier and more accessible e-learning systems, what are they, and how complex, or simple for a large institution, to move their content to this new platform. any feedback, suggestions, or where i go from here. want to use the e-learning platform, but a real challenge for a student with a dsiaiblity, of mine, bieng blind and using a screen reader. i did test with nvda, and got similar results in internet explorer 9, firefox 7.0. marvin. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] jQuery accessibility
Hello everyone, Could someone please clarify whether a site built with jQuery is consistent with web standards and accessibility, assuming that the jQuery components: (i) degrade gracefully; and (ii) are not necessary for essential functions (such as navigation). I would be grateful for responses as I am confused about screen reading software: I thought these ignored Javascript but apparently, some are Javascript-capable. Moreover, as Filament Group point out (in this article http://filamentgroup.com/lab/expand_and_collapse_content_accessibly_with_progressive_enhancement_jquery/ about collapsible panels), many blind users expect a fully-functioning website. Is accessibility normally built in to jQuery or must we add it ourselves (as Filament Group did)? I would be grateful for any responses. Thank you and kind regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Table borders
I absolutely agree Chris, Russ is a legend!
Thank you Russ
Grant
On 30/09/2011 10:25 PM, Chris Dimmock wrote:
Russ,
It's the Friday evening of a long weekend - and you take the time to
give code examples??
And you still can't see why everyone here thinks you are both a *Web
Standards* and *Nice Guy* Superhero?!?
Have a great weekend Russ.
I admire your dedication.
And so should all of us!!
;-)
Chris
Sent from my iPhone
On 30/09/2011, at 7:32 PM, Russ Weakley r...@maxdesign.com.au wrote:
Hey Grant,
Try something like the code below:
1. The table markup is more accessible - th elements are very
important for screen readers
2. There are no presentational attributes (every time we include
presentational attributes, a fairy dies!)
!DOCTYPE html
html lang=en
head
meta charset=utf-8
titleGrant Bailey/title
style type=text/css media=screen
.Table_Text
{
border-collapse: collapse;
width: 600px;
}
th, td
{
border: 1px solid #000;
padding: 1em 2em;
vertical-align: top;
text-align: left;
}
.no-border { border: none; }
/style
/head
body
table class=Table_Text
thead
tr
td class=no-border/td
thColumn 1 Title/th
thColumn 2 Title/th
/tr
/thead
tbody
tr
thRow 1 Title/th
tdCol 1 Row 1/td
tdCol 2 Row 1/td
/tr
tr
thRow 2 Title/th
tdCol 1 Row 2/td
tdCol 2 Row 2/td
/tr
/tbody
/table
/body
/html
On 30/09/2011, at 7:01 PM, Grant Bailey wrote:
Hello,
I'd be grateful for some help on this problem.
I need to display a table. No problem except that it is one of those
tables that have header columns on the left and right, which means
that the top left-hand cell should not appear (i.e. have no border).
Like this (please see attachment if the picture does not appear below):
feegfdfj.jpg
Here is my coding:
table class=Table_Text width=92.2% border=1 align=center
cellspacing=0
tr style=font-weight: bold;
td style=border:none;br //td
td style=text-align: center; Column 1 Title/td
td style=text-align: center; Column 2 Title/td/tr
tr
td style=font-weight: bold; Row 1 Title/td
tdCol 1 Row 1/td
tdCol 2 Row 1/td/tr
tr
td style=font-weight: bold; Row 2 Title/td
tdCol 1 Row 2/td
tdCol 2 Row 2/td/tr
/table
Unfortunately, all of the major browsers show the top-left cell with
a border (a bit fainter, but you can still see it), despite my
efforts (shown in code above) to render it invisible.
If someone could advise me how to make the cell truly invisible I
would be most grateful.
Thank you and kind regards,
Grant Bailey
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] CSS2.1 now an official recommendation
Hello, I can barely believe that CSS2.1 has only just become an official recommendation (see http://www.css3.info/css2-1-and-the-css3-color-module-become-official-w3c-recommendations/). Could anyone explain why this took so long? Many of us are already using CSS3! Seems to me that speeding the process of approval along (just a little) might encourage browser vendors to comply with web standards ... Insights would be appreciated. Kind regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Google Les Paul tribute
Hello, Today's Google home page has an interactive guitar in honour of Les Paul. It makes sounds when you 'strum' the strings. I was wondering what technologies Google used to create this incredible element. It does not appear to be Flash ... does anyone know. Thank you and kind regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Google Les Paul tribute
Saving the web page does not seem to reproduce the functionality ... is that to be expected? The guitar does not make any sound in IE7 (at least on my machine) ... perhaps due to IE's lack of support for canvas ? I would have thought that Google would apply a shim ... On 9/06/2011 9:25 PM, designer wrote: It uses the html5 'canvas' tag as the basis. http://en.wikipedia.org/wiki/Canvas_element any many more . . . Bob - Original Message - *From:* Jason Grant mailto:ja...@flexewebs.com *To:* wsg@webstandardsgroup.org mailto:wsg@webstandardsgroup.org *Sent:* Thursday, June 09, 2011 12:11 PM *Subject:* Re: [WSG] Google Les Paul tribute HTML, CSS and JavaScript of course. On Thu, Jun 9, 2011 at 12:05 PM, Grant Bailey grant_malcolm_bai...@westnet.com.au mailto:grant_malcolm_bai...@westnet.com.au wrote: Hello, Today's Google home page has an interactive guitar in honour of Les Paul. It makes sounds when you 'strum' the strings. I was wondering what technologies Google used to create this incredible element. It does not appear to be Flash ... does anyone know. Thank you and kind regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org mailto:memberh...@webstandardsgroup.org *** -- Jason Grant BSc [Hons], MSc [Hons] Customer Experience Architect Flexewebs Ltd. www.flexewebs.com http://www.flexewebs.com ja...@flexewebs.com mailto:ja...@flexewebs.com +44 (0)7748 591 770 www.flexewebs.com/semantix http://www.flexewebs.com/semantix www.twitter.com/flexewebs http://www.twitter.com/flexewebs www.linkedin.com/in/flexewebs http://www.linkedin.com/in/flexewebs *** 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] Today's Google home page (1 May)
Dear Raul,
Many thanks for your reply.
Kind regards,
Grant Bailey
On 1/05/2011 9:21 PM, Raul Ferrer wrote:
Hi Grant!
This was a brilliant Google logo...as usual.
However, the technologies, though awesomely implemented, are not that new.
It's plain HTML for the structure, CSS for the display and effects and
Javascript for the interaction.
Oh, and the four animations that only show on the magnifying glass are plain
old animated .gifs (you gotta love this ;) )
This is the HTML code:
div id=lga style=height:171px;padding-top:22px
style
#hplogo{background:url(logos/2011/worldsfair11-hp.jpg) top left
no-repeat;cursor:pointer;height:168px;width:421px}#hplogot{-webkit-box-shado
w:5px 5px 10px #ddd;-moz-box-shadow:5px 5px 10px #ddd;box-shadow:5px 5px
10px #ddd;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity
0.5s ease-out;-o-transition:opacity 0.5s ease-out;transition:opacity 0.5s
ease-out;background-color:#ca;border:1px solid
#b5b5b5;display:none;font:normal 10pt arial,sans-serif;opacity:0;padding:1px
3px;position:absolute;white-space:nowrap}#loupe{-webkit-transform:scale(.25)
rotateZ(0);-moz-transform:scale(.25)
rotateZ(0);-webkit-transition-delay:200ms, 0;-moz-transition-delay:200ms,
0;-webkit-transition:opacity 400ms, -webkit-transform
400ms;-moz-transition:opacity 400ms, -moz-transform
400ms;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacit
y:0;overflow:hidden;position:absolute;visibility:hidden;z-index:2000}#loupe.
visible{-webkit-transform:scale(1) rotateZ(0);-moz-transform:scale(1)
rotateZ(0);-webkit-transition-delay:0, 100ms;-moz-transition-delay:0,
100ms;-webkit-transition:opacity 400ms, -webkit-transform
400ms;-moz-transition:opacity 400ms, -moz-transform
400ms;cursor:none;opacity:1}.loupe-canvas{background:white;overflow:hidden;p
osition:absolute;z-index:3000}.loupe-canvas
div{height:503px;left:0;position:absolute;top:0;width:1263px}.loupe-canvas
img{position:absolute}#loupe-canvas-top{height:19px;left:51px;top:22px;width
:100px}#loupe-canvas-mid{height:119px;left:23px;top:41px;width:155px}#loupe-
canvas-bottom{height:18px;left:51px;top:159px;width:100px}.hplogoh{height:50
3px;left:0;top:0;width:1263px;z-index:4000}.hplogoc{height:38px;left:440px;t
op:273px;width:38px;z-index:5000}.hplogod{height:48px;left:1108px;top:353px;
width:34px;z-index:5000}.hplogof{height:167px;left:519px;top:250px;width:132
px;z-index:5000}.hplogos{height:51px;left:122px;top:236px;width:51px;z-index
:5000}
/style
div id=hplogo
div id=loupe class= style=margin-left: -100px; margin-top: -100px;
width: 200px; height: 200px; visibility: visible; left: 372px; top: 177px;
div id=loupe-canvas-mid class=loupe-canvas
div style=left: 92px; top: -268px;
img class=hplogoc src=logos/2011/worldsfair11-hp-1.gif
img class=hplogod src=logos/2011/worldsfair11-hp-2.gif
img class=hplogof src=logos/2011/worldsfair11-hp-3.gif
img class=hplogos src=logos/2011/worldsfair11-hp-4.gif
img class=hplogoh src=logos/2011/worldsfair11-hr.jpg
/div
/div
div id=loupe-canvas-top class=loupe-canvas
div style=left: 64px; top: -249px;
img class=hplogoc src=logos/2011/worldsfair11-hp-1.gif
img class=hplogod src=logos/2011/worldsfair11-hp-2.gif
img class=hplogof src=logos/2011/worldsfair11-hp-3.gif
img class=hplogos src=logos/2011/worldsfair11-hp-4.gif
img class=hplogoh src=logos/2011/worldsfair11-hr.jpg
/div
/div
div id=loupe-canvas-bottom class=loupe-canvas
div style=left: 64px; top: -386px;
img class=hplogoc src=logos/2011/worldsfair11-hp-1.gif
img class=hplogod src=logos/2011/worldsfair11-hp-2.gif
img class=hplogof src=logos/2011/worldsfair11-hp-3.gif
img class=hplogos src=logos/2011/worldsfair11-hp-4.gif
img class=hplogoh src=logos/2011/worldsfair11-hr.jpg
/div
/div
img
style=height:200px;left:0;position:absolute;top:0;width:200px;z-index:6000
src=logos/2011/worldsfair11-hp.png
/div
div id=hplogot style=display: block; opacity: 0;160-årsjubileet av den
första Världsutställningen/div
/div
script
(function(){try{if(!google.doodle)google.doodle={};var
d=[webkitTransition,MozTransition,OTransition,transition],f,g=null,h
=!1,i=!1,j=!1,k=!0,l=!1,m,n,o,p,q,r,s,t,u=!1,v=!1,w=function(a,b,c){a.remove
EventListener?a.removeEventListener(b,c,!1):a.detachEvent(on+b,c)},x=funct
ion(a,b,c){if(!google.doodle.a)google.doodle.a=[];google.doodle.a.push(argum
ents);var
e=a,C=b,D=c;e.addEventListener?e.addEventListener(C,D,!1):e.attachEvent(on
+C,D)},y=function(){h=ki;p.className=h?visible:;if(!u)p.style.visibili
ty=h?visible:hidden;var
a=ji;if(a)t.style.left=m+289+px,t.style.top=n+10+px;v?t.style.opacity=
a?1:0:t.style.display=a?block:none},z=function(a,b){var
c=a-m,e=b-n;i=c-10e-10c 431e
167;if(ki)p.style.left=a-(l?100:0)+px,p.style.top=b+px,c=-(c*3-100),e=
-(e*3-100),r.style.left=c-23+px,r.style.top=e-41+px,q.style.left=c-51+p
x,q.style.top=e-22+px,s.style.left=c-51+px,s.style.top=e-159+px;y()},
B=function(a){f=[(a.clientX||a.targetTouchesa.targetTouches[0].clientX||0)
+(document.body.scrollLeft
[WSG] Today's Google home page (1 May)
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
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] PDF Conversion
Hello, I understand that Nuance make a PDF converter: http://shop.nuance.com/store?Action=DisplayPageEnv=BASELocale=en_AUSiteID=scsoftAPid=ProductDetailsPageproductID=208595700 Have not used it myself however, it may be an improvement on the Acrobat batch convert that Damien talks about. Perhaps others could offer comments. Regards, Grant Bailey On 9/02/2011 4:33 PM, Samuel Santana wrote: Hi all, This is not a solution to your problem as these documents have already been created but just wanted to add my two-cents. Generally publications are created/developed using a word processing file (MS-Word or equivalent). Word processors have the ability to work with their own internal stylesheets which aside from providing visual consitency in relation to headings etc. it can also be used to provide a structure to the document. This can be used to automatically generate table of contents etc. but more importantly in the context of this question it also provides a heading hierarchy (just like that required by accessible HTML). Preparing a corporate document(s) template for staff to use in the preparation of documents can take some negotiating and a slight shift in how people work with programs like Word (not just selecting a piece of text and making it 20-point Arial but instead formatting is as a heading 2 for example) but it provides many advantages including two very important ones such as the ability to export that document as a web page (with a CSS section rather than inline markup) but also allowing the document (along with other requirements such as providing alternative text to images etc.) to be fully accessible to screen readers. Sam On 9 February 2011 15:48, Geary, Damien damien.ge...@act.gov.au mailto:damien.ge...@act.gov.au wrote: Just to touch on the OP's question, Adobe Acrobat Pro has the ability to batch export many pdfs to HTML. Select File Export Multiple Files. Select the files you want batch converted, choose html as your output. Proceed to laugh \ cry at the lack of formatting \ structure retained in the html version. -Original Message- From: li...@webstandardsgroup.org mailto:li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org mailto:li...@webstandardsgroup.org] On Behalf Of Webb, KerryA Sent: Wednesday, 9 February 2011 3:33 PM To: wsg@webstandardsgroup.org mailto:wsg@webstandardsgroup.org Subject: RE: [WSG] PDF Conversion Dave wrote: On 09/02/11 16:55, Russ Weakley wrote: Hi Kerry. Neither the blind user or I were suggesting that alternatives were not a good idea, or even a requirement. I'd always recommend providing an HTML alternative if possible along with accessible (tagged) PDF. The question was about Word as as a viable alternative to PDF. I am not sure it is. Though others may disagree! I'm not an accessibility expert, but it seems pretty obvious that if the PDF isn't well structured (which would presumably make it more accessible), I can't imagine that converting it to an MS Word document will add any sensible structure that wasn't there before. Neither am I an accessibility expert, but I'm of necessity taking more interest in it these days. There are a number of reasons - not just about structure - why a blind user might have trouble with a PDF. An MS Word (or an RTF) document may be a more accessible alternative to a PDF. Using standards compliant HTML as an alternative accessible standard makes much more sense (again, assuming the source document wasn't generated from your typical poorly structured MS Word document). And few Web managers will find the time and resources to create a readable standards compliant HTML version of a multi-multi-page PDF, whereas a Word document will in many cases be more doable. Kerry --- This email, and any attachments, may be confidential and also privileged. If you are not the intended recipient, please notify the sender and delete all copies of this transmission along with any attachments immediately. You should not copy or use it for any purpose, nor disclose its contents to any other person. --- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org mailto:memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http
Re: [WSG] Detecting Mobile user agent - what methods work best?
Hi Mike, It's best to detect from the server side in my opinion. If you have administrator rights to the server you could use something like the Apache Mobile Filter (http://www.apachemobilefilter.org/Apache_Mobile_Filter/Welcome.php). Regards, Grant Bailey On 7/01/2011 3:10 PM, Mike Kear wrote: I have to convert a client site to enable phone users to use the site and I was wondering what is the best method to detect the mobile user agent and switch the css sheet? As far as I have seen, there are a few ways to do this - which is best? (or maybe the way to put it is 'least bad') [A] a link at the top of the normal page, linking to a mobile version of the page. (yuk) [B] javascript detection (but there are thousands of mobile devices to detect. YUK ) [C] Use CSS @media handheld (but many mobile phones don't support the handheld media type ) [D] server side detection using CGI.User_Agent (but there are so many user agents to detect) [E] screen resolution detection (but is that reliable?) Are there any other ways to do this? How do the rest of you handle serving pages to both computer screens and mobile device screens?? Cheers Mike Kear Windsor, NSW, Australia Adobe Certified Advanced ColdFusion Developer AFP Webworks http://afpwebworks.com ColdFusion 9 Enterprise, PHP, ASP, ASP.NET hosting from AUD$15/month *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] disallow IE6 to load the main style sheet
Big companies such as Google and Youtube have had to deal with the IE6 problem on a large scale. Their pages display a warning message to advise IE6 users that the page may not display correctly, and suggest upgrading to a more recent browser. Personally I think it is reasonable to take this approach, given the age of IE6 and its declining market share. However I would be interested in the attitude of other developers. Kind regards, Grant Bailey On 19/12/2010 2:03 AM, Anthony Gr. wrote: Sorry :) !--[if gt IE 6]!-- ... of course. Best, Anton. 2010/12/18 Anthony Gr.ant.grak...@gmail.com: Hi. I think, this example will help you: !--[if gte IE 6]!-- link rel=stylesheet href=style.css !--![endif]-- Best, Anton 2010/12/18 teeweblis...@gmail.com: I am finally to begin to stop supporting IE6 starts from 2011 as the usage has fallen below 5%. I don't want the IE6 users to see a broken page due to no special treatment made for the browser, rather, I would like them to see an un-styled page as if the style sheet has switch off. Can this be done? 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 ***
Re: [WSG] Document Formats
Hello Kevin, You are right about providing HTML and PDF versions. If you must provide a Word version then I suggest converting your documents to the old *.doc format which can be read by all versions of Word back to Word 97. If you have Word 2002 or earlier you can download a converter to convert your *.docx files into *.doc format. See the links at the bottom of this email. Why not suggest to your users that they install OpenOffice Writer instead. Writer reads all versions of Word documents. By the way, converting Word documents to clean HTML / XHTML is no walk in the park. If you need to do this, I would suggest using DocToHTML (http://www.doctohtml.com/doctohtml.html) which I have had good success with. It's $39 to buy and good value. Kind regards, Grant Bailey Links: http://office.microsoft.com/en-us/downloads/office-online-file-converters-and-viewers-HA001044981.aspx http://www.microsoft.com/downloads/en/details.aspx?FamilyID=cf196df0-70e5-4595-8a98-370278f40c57DisplayLang=en http://www.microsoft.com/downloads/en/details.aspx?familyid=941b3470-3ae9-4aee-8f43-c6bb74cd1466displaylang=en On 1/12/2010 6:52 AM, Erickson, Kevin (DOE) wrote: Hi All, The website I work with receives a lot of documents to be posted that come in the form of Word, PowerPoint and Excel documents. And now, with the release of the latest versions of Ms Office, they are coming to me with an X on their extensions. I have information in the footer of all the web pages for access to free viewers for all documents including these latest extensions. This may be an adequate CYA but I am not convinced it is the best practice. I know this must be confusing for some of our visitors. I would like to ask any of you if you have had to deal with multiple document formats and how you handled this for the best user accessibility. I am thinking the best practice is to have, first, a browser/HTML version, second, a PDF version, and after that whatever version the document was created as, i.e. Ms Word, PowerPoint, etc. Example: ul li Titlea href=info.html titleTitle Web Page (Web Page)/a a href=info.pdf titleTitle in PDF Format (PDF)/a a href=info.docx titleTitle in MS Word Format (Word)/a /li /ul Thank you very much for sharing your experiences on this, Kevin *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] alt text on email graphic
This article might also help: http://www.alistapart.com/articles/spam/ Kind regards, Grant Bailey On 30/11/2010 3:47 PM, Chad Kelly wrote: - Original Message - From: cat soul cats...@thinkplan.org To: wsg@webstandardsgroup.org Sent: Tuesday, November 30, 2010 11:03 AM Subject: [WSG] alt text on email graphic The technique of using a graphic to communicate an email address in order to foil spiders or harvesters, like this: bob at domain dot com seems pretty clever. Yet, when I think about the alt text for that image, I'm wondering if that alt text could be exploited by spiders... would it be good to handle it this way: img src=mail.gif alt=bob's email and leave it at that? for those who really use alt text, might they be short changed by not seeing or hearing: img src=mail.gif alt=bob at domain dot com or am I making mountains out of molehills here? cs Hmm, using alt text on an image, or rather using an image at all for this is rather pointless. As, you can't use alt text as a screen reader won't be able to read the image content, and if you use alt text spam bots will pick up the content and spam the address. The only way you can do it properly, is by either just place the email strait on the page as a text link, and have some decent spam filtering to get rid of the crap that comes through, or the better way is to use a form. You can't use an image capcha though as they are not accessible, so you need to be a bit creative with the use of capcha. Or just program the form script properly and have a decent web security set-up on your web server. *** 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] Fixed-position menus?
You could use the Dean Edwards script to force IE6 into standards compliance: http://code.google.com/p/ie7-js/ Regards, Grant Bailey On 24/11/2010 9:16 AM, Joseph Taylor wrote: Cat, You can always use javascript to move the menu as you scroll to overcome IE6 lacking. As far as how important is IE6? I guess that depends on your audience. The sites I work on have a (sadly) large percentage of IE6 users (10% +/-) Joseph R. B. Taylor /Web Designer / Developer/ -- Sites by Joe, LLC /Clean, Simple and Elegant Web Design/ Phone: (609) 335-3076 Web: http://sitesbyjoe.com Email: j...@sitesbyjoe.com On 11/23/10 4:05 PM, cat soul wrote: Here is a link illustrating what I mean: http://thinkplan.org/menupersist.jpg What are peoples' thoughts on this kind of menu? I'm told that IE 6 doesn't support this kind of menu...IIRC, it involves position: fixed; How key is IE 6, and are people simply not going with this kind of fixed menu? thank you! cs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Google 'X-ray' banner
Hello, Does anyone know how Google did their 'X-ray' banner that appeared today? (See http://www.telegraph.co.uk/technology/google/8116827/X-rays-150th-annive rsary-celebrated-with-Google-Doodle.html if the banner has been replaced.) It glows and fades. This is not Flash, so I'd love to know how they did it. Does anyone know? Is it an animated Gif, or some HTML5 trick? Thank you, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Google 'X-ray' banner
Thanks for all the quick replies. I did not realise an animated Gif could look so impressive! Have a good day, Grant *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] A simple IE and JS detection method?
Mike,
I like it.
You have styled the body element as an example. Would you need to
style every element in the document using this technique, or would
inheritance deal with the other elements? Sorry if the answer is obvious
but I'm not a JavaScript guru ...
Regards,
Grant Bailey
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
On Behalf Of Foskett, Mike
Sent: Friday, 29 October 2010 12:22 AM
To: wsg@webstandardsgroup.org
Subject: [WSG] A simple IE and JS detection method?
Hi All,
I was wondering if you had a little time to comment on the following
technique?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
!--[if IE]
![if gt IE 8]html lang=en-gb class=gtIE8 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![if IE 8]html lang=en-gb class=IE8 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![if IE 7]html lang=en-gb class=IE7 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![if IE 6]html lang=en-gb class=IE6 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![endif]--
!--[if !IE]!--html lang=en-gb class=xIE xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;!--![endif]--
script
type=text/javascript/*![CDATA[*/document.documentElement.className+=
hasJS;/*]]*//script
... yada ...
style type=text/css
body {background:#ccc; color:#000}
.IE8 body {background:#fcc;}
.IE7 body {background:#cfc;}
.IE6 body {background:#ccf;}
.xIE body {background:#fff;}
/style
... yada ...
Not thoroughly tested I admit but it appears reasonable.
The only failure I can see is detecting IEv6 and JS on because:
.IE6.hasJS {background:#f000}
will not work as IE 6 cannot concatenate class names.
What do you think?
Regards,
Mike Foskett
http://websemantics.co.uk/
_
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
***
[WSG] Multiple pseudo class selectors
Hello,
I was wondering whether it is acceptable CSS to combine pseudo class
selectors, like this:
div#div_Navigation ul li:first-child:before {
... [STYLES HERE]
}
The W3C CSS validator does not complain and my versions of Firefox,
Chrome, Safari or Opera display the style. Internet Explorer 7 does not
seem to accept it, however, even with Dean Edwards' IE7.js script
activated (see http://code.google.com/p/ie7-js/).
I would be grateful if anyone could advise whether they have been able
to get multiple pseudo class selectors working in Internet Explorer.
Many thanks and regards,
Grant Bailey
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] Current thinking on fixed width/liquid design ?
Lyn, If you need to cover IE6 then you might need to make adjustments as it does not recognise max-width. I think the Dean Edwards JavaScript solution helps here. Regards, Grant Bailey -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Lyn Smith Sent: Thursday, 19 August 2010 11:30 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Current thinking on fixed width/liquid design ? Thanks everyone - the media queries look interesting and I will definitely take on max-width. -- Lyn Smith www.westernwebdesign.com.au Affordable website design Perth WA *** 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 ***
FW: [WSG] CSS Expandable Menu
As a follow-up to my original email, the following methods have been very well designed from the accessibility point of view: http://juicystudio.com/article/ecmascriptmenu.php http://www.456bereastreet.com/archive/200705/accessible_expanding_and_co llapsing_menu/ A further example worth considering: http://www.splintered.co.uk/experiments/16 Thanks again for all the helpful posts regarding this topic. Grant *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS Expandable Menu
Thank you to everyone who replied to my email. Kind regards, Grant Bailey -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Ted Drake Sent: Tuesday, 29 June 2010 10:07 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] CSS Expandable Menu The YUI3 menu widget has great accessibility support http://developer.yahoo.com/yui/3/node-menunav/ Accessibility Usability Minded The MenuNav Node Plugin was built with both accessibility and usability in mind. The MenuNav Node Plugin implements established mouse and keyboard interaction patterns to deliver a user experience that is both familiar and easy to use. To that foundation the MenuNav Node plugin adds support for screen readers through the use of the WAI-ARIA Roles and States. Watch this video for a quick a demo of a menu created using the MenuNav Node Plugin using the WAI-ARIA Roles and States running in Firefox 3 using the Window-Eyes screen reader. -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Thierry Koblentz Sent: Monday, June 28, 2010 4:56 PM To: wsg@webstandardsgroup.org Subject: RE: [WSG] CSS Expandable Menu Hi Grant, I'm trying to avoid use of Javascript due to accessibility concerns. There is no problem with using a javascript powered menu as long as that menu is accessible with javascript off. As a side note, pure CSS menus usually come with usability issues. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Using CSS to select a tag having an ID attribute: page served as application/xhtml+xml
Hello,
I've recently started serving my web pages as xml pages using the MIME
type application/xhtml+xml rather than text/css as previously. This
works fine as my pages were already xhtml compliant, with one exception:
my external CSS stylesheets are no longer honoured by any browser to the
extent that they select ID attributes.
For example:
[XHTML]
div id=div_Heading
h1Survival: the basics/h1
/div
[CSS]
#div_Heading {
border: thin black solid;
}
If I serve my page as text/css the border appears as expected but when
the page is served as application/xhtml+xml, no border is visible. There
is only one ID named div_Heading in the document and the document itself
validates.
Could someone please advise me what might be going wrong as I have been
unable to find anything of assistance on the web or in the WSG forums.
Many thanks and regards,
Grant Bailey
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] Using CSS to select a tag having an ID attribute: page served as application/xhtml+xml
Sorry everyone, I just discovered what the problem was:
I have multiple style sheets and the browsers were only applying one,
not two as required, due to my misuse of the 'name' attribute of the
stylesheet instruction, as illustrated below.
This was incorrect:
?xml-stylesheet href=../../../Styles/Default.css type=text/css
alternate=no title=Default media=screen, projection?
?xml-stylesheet href=../../../Styles/Lesson.css type=text/css
alternate=no title=Lesson media=screen, projection?
?xml-stylesheet href=../../../Styles/Print.css type=text/css
alternate=yes title=Print media=print?
... as the 'name' attribute must be the same for all stylesheets that
you want the browser to apply by default using the cascade. The
following fixed the problem:
?xml-stylesheet href=../../../Styles/Default.css type=text/css
alternate=no title=Screen media=screen, projection?
?xml-stylesheet href=../../../Styles/Lesson.css type=text/css
alternate=no title=Screen media=screen, projection?
?xml-stylesheet href=../../../Styles/Print.css type=text/css
alternate=yes title=Print media=print?
As the 'title' attribute is optional you might be best leaving it out!
Kind regards,
Grant Bailey
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
On Behalf Of Grant Bailey
Sent: Thursday, 17 December 2009 7:41 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] Using CSS to select a tag having an ID attribute: page
served as application/xhtml+xml
Hello,
I've recently started serving my web pages as xml pages using the MIME
type application/xhtml+xml rather than text/css as previously. This
works fine as my pages were already xhtml compliant, with one exception:
my external CSS stylesheets are no longer honoured by any browser to the
extent that they select ID attributes.
For example:
[XHTML]
div id=div_Heading
h1Survival: the basics/h1
/div
[CSS]
#div_Heading {
border: thin black solid;
}
If I serve my page as text/css the border appears as expected but when
the page is served as application/xhtml+xml, no border is visible. There
is only one ID named div_Heading in the document and the document itself
validates.
Could someone please advise me what might be going wrong as I have been
unable to find anything of assistance on the web or in the WSG forums.
Many thanks and regards,
Grant Bailey
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] Using CSS to select a tag having an ID attribute: page served as application/xhtml+xml
Yuval,
I don't understand your message - did I miss something?
Grant
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
On Behalf Of Yuval Ararat
Sent: Thursday, 17 December 2009 10:11 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Using CSS to select a tag having an ID attribute:
page served as application/xhtml+xml
Am i the only one missing the name attribute in the samples?
On Thu, Dec 17, 2009 at 8:00 PM, Grant Bailey
grant_malcolm_bai...@westnet.com.au wrote:
Sorry everyone, I just discovered what the problem was:
I have multiple style sheets and the browsers were only applying one,
not two as required, due to my misuse of the 'name' attribute of the
stylesheet instruction, as illustrated below.
This was incorrect:
?xml-stylesheet href=../../../Styles/Default.css type=text/css
alternate=no title=Default media=screen, projection?
?xml-stylesheet href=../../../Styles/Lesson.css type=text/css
alternate=no title=Lesson media=screen, projection?
?xml-stylesheet href=../../../Styles/Print.css type=text/css
alternate=yes title=Print media=print?
... as the 'name' attribute must be the same for all stylesheets that
you want the browser to apply by default using the cascade. The
following fixed the problem:
?xml-stylesheet href=../../../Styles/Default.css type=text/css
alternate=no title=Screen media=screen, projection?
?xml-stylesheet href=../../../Styles/Lesson.css type=text/css
alternate=no title=Screen media=screen, projection?
?xml-stylesheet href=../../../Styles/Print.css type=text/css
alternate=yes title=Print media=print?
As the 'title' attribute is optional you might be best leaving it out!
Kind regards,
Grant Bailey
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
On Behalf Of Grant Bailey
Sent: Thursday, 17 December 2009 7:41 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] Using CSS to select a tag having an ID attribute: page
served as application/xhtml+xml
Hello,
I've recently started serving my web pages as xml pages using the MIME
type application/xhtml+xml rather than text/css as previously. This
works fine as my pages were already xhtml compliant, with one exception:
my external CSS stylesheets are no longer honoured by any browser to the
extent that they select ID attributes.
For example:
[XHTML]
div id=div_Heading
h1Survival: the basics/h1
/div
[CSS]
#div_Heading {
border: thin black solid;
}
If I serve my page as text/css the border appears as expected but when
the page is served as application/xhtml+xml, no border is visible. There
is only one ID named div_Heading in the document and the document itself
validates.
Could someone please advise me what might be going wrong as I have been
unable to find anything of assistance on the web or in the WSG forums.
Many thanks and regards,
Grant Bailey
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
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] Collapsing margins and relative positioning
Hello,
I have a question about collapsing margins. I realise that the margins
of relatively and absolutely positioned elements are not supposed to
collapse, but I've come across an example that appears to break this
rule. I'd be grateful if someone could clarify what is going on.
I have a simple html document with the following elements /
positionings:
body (relative)
division #div_content (relative)
division #div_alpha (absolute; top: 0;)
division #div_omega (relative; top: 0;)
The division #div_content is a wrapper for all other content. The other
two divisions, #div_alpha and #div_omega, are siblings which each hold a
single h1 element. Each h1 element is styled to have a top margin.
My issue is that, in all major browsers, the margin of the h1 of
#div_omega collapses with the margin of body, even though #div_omega has
been relatively positioned. Furthermore, adding padding to the body does
not seem to fix the problem.
A sample html document with inline style sheet is attached.
I'd be grateful for any guidance on this. Thank you.
Regards,
Grant Bailey
...
?xml version=1.0 encoding=iso-8859-1?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en
head
titleUntitled Document/title
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
/
style type=text/css
!--
* {margin: 0; padding: 0;}
body {position: relative; margin: 5em; height: 400px; outline: black
thin solid;}
h1 {margin-top: 1em; outline: black thin solid;}
#div_content {position: relative; outline: black thin solid;}
#div_alpha {position: absolute; top: 0; left: 0; outline: black thin
solid;}
#div_omega {position: relative; top: 0; left: 50%; outline: black thin
solid;}
--
/style
/head
body
div id=div_content
div id=div_alpha
h1I am the alpha/h1
/div
div id=div_omega
h1I am the omega/h1
/div
/div
/body
/html
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] Questions about browser renderings (CSS 2.1)
Hello, I'm hoping that some of you experts can answer three questions about browser renderings of certain elements. Question 1 -- I'm developing a page with a liquid layout that adapts to displays of various sizes; the page can be viewed at www.baileyandireland.com. The page renders as expected in all browsers except Opera, which is having a problem with the following CSS rule (refer to line 65 of the style sheet, Home.css): max-width: 50em; This rule is applied to a division called div_Main_content. The problem is that this division is being rendered about 2ems short of what it should be, as you can clearly see if you open the web page (index.css) in Opera. I'm surprised, since an earlier division of the page (called subdiv_Unit_title), which has the same rule applied (line 46 in the style sheet), behaves as expected. Could someone please advise me whether this problem constitutes a bug in Opera. Question Two Is anyone aware of restrictions in use of the 'overflow' property, specifically, whether browsers are supposed to interpret 'overflow' to cut off nested divisions? In the style sheet referenced above (Home.css), I have a wrapper division called div_Content that encloses all other content in the html file. If you apply the 'overflow: hidden' rule to div_Content (i.e. include line 27 of Home.css, currently commented out), only the first nested division (div_Banner) is displayed; the two sibling divisions of div_Banner (called div_Table_of_contents and div_Main_content respectively) are ignored. All of the browsers I have tried (Firefox, Chrome, Opera, Safari) display in the same way. I cannot understand this behaviour as the height of div_Content has not been restricted. Could someone please explain what is going on. Question Three -- I have applied the rule 'outline: thin solid black;' to the body element in order to see how each browser renders the body. All except Firefox place the divisions div_Table_of_contents and div_Main_content outside the body box (as I would expect as these divisions are absolutely positioned), whereas Firefox contains both divisions within the body box. Could someone please advise whether this is an error in Firefox's rendering of the page. Many thanks and regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] DHTML Menus
Kristine, This link might provide some guidance (although query whether respondents to the survey were typical web users rather than experts): http://www.w3schools.com/browsers/browsers_stats.asp Regards, Grant Bailey -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Kristine Cummins Sent: Wednesday, 18 February 2009 6:01 PM To: wsg@webstandardsgroup.org Subject: [WSG] DHTML Menus I've recently seen some arguments against the use of DHTML menus for accessibility issues. How much is this an issue.. What is the percentage of population that does not have javascript enabled? Any other thoughts on the topic? Thanks, Kristine *** 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 ***
