Re: [WSG] NCFH Site Check and CSS Issues

[Benjamin Hawkes-Lewis]

On 27/12/08 17:36, Chris Kennon wrote:


(3) The use of a background-image for the logo with the text
positioned off-screen means that if the user enforces their own colors
for increased legibility, the header _and its text_ will likely be
invisible.


What image replacement techniques do you suggest to compensate for this
issue?


Since all the widely CSS image replacement hacks I've seen are broken in 
this regard, I suggest using IMG with ALT as the least bad option until 
CSS3 content:url() image replacement is implemented in browsers 
additional to the (uncommonly used) Opera and Safari.


http://www.w3.org/TR/css3-content/

http://www.css3.info/image-replacement-in-css3/

--
Benjamin Hawkes-Lewis


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

Re: [WSG] NCFH Site Check and CSS Issues

[Chris Kennon]

On Dec 23, 2008, at 7:06 AM, Benjamin Hawkes-Lewis wrote:


On 22/12/08 20:55, Chris Kennon wrote:
Here a screen capture of the desired site layout and navigation  
styles:



The drop downs appear above a flash element. And some reports of the
background color not
appearing Firefox have been reported. Would the list review the site,
offering CSS suggestions as needed?




Like Henrik, I'm curious as to why a Flash object is being used,  
not a background image.



Their will be a flash presentation, the current object was for  
testing the dropdowns.


I suspect the drop downs aren't appearing above the Flash properly  
because its wmode is set to transparent not opaque.


http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15523


Thanks


A few other issues:

(1) What's your plan for keyboard accessibility of the navigation  
(or the items the navigation leads to)? At the moment, as I tab  
through the page, for large swathes of the tab order there is  
almost no visible focus.


http://www.w3.org/TR/WCAG20/#navigation-mechanisms-focus-visible

http://www.w3.org/TR/WCAG20/#keyboard-operation

Make sure there's a visible focus ring.


Will investigate


(2) In your CSS, ul#mainNav a sets a height in pixels for an  
anchor. This is highly unrealistic in a medium where you don't have  
good control over the font size. It causes the navigation items to  
overlap with font size increased merely two steps in Firefox.


Thanks


(3) The use of a background-image for the logo with the text  
positioned off-screen means that if the user enforces their own  
colors for increased legibility, the header _and its text_ will  
likely be invisible.


What image replacement techniques do you suggest to compensate for  
this issue?


--
Benjamin Hawkes-Lewis


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





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