Re: [WSG] CSS challenge: make a li stays same bg color when cursor moves to its siblings
I tweaked the Javascript a bit and one line of CSS. I think this is what you
were trying to accomplish?http://jsbin.com/acori/16/
Many thanks! Yes it does.
$('#nav li ul li').hover(function()
It never occurs to me to target hover class. I thought when cursor moves away
from a li and move to its's siblings, the hover no longer applies to that li
class but the sibling where the cursor points to.
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] CSS challenge: make a li stays same bg color when cursor moves to its siblings
I am trying to achieve this via jQuery by adding a class as I don't think it's possible with CSS (but maybe one of the CSS3 selectors can doit?). http://jsbin.com/acori/15/ The menu is generated by the CMS system so there is restriction to adding new class directly to a specific menu item. It's a 3 level menu but the flyout starts from second level (2nd level menu 3). By default, the 1st level menu has a top-level class for anchor tag while 2nd and 3rd level don't have. What I want (and thought the easier way) to achieve is to target the top-level to find the 2nd level menu 3, so that I can add a current class for 2nd level menu 3, so that when flyout menu expanded, and when cursor moves to the third level, the 2nd level menu 3 has the same white background color as the hover does. I have this code in which the last line is how I want to add the current class. jQuery(#nav ulli).find(a.level-top li).parent(li).addClass(current) Thanks! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS challenge: make a li stays same bg color when cursor moves to its siblings
Not sure if this is exactly what you are looking for, but you can try
adding another selector to this code:
#nav .current,
#nav a:hover, #nav a:focus {
background-color:#fff!important;
color:#333;
}
Like this:
#nav .current,
#nav a:hover, #nav a:focus,
#nav ul li:hover a {
background-color:#fff!important;
color:#333;
}
Note that IE 6/7 don't support :hover on list items.
- Jon
On Tue, Apr 5, 2011 at 4:47 AM, tee weblis...@gmail.com wrote:
I am trying to achieve this via jQuery by adding a class as I don't think
it's possible with CSS (but maybe one of the CSS3 selectors can doit?).
http://jsbin.com/acori/15/
The menu is generated by the CMS system so there is restriction to adding new
class directly to a specific menu item. It's a 3 level menu but the flyout
starts from second level (2nd level menu 3).
By default, the 1st level menu has a top-level class for anchor tag while
2nd and 3rd level don't have. What I want (and thought the easier way) to
achieve is to target the top-level to find the 2nd level menu 3, so that
I can add a current class for 2nd level menu 3, so that when flyout menu
expanded, and when cursor moves to the third level, the 2nd level menu 3
has the same white background color as the hover does.
I have this code in which the last line is how I want to add the current
class.
jQuery(#nav ulli).find(a.level-top
li).parent(li).addClass(current)
Thanks!
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
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 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/
Hope it helps.
On Tue, Apr 5, 2011 at 6:38 PM, Jon Reece jon.re...@gmail.com wrote:
Not sure if this is exactly what you are looking for, but you can try
adding another selector to this code:
#nav .current,
#nav a:hover, #nav a:focus {
background-color:#fff!important;
color:#333;
}
Like this:
#nav .current,
#nav a:hover, #nav a:focus,
#nav ul li:hover a {
background-color:#fff!important;
color:#333;
}
Note that IE 6/7 don't support :hover on list items.
- Jon
On Tue, Apr 5, 2011 at 4:47 AM, tee weblis...@gmail.com wrote:
I am trying to achieve this via jQuery by adding a class as I don't think
it's possible with CSS (but maybe one of the CSS3 selectors can doit?).
http://jsbin.com/acori/15/
The menu is generated by the CMS system so there is restriction to adding
new class directly to a specific menu item. It's a 3 level menu but the
flyout starts from second level (2nd level menu 3).
By default, the 1st level menu has a top-level class for anchor tag
while 2nd and 3rd level don't have. What I want (and thought the easier way)
to achieve is to target the top-level to find the 2nd level menu 3, so
that I can add a current class for 2nd level menu 3, so that when
flyout menu expanded, and when cursor moves to the third level, the 2nd
level menu 3 has the same white background color as the hover does.
I have this code in which the last line is how I want to add the
current class.
jQuery(#nav ulli).find(a.level-top
li).parent(li).addClass(current)
Thanks!
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
--
Manny Blum
manny.b...@gmail.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] CSS variable navigational menu`
Hi,
I have the following navigational menu bar. The menu has multiple
parent menu items. For the sake of the example, I only provide the first menu
item. It has about five child menu items. This is a horizontal menu bar at the
top of the ASP.Net website. What currently happens is when a user hovers over
the Parent menu item, the child menu items appear below, horizontally, of
course. And each time, the child menu items appear to the far left. So the
problem is when we get to the 5th parent menu item, going across, hover over
it, the child menu items appear below towards the far left. So it cosmetically
looks wrong but also causes the user to further navigate their mouse to get to
the child items. Anyway to position the child menu items to appear directly
below the parents and not always to the far left?
Page.aspx:div id=container class=top_menuul id=nav
li class=suba href=#urlb style=width: 100px;Parent/b/a
ul style=display: none;lia
href='child1.aspx'Child 1/a/lilia
href='child2.apsx'Child 2/a/lilia
href='child3.aspx'Child 3/a/lilia
href='child4.aspx'Child 4/a/lilia
href='child5.aspx'Child 5/a/li/ul
/li
menu.css:#container {width:960px; height:20px; position:relative;}
#nav, #nav ul {padding:0; margin:0; width:960px; list-style-type:none;}
#nav li {float:left; text-align:center; }#nav li a {float:left;
text-decoration:none; font-family: Arial, Helvetica, sans-serif;
font-size:11px; color:#3d2e1c; }#nav li a b {float:left; height:30px;
line-height:28px; font-weight:bold; cursor:pointer; font-size:11px;
font-weight:bold;}#nav li.sub a b { border-bottom:solid 1px #00;}
#nav b.hover {color:#ff; background:url(../Images/line_footer.jpg)
no-repeat center bottom; }#nav i.hover {color:#ff;}#nav em.hover
{color:#080;}#nav ul ul ul a:hover {color:#080;
background:url(../Images/line_footer.jpg) no-repeat center bottom;}
#nav ul {display:none;}#nav ul {position:absolute; left:0; top:30px;
background:none; width:auto; border-top:solid 1px #00; height: 0px}#nav ul
li {float:left; position:relative; }#nav ul li a {display:block; padding:0 20px
0 10px; font-size:12px; line-height:25px; cursor:pointer; }#nav ul li a i
{display:block; font-style:normal; cursor:pointer;}#nav ul li a.sub {
background:url(../Images/line_footer.jpg) no-repeat center bottom;}
Thanks,Andy
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] CSS variable navigational menu`
On Sun, Jan 9, 2011 at 2:09 PM, Goku San gokus...@hotmail.com wrote:
I have the following navigational menu bar. The menu has multiple parent
menu items.
[snip]
What currently happens is when a user hovers over
the Parent menu item, the child menu items appear below, horizontally, of
course. And each time, the child menu items appear to the far left. So the
problem is when we get to the 5th parent menu item, going across, hover over
it, the child menu items appear below towards the far left. So it
cosmetically looks wrong but also causes the user to further navigate their
mouse to get to the child items. Anyway to position the child menu items to
appear directly below the parents and not always to the far left?
Make the parents the containing blocks for the absolute positioning of
the children:
#nav .sub {
position: relative
}
http://reference.sitepoint.com/css/containingblock
I hope you'll ensure that users who are not using a mouse (e.g. people
with certain
motor disabilities) can still access the content linked in the child items,
whether via deeper links on hub pages reached via parent items or by ensuring
that child menus are focusable and visible on focus.
Food for thought:
http://www.w3.org/TR/WCAG20/#keyboard-operation
http://www.uie.com/articles/users_decide_first/
http://www.456bereastreet.com/archive/200705/accessible_expanding_and_collapsing_menu/
http://labs.benjaminhawkeslewis.com/rapid-access-hover-menu.html
--
Benjamin Hawkes-Lewis
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] CSS variable navigational menu`
On Jan 9, 2011, at 7:04 AM, Benjamin Hawkes-Lewis wrote:
Make the parents the containing blocks for the absolute positioning of
the children:
#nav .sub {
position: relative
}
http://reference.sitepoint.com/css/containingblock
I hope you'll ensure that users who are not using a mouse (e.g. people
with certain
motor disabilities) can still access the content linked in the child items,
whether via deeper links on hub pages reached via parent items or by ensuring
that child menus are focusable and visible on focus.
Furthermore, you should get rid of all display:none in your inline style and in
the CSS.
ul style=display: none;
#nav ul {display:none;}
These two essentially are the same. I am assuming the menu is controlled by a
javascript, best practise is to use the absolute positioning to control
submenu and use the toogle or mouseover to trigger the sub-level. Judging from
the #nav ul, it seems to be the case, but the display none overwrites the rule
below.
#nav ul {position:absolute; left:0; top:30px; background:none; width:auto;
border-top:solid 1px #00; height: 0px}
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] CSS variable navigational menu`
These two essentially are the same. I am assuming the menu is controlled by a javascript, best practise is to use the absolute positioning to control submenu and use the toogle or mouseover to trigger the sub-level. I'm not sure this is considered best practice as keyboard users would have to go through all the links in the menu before reaching the last one. These two examples show the difference between styling the sub menus off-screen or via display:none - http://www.tjkdesign.com/articles/new_drop_down/default.asp - http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS variable navigational menu`
On Jan 9, 2011, at 10:24 AM, Thierry Koblentz wrote: These two essentially are the same. I am assuming the menu is controlled by a javascript, best practise is to use the absolute positioning to control submenu and use the toogle or mouseover to trigger the sub-level. I'm not sure this is considered best practice as keyboard users would have to go through all the links in the menu before reaching the last one. I am a die-hard superfish menu fan :) Fully aware of the argument. IMHO, this issue is like chicken and egg which comes first tiring and constantly on-going debate, which I have long given up :-) IMHO, this is a fundamental issue that should be fixed by the browser (with arrow keys, and with combination of ARIA perhaps?) that allow satisfying both, not by one school of developers who strongly believe in his way is better (who are you to dictate I wouldn't want to tab through all links and block me from accessing all the sub-links! Damn! Talk about freedom of accessibility!), and another school of developers believing her way is better (and who are you to dictate me to tab through all links - I may not want to do that 6 days in a row, but on Sunday I want the choice to be able to tab through all links just because it's a god-given fundamental right). Having said that, I re-word my sentence: One of the best practises, and me, as a Superfish Menu fan thinks, is to use the absolute positioning to control submenu. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS variable navigational menu`
Hi,
Thanks for your responses! I added the, #nav .sub {position:
relative;}, removed the {display:none;} from my CSS file and from the ASPX
page. Still not getting a solution. The #nav .sub {position: relative;} helped
because it positioned the child elements directly below the parent. However, it
repeated the next child element in the group below the above child element, and
the same for the next one, in a vertical formate. I don't need it to do that. I
need it to display the whole group of child elements going across horizontally
directly below the parent. So take the following as an example:
A B C 1 2 3
User hovers over Parent A, Childs 1, 2, and 3 will display directly below A
going across. I'm not good with Java. I believe this site and menu system does
use some Java. I'm trying to stay away from it and achieve this functionality
through the use of CSS.
Anyway to make this possible?
Thanks guys,Andy
Subject: Re: [WSG] CSS variable navigational menu`
From: weblis...@gmail.com
Date: Sun, 9 Jan 2011 09:40:28 -0800
To: wsg@webstandardsgroup.org
On Jan 9, 2011, at 7:04 AM, Benjamin Hawkes-Lewis wrote:
Make the parents the containing blocks for the absolute positioning of
the children:
#nav .sub {
position: relative
}
http://reference.sitepoint.com/css/containingblock
I hope you'll ensure that users who are not using a mouse (e.g. people
with certain
motor disabilities) can still access the content linked in the child items,
whether via deeper links on hub pages reached via parent items or by
ensuring
that child menus are focusable and visible on focus.
Furthermore, you should get rid of all display:none in your inline style and
in the CSS.
ul style=display: none;
#nav ul {display:none;}
These two essentially are the same. I am assuming the menu is controlled by a
javascript, best practise is to use the absolute positioning to control
submenu and use the toogle or mouseover to trigger the sub-level. Judging
from the #nav ul, it seems to be the case, but the display none overwrites
the rule below.
#nav ul {position:absolute; left:0; top:30px; background:none; width:auto;
border-top:solid 1px #00; height: 0px}
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] CSS variable navigational menu`
On Jan 9, 2011, at 11:42 AM, Goku San wrote:
Hi,
Thanks for your responses! I added the, #nav .sub {position:
relative;}, removed the {display:none;} from my CSS file and from the ASPX
page. Still not getting a solution. The #nav .sub {position: relative;}
helped because it positioned the child elements directly below the parent.
However, it repeated the next child element in the group below the above
child element, and the same for the next one, in a vertical formate. I don't
need it to do that. I need it to display the whole group of child elements
going across horizontally directly below the parent. So take the following as
an example:
A B C
1 2 3
User hovers over Parent A, Childs 1, 2, and 3 will display directly below A
going across. I'm not good with Java. I believe this site and menu system
does use some Java. I'm trying to stay away from it and achieve this
functionality through the use of CSS.
Anyway to make this possible?
Thanks guys,
Andy
In order to help you better, maybe you can setup a sample page by copying over
the menu (not just the first set) to a html page along with the script
(javascript isn't the same as java) and CSS?
There is pure CSS drop-down menu, but if you need to support IE browsers, a
javascript ones that controls the hover/mouseover/toggle behavior is a better
option.
Superfish menu, which I know pretty well, is a reliable open source menu system
that works in all browsers including IE6, but there are many other options,
such as the two from Thierry. Superfish require extra jQuery script though.
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] CSS variable navigational menu`
On 1/9/11 10:24 AM, Thierry Koblentz wrote: These two essentially are the same. I am assuming the menu is controlled by a javascript, best practise is to use the absolute positioning to control submenu and use the toogle or mouseover to trigger the sub-level. I'm not sure this is considered best practice as keyboard users would have to go through all the links in the menu before reaching the last one. These two examples show the difference between styling the sub menus off-screen or via display:none - http://www.tjkdesign.com/articles/new_drop_down/default.asp - http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp +1 I have adapted the first of these very successfully, even adding fancy fade effects for those who have scripting enabled. Very adaptive, and does exactly what you want, I think. (Assuming you only have few sub-menu items, as your example indicates,,,) Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS lists
On 1/7/11 8:10 PM, Thierry Koblentz wrote: Hi all, Besides the CSS-D list, which CSS lists would you recommend subscribing to? Thanks, -- Thierry These come to mind??? The appropriate w3c list, and... http://www.sitepoint.com/forums/ http://csscreator.com/ http://bytes.com/ Best, ~d -- http://chelseacreekstudio.com/ http://chelseacreekstudio.com/fa/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS lists
These come to mind??? The appropriate w3c list, and... http://www.sitepoint.com/forums/ http://csscreator.com/ http://bytes.com/ Thanks David, but I'm not a big fan of fora (I prefer mailing lists). Even though a forum like sitepoint has great threads (i.e. Test Your CSS Skills). Check this demo: http://www.pmob.co.uk/temp/swap-vertical-divs-around3.htm Pretty cool isn't? -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] CSS lists
Hi all, Besides the CSS-D list, which CSS lists would you recommend subscribing to? Thanks, -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] CSS-101
http://www.css-101.org Happy New Year! Bonne Année! -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS-101
Interesting but not well viewd with android. Happy new year to all readers. Diego Thierry Koblentz thierry.koble...@gmail.com ha scritto: http://www.css-101.org Happy New Year! Bonne Année! -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS-101
On Sun, Jan 2, 2011 at 2:23 AM, Diego La Monica m...@diegolamonica.infowrote: Interesting but not well viewd with android. ya, read it using the browser on your computer. :p awesome work Thierry, though i have listen to your talk this helps me to understand better. -- regards, Prashanth twitter: munichlinux blog: honeycode.in irc: munichlinux, JSLint, munichpython. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS-101
@Diego: Smartphones are not the best device to use here since the idea behind the demo pages is to allow people to edit/tweak CSS declarations via their favorite dev tool. The goal is to make people get their hands under the hood to do their own investigation - to find out what the simplest change may trigger and why. @Prashanth: This last July? Wow! It's a small world :) Thanks for your feedback -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] css
I did a menu like this at wpsmedicare.com. The trick is to use a negative
margin to hide the menu on hover. You can look at the master.css file to see
the full code.
Debbie
-Original Message-
From: PurencoolGmail
Sent: Sunday, November 14, 2010 10:18 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] css
hi
http://203.193.216.214/
I have an issue with this menu it works fine but the client has asked
when you hover over
top menu that the sub menu becomes visible and the stays there until you
hover over than
part of the top menu. If I was to move the mouse anywhere on the screen
the menu sub menu
will stay visible.
I was thinking hover a {display:block} any help would be appreciated.
But I am not sure how to
do this in css.
Purencool
***
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
On Mon, Nov 15, 2010 at 1:18 AM, PurencoolGmail purenc...@gmail.com wrote: hi http://203.193.216.214/ FYI... I have an issue with the sub menus staying when I roll off the main menu items in Safari 5 Mac. If I roll off the main items onto the sub menu items the submenu disappears. Possibly a gap between the bottom of main menu items and top of sub menu items. -- 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 ***
RE: [WSG] css
http://203.193.216.214/
I have an issue with this menu it works fine but the client has asked
when you hover over
top menu that the sub menu becomes visible and the stays there until
you
hover over than
part of the top menu. If I was to move the mouse anywhere on the screen
the menu sub menu
will stay visible.
I was thinking hover a {display:block} any help would be appreciated.
But I am not sure how to
do this in css.
This can't be done with CSS alone, but before you try doing it with JS you
may want to ask yourself if that would not create serious usability issues.
I think it would be better - on page load - to show the sub-menu relevant to
*the* page (the top section).
--
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
***
[WSG] css
hi
http://203.193.216.214/
I have an issue with this menu it works fine but the client has asked
when you hover over
top menu that the sub menu becomes visible and the stays there until you
hover over than
part of the top menu. If I was to move the mouse anywhere on the screen
the menu sub menu
will stay visible.
I was thinking hover a {display:block} any help would be appreciated.
But I am not sure how to
do this in css.
Purencool
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] css
On 15 Nov 2010, at 06:18, PurencoolGmail wrote:
I have an issue with this menu it works fine but the client has asked when
you hover over
Shame: http://www.cennydd.co.uk/2010/end-hover-abuse-now/
top menu that the sub menu becomes visible and the stays there until you
hover over than
part of the top menu. If I was to move the mouse anywhere on the screen the
menu sub menu
will stay visible.
I was thinking hover a {display:block} any help would be appreciated. But I
am not sure how to
do this in css.
If you are going to do this, then do it in JavaScript.
While it is clever to make content appear and disappear in CSS, JavaScript is
much better suited to this type of task.
--
David Dorward
http://dorward.me.uk
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] CSS rollovers for images + Feedback Sources??
Disabled people should to be able to use websites. Replacing XHTML with JavaScript can cause accessibility issues. Accessibility is the research and practice of making websites usable to as diverse a user base as possible, including people with hearing, visual and mobility disabilities, by removing obstacles and offering alternatives. (Loranger Nielsen 2006) WAI (Web Accessibility Initiative) develops accessibility guidelines, which are generally internationally accepted. Online tools for testing website accessibility are available from them. (W3C, 2009) WAI also suggests manual testing to assess accessibility using text-based browsers, such as Lynx. Lynx emulates the environment of screen readers, used by sight-disabled users. Testing the slideshow like this would tell us how accessible it is. Also, feedback from involving disabled testers could help. Developers can access accessibility during testing by turning CSS and JavaScript off in their browsers to determine what alternatives are available. This could guide us to adding to hyperlink navigation with a dynamic menu, rather than replacing it. Additionally, we could also ask the RNIB to do an accessibility assessment for us. A Royal National Institute of Blind People See it Right audit would use human auditors to help us. (RNIB, 2009) Nearly any code can be implemented within the law. We can ensure alternatives are available for all disabled people. Why and to what level we should do this can be seen from different perspectives. Firstly, the Disability Discrimination Act (1995) is British law. Web-designers have a duty to advise owners of any website they work on to make reasonable efforts to provide services, of the same standard for the disabled, as you provide for the public. Secondly, it makes business sense. 10% of internet users have a disability. If you have a shop and your door only opens for 9 in 10 of your customers you effectively have closed shop to 1 in 10. However, making your site accessible will cost designers time and thus the clients money. There are few presidents in British legal history of websites being taken to court and charged under the DDA (2005). So reasonable efforts, whatever that means, may suffice. Additionally, if your website is in-accessible does that really mean 10% of people can't use it? There are no concrete figures relating to internet users who require fully accessible websites. So, we could wait until the site is more popular to make it financially viable. Kevin Ireson MD Hotels in London Ltd http://www.hotels-london-hotel.com Hotels in Edinburgh Ltd http://www.hotels-edinburgh-scotland-hotels.com From: Nick Stone Sent: Wednesday, October 20, 2010 9:13 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] CSS rollovers for images + Feedback Sources?? Leslie, This is such valuable feedback. Thanks very much! Does anyone have suggestions on how to obtain website usability feedback from various members of the disabled community? Thanks in advance, Nick -- Nick Stone, MBA SEO, Web Accessibility, Web Development http://nick-stone.com/ Good idea, but please remember that for someone with problems of co-ordination or fine muscle control, hovering can be extremely difficult. I've encountered javascript image galleries which work like this, and on a bad day I find them completely unusable. Lesley On 19/10/10 21:13, cat soul wrote: Any thoughts on using CSS hover properties to show larger images? The scenario I'm envisioning is one where you'd have small thumbnails of samples, and hovering the mouse over them would invoke a hover state in which a larger version of that same image would appear...Larger meaning 400x600 pixels, or in that neighborhood. Is this not wise from a coding perspective? How about usability? Do web page visitors not expect this kind of behavior..would it be confusing to them as to what they're supposed to do, or what to expect? I'm wanting to use CSS to do what javascript rollovers do, only without the javascript. thanks for any feedback or opinions. cs This email has been scanned by Netintelligence http://www.netintelligence.com/email *** 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 rollovers for images?
An excellent and very up to date point about accessibility. From: tee Sent: Wednesday, October 20, 2010 1:57 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] CSS rollovers for images? Caution with the use of hover for such purpose if you also want touchscreen device user able to use it. In regards of touchscreen, this article explains it better than I can do. http://trentwalton.com/2010/07/05/non-hover/ tee On Oct 19, 2010, at 1:46 PM, Joseph Taylor wrote: You could certainly do that with CSS. You'll want to add javascript to control how the image shows and fades, positioning etc. For maximum accessibility, have the thumbnail link to the main image, then have your Javscript/CSS hijack the link and show the image. Everyone wins. 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 10/19/10 4:13 PM, cat soul wrote: Any thoughts on using CSS hover properties to show larger images? The scenario I'm envisioning is one where you'd have small thumbnails of samples, and hovering the mouse over them would invoke a hover state in which a larger version of that same image would appear...Larger meaning 400x600 pixels, or in that neighborhood. Is this not wise from a coding perspective? How about usability? Do web page visitors not expect this kind of behavior..would it be confusing to them as to what they're supposed to do, or what to expect? I'm wanting to use CSS to do what javascript rollovers do, only without the javascript. thanks for any feedback or opinions. cs This email has been scanned by Netintelligence http://www.netintelligence.com/email *** 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 rollovers for images?
Good idea, but please remember that for someone with problems of co-ordination or fine muscle control, hovering can be extremely difficult. I've encountered javascript image galleries which work like this, and on a bad day I find them completely unusable. Lesley On 19/10/10 21:13, cat soul wrote: Any thoughts on using CSS hover properties to show larger images? The scenario I'm envisioning is one where you'd have small thumbnails of samples, and hovering the mouse over them would invoke a hover state in which a larger version of that same image would appear...Larger meaning 400x600 pixels, or in that neighborhood. Is this not wise from a coding perspective? How about usability? Do web page visitors not expect this kind of behavior..would it be confusing to them as to what they're supposed to do, or what to expect? I'm wanting to use CSS to do what javascript rollovers do, only without the javascript. thanks for any feedback or opinions. cs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS rollovers for images?
Yes, and while we're on the topic of things that won't work on phones and iPadsis there anything else we need to know about that also won't play nice with those two handheld platforms? Is a different design perspective in order now? Do we now design for the iPad and for phones, and have desktop and notebook users simply have that as what they see? or are we back to sniffer scripts and multiple versions of our pages? cs On Oct 20, 2010, at 12:44 AM, Kevin Ireson wrote: An excellent and very up to date point about accessibility. From: tee Sent: Wednesday, October 20, 2010 1:57 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] CSS rollovers for images? Caution with the use of hover for such purpose if you also want touchscreen device user able to use it. In regards of touchscreen, this article explains it better than I can do. http://trentwalton.com/2010/07/05/non-hover/ tee On Oct 19, 2010, at 1:46 PM, Joseph Taylor wrote: You could certainly do that with CSS. You'll want to add javascript to control how the image shows and fades, positioning etc. For maximum accessibility, have the thumbnail link to the main image, then have your Javscript/CSS hijack the link and show the image. Everyone wins. 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 10/19/10 4:13 PM, cat soul wrote: Any thoughts on using CSS hover properties to show larger images? The scenario I'm envisioning is one where you'd have small thumbnails of samples, and hovering the mouse over them would invoke a hover state in which a larger version of that same image would appear...Larger meaning 400x600 pixels, or in that neighborhood. Is this not wise from a coding perspective? How about usability? Do web page visitors not expect this kind of behavior..would it be confusing to them as to what they're supposed to do, or what to expect? I'm wanting to use CSS to do what javascript rollovers do, only without the javascript. thanks for any feedback or opinions. cs This email has been scanned by Netintelligence http://www.netintelligence.com/email *** 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] CSS rollovers for images?
Good questions. I have yet to see definitive answers for most of these questions. I've been thinking on this constantly as I try to alter my work flow to a format that will please all the devices. Some things haven't changed: Start with clean HTML that'll work on ANYTHING including JAWS etc. Build upwards with your CSS from IE6 to modern browsers (or downwards from modern browsers to IE6) Use javascript to add behaviors to your HTML/CSS in a progressive fashion. The touch devices add a new dimension to the workflow. They may change the way you approach some items on a page (like a multi select widget) and you now have to pay more attention to the :active attribute in your CSS as that'll react to a touch vs. :hover - no biggie, right? For the most part, the touch devices all use modern browsers which is pretty cool. I made an iphone version of my site using media queries, which was a lot of fun to do. The touch devices open a new horizon - no IE!!! 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 10/20/10 10:44 AM, cat soul wrote: Yes, and while we're on the topic of things that won't work on phones and iPadsis there anything else we need to know about that also won't play nice with those two handheld platforms? Is a different design perspective in order now? Do we now design for the iPad and for phones, and have desktop and notebook users simply have that as what they see? or are we back to sniffer scripts and multiple versions of our pages? cs On Oct 20, 2010, at 12:44 AM, Kevin Ireson wrote: An excellent and very up to date point about accessibility. *From:* tee mailto:weblis...@gmail.com *Sent:* Wednesday, October 20, 2010 1:57 AM *To:* wsg@webstandardsgroup.org mailto:wsg@webstandardsgroup.org *Subject:* Re: [WSG] CSS rollovers for images? Caution with the use of hover for such purpose if you also want touchscreen device user able to use it. In regards of touchscreen, this article explains it better than I can do. http://trentwalton.com/2010/07/05/non-hover/ tee On Oct 19, 2010, at 1:46 PM, Joseph Taylor wrote: You could certainly do that with CSS. You'll want to add javascript to control how the image shows and fades, positioning etc. For maximum accessibility, have the thumbnail link to the main image, then have your Javscript/CSS hijack the link and show the image. Everyone wins. 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 10/19/10 4:13 PM, cat soul wrote: Any thoughts on using CSS hover properties to show larger images? The scenario I'm envisioning is one where you'd have small thumbnails of samples, and hovering the mouse over them would invoke a hover state in which a larger version of that same image would appear...Larger meaning 400x600 pixels, or in that neighborhood. Is this not wise from a coding perspective? How about usability? Do web page visitors not expect this kind of behavior..would it be confusing to them as to what they're supposed to do, or what to expect? I'm wanting to use CSS to do what javascript rollovers do, only without the javascript. thanks for any feedback or opinions. cs This email has been scanned by Netintelligence http://www.netintelligence.com/email *** 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 mailto: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] CSS rollovers for images?
On 20/10/2010 10:44, cat soul wrote: Yes, and while we're on the topic of things that won't work on phones and iPadsis there anything else we need to know about that also won't play nice with those two handheld platforms? A gentle reminder that iDevices are not the only platform that has touch interfaces, and that Mobile Safari is not the only browser on devices with touch interfaces. Interestingly enough, the old problems of hover/mouse based interactions that we've been preaching against for ages with regards to (keyboard) accessibility have now reappeared in terms of touchscreen interfaces, where hovering doesn't work (reliably - some devices have weird heuristics where a click can be interpreted as a hover in certain conditions). P -- Patrick H. Lauke __ re∑dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com | http://flickr.com/photos/redux/ __ twitter: @patrick_h_lauke | skype: patrick_h_lauke __ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS rollovers for images?
will there be/can there be a new command/property which can be read by each device the way it needs to be? could there be soon a touch command so that you could write the code like: hover, do this. If no hover, then touch, do this. If no touch, then __ and do this ? On Oct 20, 2010, at 8:45 AM, Patrick H. Lauke wrote: Interestingly enough, the old problems of hover/mouse based interactions that we've been preaching against for ages with regards to (keyboard) accessibility have now reappeared in terms of touchscreen interfaces, where hovering doesn't work (reliably - some devices have weird heuristics where a click can be interpreted as a hover in certain conditions). *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS rollovers for images?
Well, you certainly busted wide open a huge can of worms, Joseph, and I salute you for it. the one comfy thing in that, to me, is the no IE part. Starting with clean HTML is easy enough, but everything else is squarely in the don't count on it category..revealing the lick and a promise nature of CSS and Jscript...not that they are not worthy tools; they simply can't be counted upon to be properly supported... but neither can HTML, which, IIRC, is the reason for CSS. Yanno, folks...I am smelling the need for some kind of revolution here...That standards do not work reliably doesn't help anyone..not client, not end-user, not author/designer/developer. Please don't groan, but my background is in Print. Luckily, I never had to write PostScript. Illustrator, PS, Quark, and later InDesign all do a fine job of it. but just imagine if I DID have to write the post script, and to know variations for every single printing device?!?! IMHO, we need some kind of lingua franca that works for all of these electronic gizmos once and for all... but...things have been set in motion, and perhaps it's going to remain a bucket of stinky fish guts into the foreseeable future. cs On Oct 20, 2010, at 8:16 AM, Joseph Taylor wrote: Good questions. I have yet to see definitive answers for most of these questions. I've been thinking on this constantly as I try to alter my work flow to a format that will please all the devices. Some things haven't changed: Start with clean HTML that'll work on ANYTHING including JAWS etc. Build upwards with your CSS from IE6 to modern browsers (or downwards from modern browsers to IE6) Use javascript to add behaviors to your HTML/CSS in a progressive fashion. The touch devices add a new dimension to the workflow. They may change the way you approach some items on a page (like a multi select widget) and you now have to pay more attention to the :active attribute in your CSS as that'll react to a touch vs. :hover - no biggie, right? For the most part, the touch devices all use modern browsers which is pretty cool. I made an iphone version of my site using media queries, which was a lot of fun to do. The touch devices open a new horizon - no IE!!! 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 10/20/10 10:44 AM, cat soul wrote: Yes, and while we're on the topic of things that won't work on phones and iPadsis there anything else we need to know about that also won't play nice with those two handheld platforms? Is a different design perspective in order now? Do we now design for the iPad and for phones, and have desktop and notebook users simply have that as what they see? or are we back to sniffer scripts and multiple versions of our pages? cs On Oct 20, 2010, at 12:44 AM, Kevin Ireson wrote: An excellent and very up to date point about accessibility. From: tee Sent: Wednesday, October 20, 2010 1:57 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] CSS rollovers for images? Caution with the use of hover for such purpose if you also want touchscreen device user able to use it. In regards of touchscreen, this article explains it better than I can do. http://trentwalton.com/2010/07/05/non-hover/ tee On Oct 19, 2010, at 1:46 PM, Joseph Taylor wrote: You could certainly do that with CSS. You'll want to add javascript to control how the image shows and fades, positioning etc. For maximum accessibility, have the thumbnail link to the main image, then have your Javscript/CSS hijack the link and show the image. Everyone wins. 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 10/19/10 4:13 PM, cat soul wrote: Any thoughts on using CSS hover properties to show larger images? The scenario I'm envisioning is one where you'd have small thumbnails of samples, and hovering the mouse over them would invoke a hover state in which a larger version of that same image would appear...Larger meaning 400x600 pixels, or in that neighborhood. Is this not wise from a coding perspective? How about usability? Do web page visitors not expect this kind of behavior..would it be confusing to them as to what they're supposed to do, or what to expect? I'm wanting to use CSS to do what javascript rollovers do, only without the javascript. thanks for any feedback or opinions. cs This email has been scanned by Netintelligence http://www.netintelligence.com/email *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join
Re: [WSG] CSS rollovers for images?
Things are definitely better now than they once were in the world of browsers. Sure, we have a number of IE's of varying inability to deal with plus a bunch of others. Sure, we're constantly in a state of it doesn't work on everything yet. Sure, not one tool we use can be relied on 100% of the time. But We finally have an environment where standards can flourish. Browser competition exists again. So much so that Microsft had no choice but to join in. This is good. We have new toys like CSS3 that create enough excitement that browsers are scrambling to handle them. While I've been continuously disappointed for the last decade on standards adoption etc, I remain optimistic that the future is bright. 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 10/20/10 12:11 PM, cat soul wrote: Well, you certainly busted wide open a huge can of worms, Joseph, and I salute you for it. the one comfy thing in that, to me, is the no IE part. Starting with clean HTML is easy enough, but everything else is squarely in the don't count on it category..revealing the lick and a promise nature of CSS and Jscript...not that they are not worthy tools; they simply can't be counted upon to be properly supported... but neither can HTML, which, IIRC, is the reason for CSS. Yanno, folks...I am smelling the need for some kind of revolution here...That standards do not work reliably doesn't help anyone..not client, not end-user, not author/designer/developer. Please don't groan, but my background is in Print. Luckily, I never had to write PostScript. Illustrator, PS, Quark, and later InDesign all do a fine job of it. but just imagine if I DID have to write the post script, and to know variations for every single printing device?!?! IMHO, we need some kind of lingua franca that works for all of these electronic gizmos once and for all... but...things have been set in motion, and perhaps it's going to remain a bucket of stinky fish guts into the foreseeable future. cs On Oct 20, 2010, at 8:16 AM, Joseph Taylor wrote: Good questions. I have yet to see definitive answers for most of these questions. I've been thinking on this constantly as I try to alter my work flow to a format that will please all the devices. Some things haven't changed: Start with clean HTML that'll work on ANYTHING including JAWS etc. Build upwards with your CSS from IE6 to modern browsers (or downwards from modern browsers to IE6) Use javascript to add behaviors to your HTML/CSS in a progressive fashion. The touch devices add a new dimension to the workflow. They may change the way you approach some items on a page (like a multi select widget) and you now have to pay more attention to the :active attribute in your CSS as that'll react to a touch vs. :hover - no biggie, right? For the most part, the touch devices all use modern browsers which is pretty cool. I made an iphone version of my site using media queries, which was a lot of fun to do. The touch devices open a new horizon - no IE!!! 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 10/20/10 10:44 AM, cat soul wrote: Yes, and while we're on the topic of things that won't work on phones and iPadsis there anything else we need to know about that also won't play nice with those two handheld platforms? Is a different design perspective in order now? Do we now design for the iPad and for phones, and have desktop and notebook users simply have that as what they see? or are we back to sniffer scripts and multiple versions of our pages? cs On Oct 20, 2010, at 12:44 AM, Kevin Ireson wrote: An excellent and very up to date point about accessibility. *From:* tee mailto:weblis...@gmail.com *Sent:* Wednesday, October 20, 2010 1:57 AM *To:* wsg@webstandardsgroup.org mailto:wsg@webstandardsgroup.org *Subject:* Re: [WSG] CSS rollovers for images? Caution with the use of hover for such purpose if you also want touchscreen device user able to use it. In regards of touchscreen, this article explains it better than I can do. http://trentwalton.com/2010/07/05/non-hover/ tee On Oct 19, 2010, at 1:46 PM, Joseph Taylor wrote: You could certainly do that with CSS. You'll want to add javascript to control how the image shows and fades, positioning etc. For maximum accessibility, have the thumbnail link to the main image, then have your Javscript/CSS hijack the link and show the image. Everyone wins. Joseph R. B. Taylor /Web Designer / Developer/ -- Sites by Joe, LLC /Clean, Simple and Elegant Web Design/ Phone: (609) 335-3076 Web: http
[WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)
On 20 Oct 2010, at 16:59, cat soul wrote: will there be/can there be a new command/property which can be read by each device the way it needs to be? could there be soon a touch command so that you could write the code like: hover, do this. If no hover, then touch, do this. If no touch, then __ and do this We shouldn't need it. We have :hover which can be thought of When the user is potentially about to activate something and we have :active which is When the user is activating something. That should be enough until you start trying to use :hover for doing things beyond indicating the possibility of activation, and one you start doing that … http://www.cennydd.co.uk/2010/end-hover-abuse-now/ -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS rollovers for images?
From: Patrick H. Lauke re...@splintered.co.uk On 20/10/2010 10:44, cat soul wrote: Yes, and while we're on the topic of things that won't work on phones and iPadsis there anything else we need to know about that also won't play nice with those two handheld platforms? A gentle reminder that iDevices are not the only platform that has touch interfaces, and that Mobile Safari is not the only browser on devices with touch interfaces. Interestingly enough, the old problems of hover/mouse based interactions that we've been preaching against for ages with regards to (keyboard) accessibility have now reappeared in terms of touchscreen interfaces, where hovering doesn't work (reliably - some devices have weird heuristics where a click can be interpreted as a hover in certain conditions). Touch devices can be served targeted CSS via media queries. Just something to keep in mind :-) -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)
Cat, That's the holy trinity of web design: content, presentation and behavior. ;) 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 10/20/10 1:19 PM, cat soul wrote: I thank you for that link, David. The picture I am developing now is this: HTML and CSS should be used strictly for content, structure and formatting. *Behaviors* are best left to things like Javascript. Are these two statements ones that most here can buy into? Are they fair statements, accurate reflections of practice and real-world usage? IOW, there are things we *can* do, and out of that, there are things we ought do, or ought not do, based on the demonstrable. cs On Oct 20, 2010, at 9:46 AM, David Dorward wrote: On 20 Oct 2010, at 16:59, cat soul wrote: will there be/can there be a new command/property which can be read by each device the way it needs to be? could there be soon a touch command so that you could write the code like: hover, do this. If no hover, then touch, do this. If no touch, then __ and do this We shouldn't need it. We have :hover which can be thought of When the user is potentially about to activate something and we have :active which is When the user is activating something. That should be enough until you start trying to use :hover for doing things beyond indicating the possibility of activation, and one you start doing that … http://www.cennydd.co.uk/2010/end-hover-abuse-now/ -- 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 *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)
Help me if I mis-interpret the writer's fine article, but this pertains to Javascript rollovers, too. The end user doesn't know and doesn't care whether that thing popping up was a CSS Hover, or a Javascript rollover. S/he only knows that, by innocently mousing around, something popped up without his/her deciding to actively invoke the popping up her/himself. so maybe these rollovers, when they do ANYTHING besides indicate a clickable thing, are passe, amateurish techniques associated with the earlier days of the internet when the most cool thing was stuff happening. Now we're all over it..we've seen it, and we are back to function, information, usability, speed... On Oct 20, 2010, at 9:46 AM, David Dorward wrote: That should be enough until you start trying to use :hover for doing things beyond indicating the possibility of activation, and one you start doing that … http://www.cennydd.co.uk/2010/end-hover- abuse-now/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)
Well, I am down with that..I never did care for the jumpy, spinny, whizzy things... As a print designer, I'm all about good design, good typography, quality imagery and clear communication. however, you sometimes get the idea that if you don't pay obeisance to that fashion (jumpy, spinny, whizzy), you'll be ignored and marginalized in favor of those whose sites are a multi-sensory fantasmatron of motion, speed and sounds. However, books have been captivating people for centuries and they just sit there until you pick them up and use them. I would be happy to have none of that silly stuff on my page, but then I get told my site looks a bit dated. cs On Oct 20, 2010, at 10:40 AM, Joseph Taylor wrote: Cat, That's the holy trinity of web design: content, presentation and behavior. ;) 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 10/20/10 1:19 PM, cat soul wrote: I thank you for that link, David. The picture I am developing now is this: HTML and CSS should be used strictly for content, structure and formatting. *Behaviors* are best left to things like Javascript. Are these two statements ones that most here can buy into? Are they fair statements, accurate reflections of practice and real- world usage? IOW, there are things we *can* do, and out of that, there are things we ought do, or ought not do, based on the demonstrable. cs On Oct 20, 2010, at 9:46 AM, David Dorward wrote: On 20 Oct 2010, at 16:59, cat soul wrote: will there be/can there be a new command/property which can be read by each device the way it needs to be? could there be soon a touch command so that you could write the code like: hover, do this. If no hover, then touch, do this. If no touch, then __ and do this We shouldn't need it. We have :hover which can be thought of When the user is potentially about to activate something and we have :active which is When the user is activating something. That should be enough until you start trying to use :hover for doing things beyond indicating the possibility of activation, and one you start doing that … http://www.cennydd.co.uk/2010/end- hover-abuse-now/ -- 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 *** *** 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, :hover and touch screen devices (Was: CSS rollovers for images?)
On 10/20/10 10:19 AM, cat soul wrote: The picture I am developing now is this: HTML and CSS should be used strictly for content, structure and formatting. *Behaviors* are best left to things like Javascript. But it's not that cut and dried -- CSS has always had behaviors, e.g. :hover, :focus, as well. so maybe these rollovers, when they do ANYTHING besides indicate a clickable thing, are passe, amateurish techniques ... Now we're all over it..we've seen it, and we are back to function, information, usability, speed... And maybe providing expanded affordances through hover behaviors is totally appropriate in some circumstances, to deliver exactly those benefits. :-) YMMV, -- Hassan Schroeder - has...@webtuitive.com webtuitive design === (+1) 408-621-3445 === http://webtuitive.com twitter: @hassan dream. code. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)
I agree thoroughly, Hassan. Yet as this is a best-practices discussion and group, and since we've been hearing that these things A) don't always work and B) aren't always well-received by end users, we're left with a need. And that need is to know: out of the universe of what we can do, what ought we do to ensure as universal an experience as possible? cs On Oct 20, 2010, at 11:26 AM, Hassan Schroeder wrote: But it's not that cut and dried -- CSS has always had behaviors, e.g. :hover, :focus, as well. so maybe these rollovers, when they do ANYTHING besides indicate a clickable thing, are passe, amateurish techniques ... Now we're all over it..we've seen it, and we are back to function, information, usability, speed... And maybe providing expanded affordances through hover behaviors is totally appropriate in some circumstances, to deliver exactly those benefits. :-) *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)
On Wed, Oct 20, 2010 at 1:42 PM, cat soul cats...@thinkplan.org wrote: I agree thoroughly, Hassan. Yet as this is a best-practices discussion and group, and since we've been hearing that these things A) don't always work and B) aren't always well-received by end users, we're left with a need. And that need is to know: out of the universe of what we can do, what ought we do to ensure as universal an experience as possible? progressive enhancement is what you ought to do. and to answer the question if the experience needs to be same universally we have the answer right here: http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/ -- Jason Arnold http://www.jasonarnold.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)
On 10/20/10 11:42 AM, cat soul wrote: I agree thoroughly, Hassan. Yet as this is a best-practices discussion and group, and since we've been hearing that these things A) don't always work and B) aren't always well-received by end users, we're left with a need. And that need is to know: out of the universe of what we can do, what ought we do to ensure as universal an experience as possible? I don't see any such need. Every site or application needs to be evaluated in terms of the expected audience. Testing with real users is essential, but you can still reasonably start with assumptions that differ depending on whether you're building e.g. an intranet inventory-management system vs a public lolcats-haiku-sharing site :-) -- Hassan Schroeder - has...@webtuitive.com webtuitive design === (+1) 408-621-3445 === http://webtuitive.com twitter: @hassan dream. code. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)
stop sending me emails On Wed, Oct 20, 2010 at 3:25 PM, Hassan Schroeder has...@webtuitive.com wrote: On 10/20/10 11:42 AM, cat soul wrote: I agree thoroughly, Hassan. Yet as this is a best-practices discussion and group, and since we've been hearing that these things A) don't always work and B) aren't always well-received by end users, we're left with a need. And that need is to know: out of the universe of what we can do, what ought we do to ensure as universal an experience as possible? I don't see any such need. Every site or application needs to be evaluated in terms of the expected audience. Testing with real users is essential, but you can still reasonably start with assumptions that differ depending on whether you're building e.g. an intranet inventory-management system vs a public lolcats-haiku-sharing site :-) -- Hassan Schroeder - has...@webtuitive.com webtuitive design === (+1) 408-621-3445 === http://webtuitive.com twitter: @hassan dream. code. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** -- Jonathan T. McInerney Vice President, Pearse Street, Inc. www.pearsestreet.com 800-985-5932 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)
Heh! That is pretty funny! However, clients may have the need to ensure a universal experience. One example of this is in their brand values, which may call for a certain look and feel. If a person experiences one thing on their iPad and another experiences something different on their HP notebook, those brand values could be said to have been compromised, diluted, changed.. cs On Oct 20, 2010, at 12:07 PM, Jason Arnold wrote: progressive enhancement is what you ought to do. and to answer the question if the experience needs to be same universally we have the answer right here: http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/ -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)
stop sending me emails We've stopped sending this person emails. no need to comment on this. :) Continue with this great thread! Thanks Russ BTW, every WSG email that goes out has an unsubscribe link at the bottom. Better to click that that tell 7,000 people you don't want any emails :) *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS rollovers for images + Feedback Sources??
Leslie, This is such valuable feedback. Thanks very much! Does anyone have suggestions on how to obtain website usability feedback from various members of the disabled community? Thanks in advance, Nick -- Nick Stone, MBA SEO, Web Accessibility, Web Development http://nick-stone.com/ Good idea, but please remember that for someone with problems of co-ordination or fine muscle control, hovering can be extremely difficult. I've encountered javascript image galleries which work like this, and on a bad day I find them completely unusable. Lesley On 19/10/10 21:13, cat soul wrote: Any thoughts on using CSS hover properties to show larger images? The scenario I'm envisioning is one where you'd have small thumbnails of samples, and hovering the mouse over them would invoke a hover state in which a larger version of that same image would appear...Larger meaning 400x600 pixels, or in that neighborhood. Is this not wise from a coding perspective? How about usability? Do web page visitors not expect this kind of behavior..would it be confusing to them as to what they're supposed to do, or what to expect? I'm wanting to use CSS to do what javascript rollovers do, only without the javascript. thanks for any feedback or opinions. cs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS rollovers for images?
On Oct 20, 2010, at 9:11 AM, cat soul wrote Please don't groan, but my background is in Print. Luckily, I never had to write PostScript. Illustrator, PS, Quark, and later InDesign all do a fine job of it. but just imagine if I DID have to write the post script, and to know variations for every single printing device?!?! IMHO, we need some kind of lingua franca that works for all of these electronic gizmos once and for all... but...things have been set in motion, and perhaps it's going to remain a bucket of stinky fish guts into the foreseeable future. As someone who was in print media, I would say the approach is pretty much the same (well except the creative part-creative as artistic) if you can get out of the print media box. You may not need to write PostScript, but you need to know how to fix the PostScript errors (this may no longer needed as it used to be anymore with the advanced printing technology that we have today): I remembered the days when I could spent 5 hours layout a 300 pages documentation and spent extra 8 hours to hunt the Postscript errors that occurred during printing/PDF conversion. Commanding the essential software (Illustrator, PS, Quark, and later InDesign) is just as the same that you need to command markup and CSS, and command it well. Fixing PostScript error is like knowing browser quirks, e.g. what to avoid when you write your CSS; where to look for clue when your layout goes out of whack in certain browser(s). If you are lucky than I was, you may never have to deal with PostScript, but the similar goes to colors, paper and printing technique (none-digital printing), that what color combinations with the right choice of paper stock can bring up the design etc. I hated those days I had to stay in the office till midnight fighting with PostScript errors from time to time, but very so often in my life now as a web developer, I realized how much I benefited from those days which turned me into a pretty good problem solver in solo web development setup. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS rollovers for images?
tee...you are quite right to point that out..every medium has its booby traps and difficulties..I've spend my share of time wrangling with recalcitrant files myself. cs On Oct 20, 2010, at 4:11 PM, tee wrote: Fixing PostScript error is like knowing browser quirks *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] CSS rollovers for images?
Any thoughts on using CSS hover properties to show larger images? The scenario I'm envisioning is one where you'd have small thumbnails of samples, and hovering the mouse over them would invoke a hover state in which a larger version of that same image would appear...Larger meaning 400x600 pixels, or in that neighborhood. Is this not wise from a coding perspective? How about usability? Do web page visitors not expect this kind of behavior..would it be confusing to them as to what they're supposed to do, or what to expect? I'm wanting to use CSS to do what javascript rollovers do, only without the javascript. thanks for any feedback or opinions. cs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS rollovers for images?
You could certainly do that with CSS. You'll want to add javascript to control how the image shows and fades, positioning etc. For maximum accessibility, have the thumbnail link to the main image, then have your Javscript/CSS hijack the link and show the image. Everyone wins. 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 10/19/10 4:13 PM, cat soul wrote: Any thoughts on using CSS hover properties to show larger images? The scenario I'm envisioning is one where you'd have small thumbnails of samples, and hovering the mouse over them would invoke a hover state in which a larger version of that same image would appear...Larger meaning 400x600 pixels, or in that neighborhood. Is this not wise from a coding perspective? How about usability? Do web page visitors not expect this kind of behavior..would it be confusing to them as to what they're supposed to do, or what to expect? I'm wanting to use CSS to do what javascript rollovers do, only without the javascript. thanks for any feedback or opinions. cs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS rollovers for images?
On Tue, Oct 19, 2010 at 4:13 PM, cat soul cats...@thinkplan.org wrote: Any thoughts on using CSS hover properties to show larger images? The scenario I'm envisioning is one where you'd have small thumbnails of samples, and hovering the mouse over them would invoke a hover state in which a larger version of that same image would appear...Larger meaning 400x600 pixels, or in that neighborhood. Is this not wise from a coding perspective? How about usability? Do web page visitors not expect this kind of behavior..would it be confusing to them as to what they're supposed to do, or what to expect? I think people might expect a larger version of a thumbnail when they click on it, not necessarily when they hover over it. I guess it depends on how you would indicate to the user that this functionality exists. -- -- Christian Montoya mappdev.com :: christianmontoya.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Css attributes
Hi
I'm trying to build some attribute selectors in CSS to check for missing
content. Ie.
IMG[alt=]
{
border-width: 3px;
border-color: #ff;
border-style: solid;
}
// will place a red border around any image with an empty ALT tag
IMG:not([alt])
{
border-width: 3px;
border-color: #ff;
border-style: dotted;
}
// will place a red border around any image with no ALT tag
The problem is the second one (not) only works with Firefox and Chrome. It
won't work in IE8
Does anyone have a suggestion?
Thanks
Tim
---
Tim Baillie | Quality Assurance Coordinator, ACUonline | Australian Catholic
University
Email tim.bail...@acu.edu.aumailto:tim.bail...@acu.edu.au | Phone +61 2 9739
2287 | Facsimile +61 2 9460 4380
North Sydney Campus (MacKillop)
Office 4, Level 1, 23 Berry Street
North Sydney NSW 2060 Australia
PO Box 968 | North Sydney | NSW 2059
CRICOS Reg. 4G, 00112C, 00873F, 00885B
Blackboard Support Phone 1800 759 660 (Ask for ACU Blackboard support)
Email blackboard.supp...@acu.edu.aumailto:blackboard.supp...@acu.edu.au
If anyone can show me, and prove to me, that I am wrong in thought or deed, I
will gladly change. I seek the truth, which never yet hurt anybody. It is only
persistence in self-delusion and ignorance which does harm.
- Marcus Aurelius Antoninus Augustus
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Css attributes
Tim,
:not() is a CSS3 pseudo-class, IE8 doesn't support any CSS3 pseudo-classes.
However you could use http://selectivizr.com/ to add that support using
javascript.
Cheers,
Ryan
On Tue, Oct 19, 2010 at 11:54 AM, Tim Baillie tim.bail...@acu.edu.auwrote:
Hi
I’m trying to build some attribute selectors in CSS to check for missing
content. Ie.
IMG[alt=]
{
border-width: 3px;
border-color: #ff;
border-style: solid;
}
// will place a red border around any image with an empty ALT tag
IMG:not([alt])
{
border-width: 3px;
border-color: #ff;
border-style: dotted;
}
// will place a red border around any image with no ALT tag
The problem is the second one (not) only works with Firefox and Chrome. It
won’t work in IE8
Does anyone have a suggestion?
Thanks
Tim
*
---
*
*Tim Baillie *| Quality Assurance Coordinator, ACUonline | *Australian
Catholic University
*Email tim.bail...@acu.edu.au | Phone +61 2 9739 *2287* | Facsimile +61 2
9460 *4380
North Sydney Campus (MacKillop)*
Office 4, Level 1, 23 Berry Street
North Sydney NSW 2060 Australia
PO Box 968 | North Sydney | NSW 2059
* *
*CRICOS Reg. 4G, 00112C, 00873F, 00885B*
Blackboard Support Phone *1800 759 660 *(Ask for ACU Blackboard support)
Email blackboard.supp...@acu.edu.au
If anyone can show me, and prove to me, that I am wrong in thought or deed,
I will gladly change. I seek the truth, which never yet hurt anybody. It is
only persistence in self-delusion and ignorance which does harm.
- Marcus Aurelius Antoninus Augustus
***
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 attributes
Or, if you're already using a Javascript library (which many IE CSS3
replacement scripts require) - like jQuery - you can simply add a class
to the targeted element because jQuery understands CSS3 selectors, eg.
{
$(img:not([alt])).addClass(empty-image);
}
Disclaimer: I haven't used the :not selector before so am not sure if
this is the correct syntax: *img:not([alt])* - I just borrowed from
yours below ;)
* Christian Fagan
* Fagan Design
* fagandesign.com.au
* p: (+613) 9314-1841
On 19/10/2010 2:04 PM, Ryan Seddon wrote:
Tim,
:not() is a CSS3 pseudo-class, IE8 doesn't support any CSS3
pseudo-classes. However you could use http://selectivizr.com/ to add
that support using javascript.
Cheers,
Ryan
On Tue, Oct 19, 2010 at 11:54 AM, Tim Baillie tim.bail...@acu.edu.au
mailto:tim.bail...@acu.edu.au wrote:
Hi
I’m trying to build some attribute selectors in CSS to check for
missing content. Ie.
IMG[alt=]
{
border-width: 3px;
border-color: #ff;
border-style: solid;
}
// will place a red border around any image with an empty ALT tag
IMG:not([alt])
{
border-width: 3px;
border-color: #ff;
border-style: dotted;
}
// will place a red border around any image with no ALT tag
The problem is the second one (not) only works with Firefox and
Chrome. It won’t work in IE8
Does anyone have a suggestion?
Thanks
Tim
*---*
*Tim Baillie *| Quality Assurance Coordinator, ACUonline |
*Australian Catholic University
*Email tim.bail...@acu.edu.au mailto:tim.bail...@acu.edu.au |
Phone +61 2 9739 *2287* | Facsimile +61 2 9460 *4380
North Sydney Campus (MacKillop)*
Office 4, Level 1, 23 Berry Street
North Sydney NSW 2060 Australia
PO Box 968 | North Sydney | NSW 2059
* *
*CRICOS Reg. 4G, 00112C, 00873F, 00885B*
Blackboard Support Phone *1800 759 660 *(Ask for ACU Blackboard
support)
Email blackboard.supp...@acu.edu.au
mailto:blackboard.supp...@acu.edu.au
If anyone can show me, and prove to me, that I am wrong in thought
or deed, I will gladly change. I seek the truth, which never yet
hurt anybody. It is only persistence in self-delusion and
ignorance which does harm.
- Marcus Aurelius Antoninus Augustus
***
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
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] CSS support of HTML5 tags not ready yet?
HI,
Joined the chat a bit late, hope the following URL is helpful
without being redundant.
http://html5boilerplate.com/
___
Christopher Kennon
Bushidodeep
Principal/Developer/Designer
(w) http://bushidodeep.com
(e) field.ni...@gmail.com
(gv) 818.322.4513
On Sep 27, 2010, at 3:13 AM, tee wrote:
Only the two Webkit browsers are able to render the header and
footer correctly.
http://lotusseedsdesign.com/css-test/templegate.html
header {
height : 300px;
width : 980px;
text-align : center;
position : relative;
clear : both;
overflow : hidden;
margin : 0 auto;
border : 1px solid #369;
background : #ddd;
}
I can't find anything wrong with my style sheet and the html code.
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] CSS support of HTML5 tags not ready yet?
I explored the html5boilerplate quite a bit, but decided to come up my own
template instead.
To its credit, it has some really nice stuff in there and I have adapted to my
template too, but there are a number of elements that I found that really
shouldn't be in there.
If you are using the template, you may want to get rid of these two:
body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22;
}
This one likely will get Felix Miata all heat up :-)
Apart from this, no typeface declared and default to sans or sans serif is not
a good approach. I have in a few occasions found it resulted very bad rendering
in IE from XP and Windows 7 via Parallel Desktop, however I have not run a
thorough test whether it's a combinations of @fontface declaration (with
font-wight:normal for headings) and Windows system in Parallel Desktop.
html { -webkit-font-smoothing: antialiased; }
This is best used only if a site has a darken background. For site that has
light or white background, it gives a false impression that the text is blur. I
get many feedbacks from clients that their customers complaint about the text
not 'clear' in Chrome browser (and Safari too - but no PC user uses Safari I
presume :-) ).
tee
On Oct 1, 2010, at 8:15 AM, field.ni...@gmail.com wrote:
HI,
Joined the chat a bit late, hope the following URL is helpful
without being redundant.
http://html5boilerplate.com/
___
Christopher Kennon
Bushidodeep
Principal/Developer/Designer
(w) http://bushidodeep.com
(e) field.ni...@gmail.com
(gv) 818.322.4513
On Sep 27, 2010, at 3:13 AM, tee wrote:
Only the two Webkit browsers are able to render the header and footer
correctly.
http://lotusseedsdesign.com/css-test/templegate.html
header {
height : 300px;
width : 980px;
text-align : center;
position : relative;
clear : both;
overflow : hidden;
margin : 0 auto;
border : 1px solid #369;
background : #ddd;
}
I can't find anything wrong with my style sheet and the html code.
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] CSS and h264 vs Flash
MS is on board but for vista windows 7 users only So ie pre ie9 is still going to be out there; I think that ie9 should be released as an xp version also the other browsers all make versions that work for xp and support html5; though though some things would only work on ie9 (pinning tasks) microsoft seem to be operating in a new light but I feel they could shine brighter; but maybe thats too optimistic - S On 29 September 2010 03:14, cat soul cats...@thinkplan.org wrote: that's pretty nice.. I've also been reading that MS is on board with the HTML5+ h264 combo as an alternative to Flash, so perhaps a critical mass is forming... I do feel that flash has its place, but that it was a mistake jumping in head first as the web seemed to do over flash so many years ago. cs On Sep 28, 2010, at 7:00 PM, Sam Sherlock wrote: transitions with css here http://timvandamme.com/ some icons use transition with css with in . vcard in firefox the icons just use hover active - S On 29 September 2010 01:12, cat soul cats...@thinkplan.org wrote: On Sep 28, 2010, at 5:01 PM, Sam Sherlock wrote: Kroc Camen video for everybody http://camendesign.com/code/video_for_everybody I think Steve Jobs is thinking about everyone using Safari browser (or another modern browser that support h.264 not ff3.6 but ff4 will maybe, chrome does) but in reality for now such modern browsers are not as wide spread as the number that will have the flash plugin even as much as many dislike flash I think many webusers will be indifferent about how the video is shown - basic users just want things to work flash is something that people know about at some level OK..I understand about the video part, but can CSS handle other aspects of what Flash is used for, such as animation and interactivity? cs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS and h264 vs Flash
On 29/09/2010 09:59, Sam Sherlock wrote: So ie pre ie9 is still going to be out there; I think that ie9 should be released as an xp version also the other browsers all make versions that work for xp and support html5; though though some things would only work on ie9 (pinning tasks) let's not get confused here. pinning tasks and all the other stuff that MS has been touting recently has nothing to do with HTML5, CSS3, or anything else. It's their proprietary meta element additions ... http://camendesign.com/blog/stop_this_madness also, as already mentioned, but worth reiterating because of the thread's subject line: H.264 is merely a video codec. there are other codecs out there in use (ogg theora and webm). it's the fundamental behind it - the video element in HTML5 and its native support in browsers - that is the technology to be discussed (and whether or not that can supplant flash in certain generic use cases), not the (royalty/patent-encumbered) h.264 codec. P -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com | http://flickr.com/photos/redux/ __ twitter: @patrick_h_lauke | skype: patrick_h_lauke __ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
I don't have any personal experience with this stuff but your discussion rereminded me of a page I bookmarked recently: http://jdbartlett.github.com/innershiv/ Sorry if it is not relevant, have not read the whole thread in detail. Hope it helps! -- Cheers Ollie @ollicle On Wednesday, September 29, 2010, Rob Crowther robe...@boogdesign.com wrote: On 28/09/10 23:41, Steven Tan wrote: Strange, I expected the innerHTML part to fail. Any idea why that works? Nope! I expected one or the other of the two (DOM and innerHTML) to fail as surely jQuery is using one or other of them underneath? I haven't had time to dig in to the jQuery source and figure out what it's doing, but I guess it's wrapping the DOM approach to make it look like innerHTML, and something is getting lost in translation. Rob *** 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 and h264 vs Flash
On Sep 29, 2010, at 1:59 AM, Sam Sherlock wrote: MS is on board but for vista windows 7 users only Quite true. All for-profit companies are in things for themselves. No news flash there. But if I could tease out the original purpose of my question once more, it'd be to say that Flash has been used to introduce interactivity + multimedia into web pages. True, there are other ways to get interactivity, and other ways to get multimedia into web pages, but Flash offers a one-stop shopping tool, and as has been said, most/many people have the flash plug-in, so playback is more or less assured across the intertoobs. Add that Flash comes with a load of issues, some for users, some for developers, which are unpleasant. CPU overhead, difficulties in updating/modifying sites are 2 I can think of. So my question is: can CSS and/or Javascript plus *some* codec of movie/sound content replace Flash? cs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS and h264 vs Flash
On Wed, Sep 29, 2010 at 8:06 AM, cat soul cats...@thinkplan.org wrote: Flash offers a one-stop shopping tool, and as has been said, most/many people have the flash plug-in, so playback is more or less assured across the intertoobs. Except when dealing with the Mobile market where Flash isn't universal and if you care at all if your content plays on the iProducts (Pad, Pod, Phone which does have a decent marketshare in mobile devices) then you'll be looking at alternatives in addition to Flash anyway. So my question is: can CSS and/or Javascript plus *some* codec of movie/sound content replace Flash? Yes. If you encode in Ogg and H.264 and include a Flash player fallback for IE 9 then your video would be available in all the popular browsers and available on all mobile devices that can play video from websites. There's already many templates out there that includes all this (minus the video encodings obviously). -- Jason Arnold http://www.jasonarnold.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
Oliver Boermans wrote: I don't have any personal experience with this stuff but your discussion rereminded me of a page I bookmarked recently: http://jdbartlett.github.com/innershiv/ Yep, that looks like the root of the problem: doesn't work in Internet Explorer when an element's content is added with innerHTML /before/ being appended to the document Thanks. Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS and h264 vs Flash
Strange, My answer would've been not yet. Too many differences in supported video codecs cross-browser. A bit of a mare in production unless you've a transcoding service on your media server. For the maximum audience: Flash 8 preferably (9 if full screen is a requirement), ON2 VP6 Codec, with HTML5 H.264+AAC+MP4 for apple products as back-up. Which is still one too many formats, not to forget that H.264 is licensed. The next generation will be H.264 in Flash v9.3 plus. One format albeit licensed for big and small alike woohoo! HTML5 video will only be truly usable when browsers and devices all support at least one universal codec. Probably webM, but we'll have to wait at least a 2 years for that. That's my tuppence worth anyway. regards. mike foskett -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Jason Arnold Sent: 29 September 2010 14:41 To: wsg@webstandardsgroup.org Subject: Re: [WSG] CSS and h264 vs Flash On Wed, Sep 29, 2010 at 8:06 AM, cat soul cats...@thinkplan.org wrote: Flash offers a one-stop shopping tool, and as has been said, most/many people have the flash plug-in, so playback is more or less assured across the intertoobs. Except when dealing with the Mobile market where Flash isn't universal and if you care at all if your content plays on the iProducts (Pad, Pod, Phone which does have a decent marketshare in mobile devices) then you'll be looking at alternatives in addition to Flash anyway. So my question is: can CSS and/or Javascript plus *some* codec of movie/sound content replace Flash? Yes. If you encode in Ogg and H.264 and include a Flash player fallback for IE 9 then your video would be available in all the popular browsers and available on all mobile devices that can play video from websites. There's already many templates out there that includes all this (minus the video encodings obviously). -- Jason Arnold http://www.jasonarnold.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** 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 ***
Re: [WSG] CSS and h264 vs Flash
@patrick yes pinning tasks is an example of what does not need to be done - flourish added by microsoft for extra flare :) - bet that was the result of some blue sky idea in some board room / focus group; more reason for ie 9ish being on xp (50% users) @mike some of the eloquence/stats I was looking for - S On 29 September 2010 17:06, Foskett, Mike mike.fosk...@uk.tesco.com wrote: Strange, My answer would've been not yet. Too many differences in supported video codecs cross-browser. A bit of a mare in production unless you've a transcoding service on your media server. For the maximum audience: Flash 8 preferably (9 if full screen is a requirement), ON2 VP6 Codec, with HTML5 H.264+AAC+MP4 for apple products as back-up. Which is still one too many formats, not to forget that H.264 is licensed. The next generation will be H.264 in Flash v9.3 plus. One format albeit licensed for big and small alike woohoo! HTML5 video will only be truly usable when browsers and devices all support at least one universal codec. Probably webM, but we'll have to wait at least a 2 years for that. That's my tuppence worth anyway. regards. mike foskett -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Jason Arnold Sent: 29 September 2010 14:41 To: wsg@webstandardsgroup.org Subject: Re: [WSG] CSS and h264 vs Flash On Wed, Sep 29, 2010 at 8:06 AM, cat soul cats...@thinkplan.org wrote: Flash offers a one-stop shopping tool, and as has been said, most/many people have the flash plug-in, so playback is more or less assured across the intertoobs. Except when dealing with the Mobile market where Flash isn't universal and if you care at all if your content plays on the iProducts (Pad, Pod, Phone which does have a decent marketshare in mobile devices) then you'll be looking at alternatives in addition to Flash anyway. So my question is: can CSS and/or Javascript plus *some* codec of movie/sound content replace Flash? Yes. If you encode in Ogg and H.264 and include a Flash player fallback for IE 9 then your video would be available in all the popular browsers and available on all mobile devices that can play video from websites. There's already many templates out there that includes all this (minus the video encodings obviously). -- Jason Arnold http://www.jasonarnold.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** 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] CSS support of HTML5 tags not ready yet?
On 27 Sep 2010, at 22:46, tee wrote: Without CSS, wouldn't the browsers render the page just like normal HTML page with browser default styling? Yes … so the blocks would collapse back to inline. Quote Hugo, It will create those elements for IE6-8 (and older browsers with lack of HTML5 support) in DOM. I suppose DOM will still work in older IEs when CSS is off yes? Yes -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
On 28/09/2010 07:12, David Dorward wrote:
On 27 Sep 2010, at 22:46, tee wrote:
Quote Hugo, It will create those elements for IE6-8 (and older browsers with lack
of HTML5 support) in DOM. I suppose DOM will still work in older IEs when CSS is
off yes?
Yes
To clarify though: the DOM will be messed up in IE without the JS
training wheels (document.createElement('header') etc) telling it that
there's these new elements. For instance, if I recall correctly, having
something like
headerblah/header
will make IE think that there are a header element and a /header
element, so the DOM will look something like
header
textnode
/header
where the three are siblings, rather than
header
-- textnode
where textnode is child of the header node
P
--
Patrick H. Lauke
__
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com | http://flickr.com/photos/redux/
__
twitter: @patrick_h_lauke | skype: patrick_h_lauke
__
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] CSS support of HTML5 tags not ready yet?
Also ran into an issue when i was using js templating with html5 tags. Html5
shiv only ran once when the document loads. Either need call it again or use
html4 tags. I am choosing html4 tags for now. Sigh.
Steven
On 28/09/2010, at 6:34 PM, Patrick H. Lauke re...@splintered.co.uk wrote:
On 28/09/2010 07:12, David Dorward wrote:
On 27 Sep 2010, at 22:46, tee wrote:
Quote Hugo, It will create those elements for IE6-8 (and older browsers
with lack of HTML5 support) in DOM. I suppose DOM will still work in older
IEs when CSS is off yes?
Yes
To clarify though: the DOM will be messed up in IE without the JS training
wheels (document.createElement('header') etc) telling it that there's these
new elements. For instance, if I recall correctly, having something like
headerblah/header
will make IE think that there are a header element and a /header element,
so the DOM will look something like
header
textnode
/header
where the three are siblings, rather than
header
-- textnode
where textnode is child of the header node
P
--
Patrick H. Lauke
__
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com | http://flickr.com/photos/redux/
__
twitter: @patrick_h_lauke | skype: patrick_h_lauke
__
***
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 support of HTML5 tags not ready yet?
Steven Tan wrote: Also ran into an issue when i was using js templating with html5 tags. Html5 shiv only ran once when the document loads. Either need call it again or use html4 tags. I am choosing html4 tags for now. Sigh. All the HTML5 shiv is doing is calling document.createElement against a list of tag names, there's nothing to stop you running that same code before your templating. Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
No, it doesn't. But if you use html5 tags in your templating, then it might. Just something to watch out for. One of my templates create a section and header for about 20 times. Steven On 28/09/2010, at 8:49 PM, Rob Crowther robe...@boogdesign.com wrote: Steven Tan wrote: Also ran into an issue when i was using js templating with html5 tags. Html5 shiv only ran once when the document loads. Either need call it again or use html4 tags. I am choosing html4 tags for now. Sigh. All the HTML5 shiv is doing is calling document.createElement against a list of tag names, there's nothing to stop you running that same code before your templating. Rob *** 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 support of HTML5 tags not ready yet?
On 28/09/10 14:10, Steven Tan wrote:
No, it doesn't. But if you use html5 tags in your templating, then it might.
Just something to watch out for.
Sorry, I'm not sure what you're saying here: no it doesn't what? It
might what?
One of my templates create a section and header for about 20 times.
I'm not sure why that would matter? The main problem the html5shiv is
trying to solve is that IE doesn't allow CSS to be applied to elements
it doesn't recognise. If you call document.createElement('section') and
document.createElement('header') then, from then onwards, IE will apply
CSS to section and header elements. It doesn't matter how many elements
of any type there are.
Can you be more clear about the problem you encountered?
Rob
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] CSS support of HTML5 tags not ready yet?
Sure. :)
The issue i am encountering is when I generate HTML on the fly using js
templates. I have a couple of templates written with sections and headers tags.
Because html5 shiv only create the elements on document loads, it will not work
the html5 tags that gets appended to the document later. IE keeps throwing an
object undefined error.
I didn't realize this can be a bit of issue until i started work on it. I could
modify the templating js to create the elements, but not sure whether it is
worth the trouble at this stage.
So watch out if you rely on js libraries that do something like this:
$(body).append(sectionsomething/section);
$(section).text(new something); // this line will throw an error in IE.
Hope that makes sense.
On 28/09/2010, at 11:55 PM, Rob Crowther robe...@boogdesign.com wrote:
On 28/09/10 14:10, Steven Tan wrote:
No, it doesn't. But if you use html5 tags in your templating, then it might.
Just something to watch out for.
Sorry, I'm not sure what you're saying here: no it doesn't what? It might
what?
One of my templates create a section and header for about 20 times.
I'm not sure why that would matter? The main problem the html5shiv is trying
to solve is that IE doesn't allow CSS to be applied to elements it doesn't
recognise. If you call document.createElement('section') and
document.createElement('header') then, from then onwards, IE will apply CSS
to section and header elements. It doesn't matter how many elements of any
type there are.
Can you be more clear about the problem you encountered?
Rob
***
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 support of HTML5 tags not ready yet?
Steven Tan wrote So watch out if you rely on js libraries that do something like this: $(body).append(sectionsomething/section); $(section).text(new something); // this line will throw an error in IE. Hope that makes sense. Ah, I understand, interesting. I've done some example cases: Base case for reference, loads html5shiv to render static content (works in IE8): http://www.boogdesign.com/examples/html5shiv-static.html Load html5shiv, create element with jQuery then change with jQuery (fails in IE8): http://www.boogdesign.com/examples/html5shiv-jquery.html Load html5shiv, use DOM methods to create element, change with jQuery (works in IE8): http://www.boogdesign.com/examples/html5shiv-dom-jquery.html Load html5shiv, use innerHTML to create element, change with jQuery (works in IE8): http://www.boogdesign.com/examples/html5shiv-inner-jquery.html So it looks like this is the broken part: $(body).append(sectionsomething/section); If you create the element with other methods, the next line works fine. Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
Nice setup. Thanks for explaining it better than I do. ;) Load html5shiv, use innerHTML to create element, change with jQuery (works in IE8): http://www.boogdesign.com/examples/html5shiv-inner-jquery.html Strange, I expected the innerHTML part to fail. Any idea why that works? So it looks like this is the broken part: $(body).append(sectionsomething/section); If you create the element with other methods, the next line works fine. Rob *** 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] CSS and h264 vs Flash
I hope that this is within the scope of this list... Some months back, you may have read Steve Jobs saying that Flash could easily be replaced by a combo of CSS and h264, or something very similar. My CSS skills don't empower me to see how this could be..could somebody shine a light on this for me? I personally do not care for Flash thingies...from a user standpoint..mostly bombastic, and monopolizes my CPU. thank you! cs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
On 28/09/10 23:41, Steven Tan wrote: Strange, I expected the innerHTML part to fail. Any idea why that works? Nope! I expected one or the other of the two (DOM and innerHTML) to fail as surely jQuery is using one or other of them underneath? I haven't had time to dig in to the jQuery source and figure out what it's doing, but I guess it's wrapping the DOM approach to make it look like innerHTML, and something is getting lost in translation. Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS and h264 vs Flash
Kroc Camen video for everybody http://camendesign.com/code/video_for_everybody I think Steve Jobs is thinking about everyone using Safari browser (or another modern browser that support h.264 not ff3.6 but ff4 will maybe, chrome does) but in reality for now such modern browsers are not as wide spread as the number that will have the flash plugin even as much as many dislike flash I think many webusers will be indifferent about how the video is shown - basic users just want things to work flash is something that people know about at some level javascript (often) is part of doing what you can as developer to ensure that the UX is as seamless as possible (requiring little of the user) http://camendesign.com/code/video_for_everybody - S *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS and h264 vs Flash
On Sep 28, 2010, at 5:01 PM, Sam Sherlock wrote: Kroc Camen video for everybody http://camendesign.com/code/video_for_everybody I think Steve Jobs is thinking about everyone using Safari browser (or another modern browser that support h.264 not ff3.6 but ff4 will maybe, chrome does) but in reality for now such modern browsers are not as wide spread as the number that will have the flash plugin even as much as many dislike flash I think many webusers will be indifferent about how the video is shown - basic users just want things to work flash is something that people know about at some level OK..I understand about the video part, but can CSS handle other aspects of what Flash is used for, such as animation and interactivity? cs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS and h264 vs Flash
transitions with css here http://timvandamme.com/ some icons use transition with css with in . vcard in firefox the icons just use hover active - S On 29 September 2010 01:12, cat soul cats...@thinkplan.org wrote: On Sep 28, 2010, at 5:01 PM, Sam Sherlock wrote: Kroc Camen video for everybody http://camendesign.com/code/video_for_everybody I think Steve Jobs is thinking about everyone using Safari browser (or another modern browser that support h.264 not ff3.6 but ff4 will maybe, chrome does) but in reality for now such modern browsers are not as wide spread as the number that will have the flash plugin even as much as many dislike flash I think many webusers will be indifferent about how the video is shown - basic users just want things to work flash is something that people know about at some level OK..I understand about the video part, but can CSS handle other aspects of what Flash is used for, such as animation and interactivity? cs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS and h264 vs Flash
that's pretty nice.. I've also been reading that MS is on board with the HTML5+ h264 combo as an alternative to Flash, so perhaps a critical mass is forming... I do feel that flash has its place, but that it was a mistake jumping in head first as the web seemed to do over flash so many years ago. cs On Sep 28, 2010, at 7:00 PM, Sam Sherlock wrote: transitions with css here http://timvandamme.com/ some icons use transition with css with in .vcard in firefox the icons just use hover active - S On 29 September 2010 01:12, cat soul cats...@thinkplan.org wrote: On Sep 28, 2010, at 5:01 PM, Sam Sherlock wrote: Kroc Camen video for everybody http://camendesign.com/code/video_for_everybody I think Steve Jobs is thinking about everyone using Safari browser (or another modern browser that support h.264 not ff3.6 but ff4 will maybe, chrome does) but in reality for now such modern browsers are not as wide spread as the number that will have the flash plugin even as much as many dislike flash I think many webusers will be indifferent about how the video is shown - basic users just want things to work flash is something that people know about at some level OK..I understand about the video part, but can CSS handle other aspects of what Flash is used for, such as animation and interactivity? cs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] CSS support of HTML5 tags not ready yet?
Only the two Webkit browsers are able to render the header and footer
correctly.
http://lotusseedsdesign.com/css-test/templegate.html
header {
height : 300px;
width : 980px;
text-align : center;
position : relative;
clear : both;
overflow : hidden;
margin : 0 auto;
border : 1px solid #369;
background : #ddd;
}
I can't find anything wrong with my style sheet and the html code.
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] CSS support of HTML5 tags not ready yet?
try adding display: block - by default they are usually displayed as inline
in ie you need to add them via javascript before it will recognise them:
document.createElement(header);
--
Chris Knowles
On 27/09/10 8:13 PM, tee wrote:
Only the two Webkit browsers are able to render the header and footer
correctly.
http://lotusseedsdesign.com/css-test/templegate.html
header {
height : 300px;
width : 980px;
text-align : center;
position : relative;
clear : both;
overflow : hidden;
margin : 0 auto;
border : 1px solid #369;
background : #ddd;
}
I can't find anything wrong with my style sheet and the html code.
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] CSS support of HTML5 tags not ready yet?
A best practice: Do browser detection instead.
script type=text/javascript
function html5elm(elm) {
return !!document.createElement(elm);
}
var myArray = ['header','nav','section','aside','article','footer','hgroup'];
for (var i = 0; i myArray.length; i++){
html5elm(myArray[i]);
}
/script
It will create those elements for IE6-8 (and older browsers with lack
of HTML5 support) in DOM. IE9 support them natively.
HM.
On Mon, Sep 27, 2010 at 11:25 AM, Chris Knowles w...@ckweb.com.au wrote:
try adding display: block - by default they are usually displayed as inline
in ie you need to add them via javascript before it will recognise them:
document.createElement(header);
--
Chris Knowles
On 27/09/10 8:13 PM, tee wrote:
Only the two Webkit browsers are able to render the header and footer
correctly.
http://lotusseedsdesign.com/css-test/templegate.html
header {
height : 300px;
width : 980px;
text-align : center;
position : relative;
clear : both;
overflow : hidden;
margin : 0 auto;
border : 1px solid #369;
background : #ddd;
}
I can't find anything wrong with my style sheet and the html code.
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] CSS support of HTML5 tags not ready yet?
I meant FEATURE Detection. Sorry.
Hm.
On Mon, Sep 27, 2010 at 11:34 AM, Hugo Mendes hugo.men...@gmail.com wrote:
A best practice: Do browser detection instead.
script type=text/javascript
function html5elm(elm) {
return !!document.createElement(elm);
}
var myArray = ['header','nav','section','aside','article','footer','hgroup'];
for (var i = 0; i myArray.length; i++){
html5elm(myArray[i]);
}
/script
It will create those elements for IE6-8 (and older browsers with lack
of HTML5 support) in DOM. IE9 support them natively.
HM.
On Mon, Sep 27, 2010 at 11:25 AM, Chris Knowles w...@ckweb.com.au wrote:
try adding display: block - by default they are usually displayed as inline
in ie you need to add them via javascript before it will recognise them:
document.createElement(header);
--
Chris Knowles
On 27/09/10 8:13 PM, tee wrote:
Only the two Webkit browsers are able to render the header and footer
correctly.
http://lotusseedsdesign.com/css-test/templegate.html
header {
height : 300px;
width : 980px;
text-align : center;
position : relative;
clear : both;
overflow : hidden;
margin : 0 auto;
border : 1px solid #369;
background : #ddd;
}
I can't find anything wrong with my style sheet and the html code.
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] CSS support of HTML5 tags not ready yet?
Tee: try putting:!--[if IE]
script src=http://html5shiv.googlecode.com/svn/trunk/html5.js;/script
![endif]--
In the head, and/*for html5 in IE*/
article, aside, figure, figcaption, footer, header, mark, menu, nav,
section, small, time, video {
display : block;
}
(or whatever is relevant) in your CSS.Bob- Original Message -
From: tee weblis...@gmail.com
To: wsg@webstandardsgroup.org
Sent: Monday, September 27, 2010 11:13 AM
Subject: [WSG] CSS support of HTML5 tags not ready yet?
Only the two Webkit browsers are able to render the header and footer
correctly.
http://lotusseedsdesign.com/css-test/templegate.html
header {
height : 300px;
width : 980px;
text-align : center;
position : relative;
clear : both;
overflow : hidden;
margin : 0 auto;
border : 1px solid #369;
background : #ddd;
}
I can't find anything wrong with my style sheet and the html code.
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] CSS support of HTML5 tags not ready yet?
On 27 Sep 2010, at 11:13, tee wrote: Only the two Webkit browsers are able to render the header and footer correctly. Most browsers don't yet apply default styles to them. Current versions of IE don't recognise them at all without a JS shim. While you can use a JS shim and explicitly set display: block, the rendering fails (usually quite badly) if JS or CSS isn't available. I wouldn't depend on those elements until HTML5 browsers are common. -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS support of HTML5 tags not ready yet?
Thanks all for the help. display block it's is. I am so used to expecting Firefox to render everything correctly! When it doesn't, I couldn't think further :) Was going to use modernizr, therefor not worry about IE browsers, but didn't realize the script couldn't take care of CSS part. Are these HTML5 tags inline elements by default or it's that (the latest) Firefox and Opera not yet supporting them? I thought they are of block elements. @David, this is going to be a personal site for me to learn the HTML5, so I am not worry the JS part too much. Without CSS, wouldn't the browsers render the page just like normal HTML page with browser default styling? Quote Hugo, It will create those elements for IE6-8 (and older browsers with lack of HTML5 support) in DOM. I suppose DOM will still work in older IEs when CSS is off yes? tee On Sep 27, 2010, at 3:50 AM, David Dorward wrote: On 27 Sep 2010, at 11:13, tee wrote: Only the two Webkit browsers are able to render the header and footer correctly. Most browsers don't yet apply default styles to them. Current versions of IE don't recognise them at all without a JS shim. While you can use a JS shim and explicitly set display: block, the rendering fails (usually quite badly) if JS or CSS isn't available. I wouldn't depend on those elements until HTML5 browsers are common. -- 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] CSS support of HTML5 tags not ready yet?
On 27/09/10 22:46, tee wrote: Are these HTML5 tags inline elements by default or it's that (the latest) Firefox and Opera not yet supporting them? I thought they are of block elements. Firefox 4.0 will have support in the default stylesheet for the new HTML5 elements. It'll also have the HTML5 parser enabled by default, enabling inline SVG and MathML: http://hacks.mozilla.org/2010/05/firefox-4-the-html5-parser-inline-svg-speed-and-more/ Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [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_c o llapsing_menu/ A further example worth considering: http://www.splintered.co.uk/experiments/16 This is a different approach as it keeps all the links *visible* (there is no use of display:none), but it still offers keyboard users a way to skip sub menus: http://tjkdesign.com/articles/TJK_SlideMenu/TJK_SlideMENU.asp As a side note, the markup is a DL. -- 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 ***
RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
Hi Mathew, http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp I have a bug report... tested against FF 3.6.4 and IE6 (no bug under Chrome 5.0.376) Steps to reproduce: - click on background - tab to focus first menu item - hit enter to display sub-items - tab through to the second menu - hit enter to display its sub-items (the first menu closes) - hit shift-tab to go back to the first menu The bug is either one of a) the first menu shouldn't open as the second menu is active, or b) that the second menu stays open. Thanks for the step by step, but unfortunately I cannot reproduce (in neither one of these browsers). Could somebody confirm the issue following the steps above? Thanks. As a side note, there is something strange in these steps as the first menu should close before you can even hit enter on the second one. Are you sure you do not have your mouse cursor over the first tab while checking the menu? Because that would explain what you describe. -- 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 ***
RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
Sorry Thierry I only took a quick look at the page and didn't read it fully. Mike -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Thierry Koblentz Sent: 29 June 2010 17:34 To: wsg@webstandardsgroup.org Subject: RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu) Hi Mike, Sorry to say this but the keyboard friendly version: http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp Only fires, via keyboard, on Articles E-K in IEv8 or Firefox. This is by design. Keyboard users could not reach these pages if they were not focusable at least from the parent page. The About this solution section says: Note that keyboard users cannot skip the sub-menu related to the current page. This is because this sub-menu is exposed to SE (Search Engines) and thus accessible to keyboard users when JS is off. The sub-menus open via the *enter key*, this is to allow keyboard users to skip sub menus so they are not forced to tab through all the menu items. If the menu is accessible, it is *because* the sub menu related to the page itself *is* focusable (it is not styled with display:none). What this menu is missing though is a arrow pointer for *discoverability*. I have a title in there, but I think it's pretty useless (for 99.99% of users). If I had time, I'd add arrows and ARIA roles too. -- 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 *** 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 ***
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 ***
Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
On 29 Jun 2010, at 00:30, grant_malcolm_bai...@westnet.com.au wrote: I'm trying to avoid use of Javascript due to accessibility concerns. Trying to shoehorn functionality (which is what JS was designed for) into CSS (which is designed for presentation, not logic) is not good for accessibility. The classic example is the drop down menu which, if built using :hover instead of JS: * Can't respond to navigation without a pointer (e.g. keyboard tabbing, or a breath switch) * Can't have any 'fuzz factor' around the pointer position and timing of when a menu goes away (so if someone has any trouble at all with motor skills (e.g. because they have arthritis) they they could find it very different to get to the bottom of a menu without sliding outside it for a second and losing it) * Can't work in IE6 (since it's support for :hover is poor) (at least not without using a really evil hack involving conditional comments and layout tables). JavaScript is not the enemy of accessibility, it just has to be handled with care. If you are worried about pages breaking if JS is not available, then build on things that work: http://icant.co.uk/articles/pragmatic-progressive-enhancement/#build -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
Hi everyone, Can everyone suggest which CSS/JS horizontal and vertical drop down navigation they would recommend? Thanks, Elaine Wildash Web Dandy Twitter: http://www.twitter.com/webdandy www.twitter.com/webdandy Facebook: http://www.facebook.com/pages/Web-Dandy/171945798743 www.facebook.com/pages/Web-Dandy/171945798743 _ From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of David Dorward Sent: 29 June 2010 07:15 To: wsg@webstandardsgroup.org Subject: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu) On 29 Jun 2010, at 00:30, grant_malcolm_bai...@westnet.com.au wrote: I'm trying to avoid use of Javascript due to accessibility concerns. Trying to shoehorn functionality (which is what JS was designed for) into CSS (which is designed for presentation, not logic) is not good for accessibility. The classic example is the drop down menu which, if built using :hover instead of JS: * Can't respond to navigation without a pointer (e.g. keyboard tabbing, or a breath switch) * Can't have any 'fuzz factor' around the pointer position and timing of when a menu goes away (so if someone has any trouble at all with motor skills (e.g. because they have arthritis) they they could find it very different to get to the bottom of a menu without sliding outside it for a second and losing it) * Can't work in IE6 (since it's support for :hover is poor) (at least not without using a really evil hack involving conditional comments and layout tables). JavaScript is not the enemy of accessibility, it just has to be handled with care. If you are worried about pages breaking if JS is not available, then build on things that work: http://icant.co.uk/articles/pragmatic-progressive-enhancement/#build -- 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 ***image001.gif
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 ***
RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
I find it's best to do your homework, and shop around. There are so many options and paths you can go down, and with things changing rapidly so often, something that works today, may not work so well tomorrow. Sitepoint is a good start, they publish a good book By Rachel Andrews, CSS Anthology, currently 3rd edition. She recommends a Javascript version for accessibility. I would agree. Best of luck on your journey . . . John -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of David Dorward Sent: Tuesday, 29 June 2010 8:22 PM To: wsg@webstandardsgroup.org Subject: Re: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu) On 29 Jun 2010, at 11:04, de...@littlegent.com wrote: I'd recommend using one from http://www.cssplay.co.uk/menus/ The trick is deciding which one to use, really. =) Having taken a quick look, I'd run a mile from them. The first one I looked at was missing and pointed me somewhere else, which assured me that I've love a newer version and directed me to http://www.cssplay.co.uk/menus/final_drop.html It was wrong, I don't love it. It seems to have all the problems I described earlier (although it does, at least, bother to have basic links at the top (I wonder how many people bother to put something useful that that can substitute for the menu on those pages...) lia href=../menu/index.htmlDEMOS!--[if gte IE 7]!--/a!--![endif]-- !--[if lte IE 6]tabletrtd![endif]-- This hideous excuse for markup can't be worth removing the dependancy on JS, can it? (Especially since you need to implement the same fallbacks anyway!) -- 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: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
I used to use cssplay menus 6+ years ago but they're not the friendliest or most compliant to work with. I really like superfish - i've been using that for a few years with no problems at all. and I find it very easy to customise. http://users.tpg.com.au/j_birch/plugins/superfish/ I haven't really drilled down on it but it degrades nicely - works well in IE without any weird conditionals - and all my sites are XHTML strict compliant. - daniel hellodan...@mac.com On 29/06/2010, at 8:21 PM, David Dorward wrote: On 29 Jun 2010, at 11:04, de...@littlegent.com wrote: I'd recommend using one from http://www.cssplay.co.uk/menus/ The trick is deciding which one to use, really. =) Having taken a quick look, I'd run a mile from them. The first one I looked at was missing and pointed me somewhere else, which assured me that I've love a newer version and directed me to http://www.cssplay.co.uk/menus/final_drop.html It was wrong, I don't love it. It seems to have all the problems I described earlier (although it does, at least, bother to have basic links at the top (I wonder how many people bother to put something useful that that can substitute for the menu on those pages…) lia href=../menu/index.htmlDEMOS!--[if gte IE 7]!--/a!--![endif]-- !--[if lte IE 6]tabletrtd![endif]-- This hideous excuse for markup can't be worth removing the dependancy on JS, can it? (Especially since you need to implement the same fallbacks anyway!) -- 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: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
Try this for CSS menus with keyboard support: http://carroll.org.uk/sandbox/suckerfish/bones2.html This menu may be accessible, but is it usable? Unless I am missing something, keyboard users need to go through *every single link* in the menu to reach the last item :-( I have these two: http://tjkdesign.com/articles/new_drop_down/default.asp http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp They show what's involved and what are the limitations. Pure CSS menus are a bad idea, and hybrid implementations that claim to be accessible simply because links are accessible are often bad solutions too. Imho, users should be able to access all pages within a web site without frustration. -- 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 ***
RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
Hey Thierry, Sorry to say this but the keyboard friendly version: http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp Only fires, via keyboard, on Articles E-K in IEv8 or Firefox. Mike -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Thierry Koblentz Sent: 29 June 2010 16:22 To: wsg@webstandardsgroup.org Subject: RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu) Try this for CSS menus with keyboard support: http://carroll.org.uk/sandbox/suckerfish/bones2.html This menu may be accessible, but is it usable? Unless I am missing something, keyboard users need to go through *every single link* in the menu to reach the last item :-( I have these two: http://tjkdesign.com/articles/new_drop_down/default.asp http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp They show what's involved and what are the limitations. Pure CSS menus are a bad idea, and hybrid implementations that claim to be accessible simply because links are accessible are often bad solutions too. Imho, users should be able to access all pages within a web site without frustration. -- 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 *** 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 ***
RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
Hi Mike, Sorry to say this but the keyboard friendly version: http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp Only fires, via keyboard, on Articles E-K in IEv8 or Firefox. This is by design. Keyboard users could not reach these pages if they were not focusable at least from the parent page. The About this solution section says: Note that keyboard users cannot skip the sub-menu related to the current page. This is because this sub-menu is exposed to SE (Search Engines) and thus accessible to keyboard users when JS is off. The sub-menus open via the *enter key*, this is to allow keyboard users to skip sub menus so they are not forced to tab through all the menu items. If the menu is accessible, it is *because* the sub menu related to the page itself *is* focusable (it is not styled with display:none). What this menu is missing though is a arrow pointer for *discoverability*. I have a title in there, but I think it's pretty useless (for 99.99% of users). If I had time, I'd add arrows and ARIA roles too. -- 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 ***
Re: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
Sorry to say this but the keyboard friendly version: http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp Only fires, via keyboard, on Articles E-K in IEv8 or Firefox. This is by design. Keyboard users could not reach these pages if they were not focusable at least from the parent page. The About this solution section says: Note that keyboard users cannot skip the sub-menu related to the current page. This is because this sub-menu is exposed to SE (Search Engines) and thus accessible to keyboard users when JS is off. The sub-menus open via the *enter key*, this is to allow keyboard users to skip sub menus so they are not forced to tab through all the menu items. If the menu is accessible, it is *because* the sub menu related to the page itself *is* focusable (it is not styled with display:none). What this menu is missing though is a arrow pointer for *discoverability*. I have a title in there, but I think it's pretty useless (for 99.99% of users). If I had time, I'd add arrows and ARIA roles too. I have a bug report... tested against FF 3.6.4 and IE6 (no bug under Chrome 5.0.376) Steps to reproduce: - click on background - tab to focus first menu item - hit enter to display sub-items - tab through to the second menu - hit enter to display its sub-items (the first menu closes) - hit shift-tab to go back to the first menu The bug is either one of a) the first menu shouldn't open as the second menu is active, or b) that the second menu stays open. regards, Mathew Robertson *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
