Re: [WSG] How to resolve z-index problem for select box in IE 6
Ditto what Michael and Matthew said, it is not a z-index issue, but an IE6 rendering issue Google for something like ie6 select iframe Google iframe shim and you'll find many variations of the same answer. -- Nick *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] web style guide
And a couple more links: http://www.pebbleroad.com/articles/view/Creating-Maintaining-a-Web-Style-Guide/ http://delicious.com/maish/styleguide 2009/12/3 kris wright kcwri...@gmail.com: Hi Lucien, I don't have any style guides of my own to share, but I have two links you may want to review: A List Apart: Writing an interface style guide (http://www.alistapart.com/articles/writingainterfacestyleguide/) Government of Canada's Common Look and Feel for the Internet (http://www.tbs-sct.gc.ca/clf2-nsi2/index-eng.asp) Kris On Wed, Dec 2, 2009 at 8:59 PM, nedlud ned...@gmail.com wrote: Hi there, I need to write a web style guide for our web site. Does anyone know of any good examples I could draw inspiration from? We already have our style sheets etc working, but need to have some kind of documentation we can hand to third party or contract developers so they can work to our standards. Thanks, Lucien. *** 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 *** -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Select Padding in IE
Can anyone tell me how to fix this? Don't use padding ;-) You need to put a wrapper div around it and play with conditional comments. IE has fixed some values for form elements and you can not change them, I know that IE6 had fixed values for padding and some others for attributes of the button element. (this was while investigating a solution to fixed values in Safari on OsX for input type submit) *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Chrome now higher traffic than IE
Hi It is the State Library of WA. Looking further into our stats, over one third of our visitors come from the 80 public access machines around the building, which accounts for the heavy bias of IE7 on windows. Making these stats unrepresentative, sorry I did not expect that many when I start using them. An equal number are from within WA, with a large number of visitors from the education (schools and universities) and government sectors as well as local libraries. The remaining 30% are evenly split between the rest of Australia and the rest of the world. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Chrome now higher traffic than IE
My blog has similar stats except it is Firefox over 50%, Safari about 10%, and Chrome around 5% I am thinking somehow Chrome and Firefox got swap around somehow? 2009/3/3 Blake haswel...@gmail.com: On Tue, Mar 3, 2009 at 12:03 PM, Mike Kear w...@afpwebworks.com wrote: Google Chrome now amounts to over half the traffic on these sites. Wow, that's the first time I've seen Chrome over 4%. Why are these stats so scewed, if I may ask? -- Blake http://www.blakehaswell.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Chrome now higher traffic than IE
OK here are some other interesting stats from another major library site, IE7 rules and Chrome is 0.5% Browser Website IE7/IE6 Internet Explorer 86.88% (80/20) Firefox 9.29% Safari 2.17% Chrome0.47% Opera 0.27% More interesting are the wifi browsers, mainly netbooks and inexpensive laptops, which are as likely to be Chinese language as English Browser WifiIE7/IE6 Internet Explorer 69.56% (67/33) Firefox20.42% Safari 8.64% (Mac + iPod + iPhone + Symbian) Opera 1.09% Chrome 0.07% Blazer 0.06% Playstation Portable 0.05% IE6 has gone from 1 in 5 on the regular site to 1 in 3 of all IE connections in this sample of 10k. Of interest Chrome on Windows is only slightly more popular than Blazer or PSP (and less than Safari on Symbian or IE8) *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] IE and the button element
Rob wrote: Buttons were mainly designed as triggers for javascript behaviour, I disagree, if you look at the original HTML 4 material, you will see that the button element promoted as an improved input element. Why not form action=foo.html type=postbutton type=submitfoo/button/form -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] IE and the button element
2009/2/23 Frank Palinkas fmpalin...@gmail.com: IMHO, not very semantic in nature. We need the button element to be able to carry a valid link-type attribute. Enclosing it in a form just don't cut it. We are talking HTML 4 here, so to have a link you have to use an anchor tag, a form or javascript. Frank is correct, a link is semantically correct way to go and to get the behaviour John wants, he is better off using javascript than a button. Though I don't know of a way of disabling a link with javascript The form option, gives more control, but is less semantically correct than a plain link and will work with javascript disabled. You can use a button outside of a form and attached javascript to it. This might not be semantically correct, does everything John wants. Only problem does not work with javascript disabled. -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Federal Court hearing re Virgin Blue website accessiblity
Chris, thanks for bringing it to my attention, I did not know about the up coming court case. I have seen a letter Mr Kerr sent a company regarding an inaccessible website: http://forums.port80.asn.au/showthread.php?t=12018#6 and received and replied to email Mr Kerr sent as a response to my forum comment. Apparently I have a different opinion from Mr Kerr on what makes a web site accessible under the Disabilities Discrimination Act. It should be an interesting case and I am looking forward to the results. This will be very different from Maguire vs SOCOG as it is in the Federal Magristrates Court not the Human Rights Commission. I hope that Mr Kerr's legal team have more than Mr Kerr and a letter from HREOC on their side. Because if I was Virgin Blue, I would have a couple of experts from Vision Australia and a couple of screen reader users to tell/show how they can book tickets via Virgin Blue's website (ala the Target defense last year in the US). -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Federal Court hearing re Virgin Blue website accessiblity
2009/1/20 Matthew Pennell matthewpenn...@gmail.com On Tue, Jan 20, 2009 at 8:03 AM, Nick Cowie cowie.n...@gmail.com wrote: Apparently I have a different opinion from Mr Kerr on what makes a web site accessible under the Disabilities Discrimination Act. Care to expand on that point? Do his views jibe with what most web developers would consider 'accessible'? From Mr Kerr's original letter, his opinion appears to that the WCAG 1.0 guidelines priority level 1, 2 and 3 are the be all and end all of accessibility, particularly with regard to the DDA. I take a far more pragmatic approach, particularly when it comes to the 10 year WCAG 1.0 and a number of the priority 3 guidelines that are more likely to make a site inaccessible than accessible. http://wcagsamurai.org/ Personally I find both WCAG 1.0 and WCAG 2.0 to be lacking when it comes to language related disabilities. Both for people with cognitive impairments and those with english as second language, for example people with hearing impairment whose primary language is sign language. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] re: Firefox v3 and opacity on opacity
Mike
I did not have any of that problem or any other issues with Firefox 3.04,
3.05 or 3.1b2 on Mac OS X 10.5.6
Nick
2008/12/19 Foskett, Mike mike.fosk...@uk.tesco.com
Hi all,
After finally upgrading Firefox to version 3.05, I encountered a rather
unusual bug.
When opacity is set to more than one level of container, contained links
render badly on hover.
Hovered link text turns white on white, which doesn't return to the natural
state on mouse out.
Scrolling the link off screen restores the link colour.
Here's a demo which only causes issues in Firefox v3.
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en
head
meta http-equiv=content-type content=text/html; charset=utf-8 /
titleopacity/title
style type=text/css
html * {border:0 solid; padding:0; margin:0; list-style:none}
a,
a:visited {color:#5E6277}
a:active,
a:focus{color:#c60}
a:hover{color:#000}
#wrapper{border:1px solid #ccc; width:200px; padding:20px;}
#panel{border:1px solid #f00; margin:0 auto; background:#eee;
padding:10px}
/style
/head
body
div id=wrapper style=opacity:0.9
div id=panel style=opacity:0.9
ul
lia href=#Gzip content: Speed up your
site/a/li
lia href=#Accessible AJAX glossary/a/li
lia href=#Displaying code in web pages/a/li
/ul
/div
/div
/body
/html
Does anyone out there now of a solution?
Mike Foskett
http://websemantics.co.uk/
Disclaimer
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
***
--
Nick Cowie
http://nickcowie.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Downloading Fonts
@font-face supported by Firefox 3.1+ (currently beta), Safari 3+, Opera 10+ (currently alpha) and internet explorer 5+ only problem Firefox 3+, Safari 3+, Opera 10+ support raw font formats (OTF, TTF) only IE supports EOT format only Suggested reading (and tutorial) http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work The history of EOT and why (by Bert Bos good read) http://www.w3.org/Fonts/Misc/eot-report-2008 Nick *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] WCAG2 in govt
I know WCAG2 is being considered in Western Australia. There is a debate to wait for it to reach W3C Recommendation status and spend our resources working on other issues now. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Form Buttons
You have a few choices: 1. Use input type=submit and scale the input using ems. Advantages Will scale in most browsers works in all mobile browsers works with CSS disabled works with images disabled works with javascript disabled Disadvantages: Does not scale in Safari or Camino Can only use images as a background image which you can't scale easily 2. Use button type=submit, use a scaling image and scale the image and button using ems. Advantages Will scale in all browsers that support the button element works with CSS disabled works with images disabled (if you use decent alt text) works with javascript disabled Disadvantages: Button is not supported by some mobile browsers and Netscape 4 3: Use a link around scaling image Will scale in all browsers works with CSS disabled works with images disabled (if you use decent alt text) Disadvantages: will not work with javascript disabled (needed for form submit If you want to see the examples of the button element have a look at a presentation I gave 2.5 years ago, it also show the limitations of the input element. http://nickcowie.com/presentation/s5-button.html Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Should we design for 800x600 screens?
I agree with Felix, you have build for your users not for screen resolutions be it 1280x800, 800x480, 392x320, 240x320 (in the top 20 resolutions visiting my work website) and the number of pixels per inch is no longer in the 70 to 100 pixel range, but 70 to 250+ pixel range. So your trusty 280 pixel wide image is 4 inches wide on some screens but just over an inch wide on others. I have no great answers because the devices visiting a website are so varied today, but you need to think about before you design. Nick *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Breadcrumbs showing organisational structure and usability
I agree with Steve Baty Breadcrumbs hurt no one and help more than a few. I have been spending a lot of time recently with our users, talking menu systems, navigation, breadcrumbs trails and expectations. If Parent Org Clinical Services Library Current page is a list of links and you can easily go from Parent Org to Clinical Services in one step and from Clinical Services to Library in one step (and hopefully from Library to Current page in one step) Then you are doing your clients a disservice, but not letting them know the full structure of your organisation and it's website. Most library users don't care about your parent org, but a few will. Plus it will give your site more authority, as it is seen part of bigger picture. You will get same answer if you asked on IAI - Information Architects Institutes mailing list. You have to join the IAI, but if your are interested in this type of thing, it is well worth it. ps I work in a library and we have a difficult parent org ;-) -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Reset the styles on a submit button with CSS
Paul Go have a look at http://nickcowie.com/presentation/s5-button.html it should show what you can and can't style on input type submit (particularly safari/camino), and what you can do with the button element. Note it is a couple of years old and I don't use the button element at the moment. Waiting for XHTML-MP 1.2 to get into common use. 2008/5/6 Matthew Pennell [EMAIL PROTECTED]: On Tue, May 6, 2008 at 1:52 PM, Paul Collins [EMAIL PROTECTED] wrote: My issue is that the submit buttons now have this styling also in certain browsers. I'd like to give them a class and set them back to their original look, but background:none; doesn't work. Is there a way of doing this does anyone know? Not quite what you asked, but have you considered using the button element for your submit button instead of an input? Removes this kind of annoyance. -- - Matthew *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Client cannot view website
ditto in IE6 there is nothing below the menubar except on the facilities page where the content appears, but the header appears halfway down the page. because of ' div id=header/div' I would add float: left; for #content if you float a block you need to float it's parent for some browsers to render it. Nick On 08/04/2008, Алексей Тен [EMAIL PROTECTED] wrote: I'm can't see content in IE6 too. Adding position:relative to #sidebar and #main fixes the problem. On Tue, Apr 8, 2008 at 12:00 PM, Lynette Smith [EMAIL PROTECTED] wrote: I hope this post is allowed. Just had a call from a client to say he cannot see all of his website. He does not seem very computer literate. He says he can see the first bit ( header and the navigation bar underneath the header), but below is just a green blank page. I can see nothing wrong with the site which has been up for ages and am thinking it is his computer though I have no idea what could be wrong. He uses IE. Is there anything I can get him to check.. Url is www.bourkebridgeinn.com.au Thanks Lyn www.westernwebdesign.com.au *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Алексей *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Flash on top of Flash
Good luck ;-)
Wait until you try it on a Mac or Linux box, they treat flash quite
differently. Even to the level you scroll down a page and back up again, the
order of the menu and animation will swap.
Suggestion put the menu in an iframe.
On 29/02/2008, Anthony Milner [EMAIL PROTECTED] wrote:
Hi,
I have two flash files - 1 contains a flash menu the other contains an
animation. We are trying to position them on top of each other...
The flash menu is contained in a DIV with the following css..
.top_nav {position:absolute; top:0; left:0px; z-index:1000;}
The other flash animation file is contained in an iframe which is
contained in a DIV and the css for both the Iframe and DIV container are
as follows...
#ourrange_flash {width:1000px; height:420px;}
#ourrange_flash iframe {width:1000px; height:420px; padding:0; border:0;
margin:0; z-index:0;}
Firefox loads this page correctly, that is the menu on top of the
animation.
In IE, Safari and Opera the menu loads but appears BEHIND the animation.
I would have thought position:absolute with z-index has authority.
Any help would be greatly appreciated.
Regards,
Anthony
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Nick Cowie
http://nickcowie.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Disabling Fonts in Font Stacks
James I don't think anyone can without changing the stylesheet, but a fairly easy way to make a temporary change is a toolbox option like Web Developer's edit CSS. Felix is right the quickest and easiest way to test how different fonts look on a certain page in your browser is to use Web Developer plugin for FF and edit the CSS in your browser. Fast and painless. -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] html css review wanted
David wrote: All the disclaimers make it difficult to review. All I wanted to avoid with those disclaimers was: 1. You should of used shorthand properties to save space in layout.css (I know, it was the quick and dirty fix) 2. Felix to remind me that not everybody has a default font size of 16px You are relatively alright in IE7.0. In all browsers, the page is a little reluctant to be dragged from a full to narrower window but recovers: but perhaps a little less so in Mac Opera/9.24. My main problem was with Mac Opera/9.23 when the top line of links overlaying itself. No idea why it was the simplest part of the layout in terms of HTML CSS. I think I understand one of the issues with window dragging and resizing, the whole slow to load below the header issue. Did the footer centre in IE7? I am not happy with the centring of the footer, it was part of the original design concept, but with rest of the design restricted to a tight grid, it is out of whack. Plus I had to use 3 different different techniques to centre a floating list that does not have a fixed width. For Opera and Safari it was using a container div For FF is was display: table; for the UL and for IE (well at least 6 and below) a little bit of js. Any better technique would be appreciated. I have a little trouble (personal opinion) with navigation that is larger than content text, That is useful feedback, I was feeling uncomfortable about the different size text in the top nav bar and the side nav bar. Another opinion is always good, it will change. and content text that is set larger than default. I set my content text size in strange way. I work out the size of the area to be filled with text. Work out the maximum line length that is comfortable to read (somewhere between 2 and 3 alphabets 50-80 characters ) And then adjust the fontsize to the content text is most readable. So with an elastic design, the main content area tends to be about 40ems. And then stretch the design to fit the window. I am interested in what other people believe how default content size should be set? Should we follow the most common behaviour and set it to 75%, 12px, 81%, 13px or something else? -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] html css review wanted
Got to build new template for work, so if you could look at: http://nickcowie.com/other/template/index.html And do a critical review of the HTML and CSS (though ignore the poor structure, lack of annotations and a dodgy bit of ie only code to centre the ul in the footer) in layout.css (to be fixed) ie could I do it better, did I use some dodgy techniques, is there a way to align the top menu 2nd border with the divider between navigation and content in safari and opera (it works in IE and FF). It is the problems of using ems for on a grid heavy ayout and then having to adjust for single pixel width dividers using negative margins. Known problems The javascript assumes 16px base font size, that is to be fixed. IE5.5 and below box model (also to be fixed) ps does it work in IE7 and Opera for Mac (weird stuff happened but I need to upgrade)? footer in centred will everything else is grid based. Thanks -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] How to make DHML cover flash
Michael No problems with flash and the menu on my Mac OsX 10.4.9 with FF, Safari or Opera Other than issues above, menu typeface is tiny in both FF and Opera, increasing font size to read them does do damage to the menus with FF, still usable though. Flickering is also visible for me with Safari 2.0.4 ps that flash movie took ages to download. should be split into smaller pieces that get called as movie progresses. Nick *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] How to make DHML cover flash
On 16/10/2007, Michael Kear [EMAIL PROTECTED] wrote: This has fixed the problem for IE6 and Firefox on Windows, so I'm assuming it's fixed for most of our target browsers. Probably not. If your target OSes other than windows, the flash plugin works quite differently on OsX and *nix. I was experimenting with HTML over flash, and while param name=wmode value=transparent / works great on Windows. The flash plugin could not get the order right for OsX or *nix, no matter what I tried (source order, z-index etc). It was purely random 50% of the time the flash would appear over the HTML and the other 50% of the time the HTML would appear over the flash file. I was using it on a footer and could just scroll up and down the page a few times to get different results. So you need to check your menu system on one of those OSes. Just rollover the menu a few times and see what happens. -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: A: [WSG] Target Lawsuit - Please Make Yourself Heard
Andrew Maben wrote: On Oct 4, 2007, at 12:23 AM, Michael MD wrote: Opening the door to yet more lawsuits... In 2000, Bruce Maguire's accessibility complaint against the Olympics.comwebsite was upheld. Did this lead to a spate of frivolous, discriminatory lawsuits in Australia? As none of the advocates of business' freedom to discriminate in any way they choose has brought such a flood to our attention, I would assume that there have in fact been few or no accessibility suits filed. 0 law suits to be precise. If fact between 2000 and 2006 only 3 complaints about inaccessible web sites were lodged with HREOC and all three where resolved amicably. None made it to court, and nobody attempted to bypass HREOC negotiation and go directly into court. On the other hand the existence of WSG is surely a measure of how seriously the issue of accessibility is now taken in the Australian developer community... Only in some sectors,there a still a number of inaccessible web sites in the .au domain, but is has been steadily improving. -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: A: [WSG] Target Lawsuit - Please Make Yourself Heard
Well the first round has been decided a couple of days ago: http://www.nfb.org/nfb/NewsBot.asp?MODE=VIEWID=221 http://news.yahoo.com/s/nm/20071003/wr_nm/target_blind_dc_4 the DDA does apply to websites cynicallet more legal battles begin/cynical *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: A: [WSG] Target Lawsuit - Please Make Yourself Heard
One thing most people are missing is that with HTML1.0 the www was accessible to a screenreader, there was no images, no tables etc. The only way to make it inaccessible to any members of the community was badly written or organised content. Since that time a bunch of new features have been added and since that time these features have been implemented by web designers with out understanding the implications. Off my soapbox and look at the implications of the current court action. 1. The current argument before the court is does the Americans with Disabilities Act cover websites. This is a fairly important precedent that needs to be made/overturned (Southwest Airlines in 2002) because use of the internet has become far more mainstream in the last few years. 2. Target made the decision to fight it on these grounds not the National Federation for the Blind or it's member whose name is used because the way the court system works in California 3. Like the SOCOG vs Maquire in Australia in 2000 are fighting it in court because they think it is easier than to fix their website. It cost SOCOG and IBM roughly $500,000 in legal costs instead of less than $50,000 to fix the site. 4. From what I have been told, the Target site is a bad implementation of the Amazon e-commerce engine. If the result goes against Target, expect to see an improved version all round. If you Americans think the Disabilities Act is bad law then lobby your congress/senate/big cheese to get it changed. Me, I believe the internet is very liberating for people with disabilities as the can interact just like everybody, until some lazy or ill-informed web designer/developer stops them because the do not understand what they are doing. -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE, alpha transparency and sliding doors...
Caitlin It should be possible, depends on how much time you are willing to invest. I have always had problems applying AlphaImageloader to background images. So I don't even try. I would build the site so it worked in all modern browser. The using conditional comments apply a special CSS for IE 5.5 6 that replaces the transparent background .png files with transparent background .gif and use the Gradient Filter http://msdn2.microsoft.com/en-us/library/ms532997.aspx AlphaImageLoader Filter where necessary. You can see the basic idea in the CSS here http://www.docep.wa.gov.au/lr/worklife/overview.html (it is now an ugly invalid site now, but three years ago when I last touched it it was clean and valid). If you change your font size, it is an elastic site, the background image still appears through the semi-transparent menu background. In IE (including 7 I built this 3 years ago) the background is a gif and AlphaImageloader is used on the menu div to make the whole div semi-transparent. In all other modern browsers because the background is a semi-transparent png Using that technique with both AlphaImageloader and Gradient filter should get you the results you need Nick *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE, alpha transparency and sliding doors...
Stephen asked: Could you use solid background gif and then the opacity filter in your IE6 style sheet? I'm not sure if you can make the child of a translucent parent opaque though. Yes and Yes, I was lazy and chose to do it via background colour rather than image (is was easier to get a colour match) and you can make the child of a translucent parent opaque. I had to go find the IE CSS for that page. But that is what I did. http://www.docep.wa.gov.au/presentation/style/wlieonly.css I could not agree with Joe more: Impossible? Not if you have a huge amount of time to put towards ironing out the issues. It will consume a couple of days to get it right in IE 5.5 and 6 if that is what the client / boss wants and is willing to pay for then do it. You will know for next time. Otherwise use conditional comments and feed a gif with no shadow to IE 6 and below. Half and hour of your time instead of days. Nick *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] (X)HTML Best Practice Sheet goes live - correct link
Lars Thanks for this, it is a handy reference. Especially with XHTML mobile. -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] designing for handheld
Tee asked So which emulators (simulators) are correct? Which one of the 30+ mobile web browsers are you trying to emulate? There are many different browsers http://en.wikipedia.org/wiki/Microbrowser#Popular_mobile_browsers and even different versions of the same browser that render pages differently. The only one I would give a good chance of emulating on a desktop almost perfectly every time is Opera Mini, because how it works. You request a page, a proxy retrieves that page and then serves you some of the content it believes will display correctly on your java midlet opera mini. As the proxy server does all the work and the java midlet will run on most phones, PCs and even embedded in webpages unchanged. You should always get the same results. Opera Mobile is rumoured to be about a version behind Opera Desktop. So in theory the current Opera mobile renders like Opera 8 or 8.5? Of course some things will be a little different, I have done minimal testing and Opera Mobile and Opera do render similar. Which version of Safari matches which of the 4 major releases of the S60 browser? Don't know have not been able to test, I don't own a Nokia. Internet Explorer Mobile bears about as much resemblance to IE/Win as IE/Mac does to IE/Win, they are quite different creatures. IEM I am using uses different subset of XHTML and CSS, XHTML-MP and WCSS that the IE/Win. IEM also has a few different versions, I upgraded my Windows Mobile 5 a few months back and IEM went from unusable to as usable as Opera Mobile for me. Personally other than Opera Mini, I don't think you have a hope of testing in an emulator and getting the right result. The bad news is you will need a heap of mobile devices, with a variety of different versions of the same software to be able to test a website to render is the most common browsers. Or build a very simple mobile version of the site. Nick -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] H1 font not set in IE
Nick The odd results you are getting is because you are wrapping the fonts in double quotes ie garamond. You do not need to wrap font names in quotes unless the have a space in them and them you should use single quotes ie 'apple garamond' Nick *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] H1 font not set in IE
Raena wrote: No, either doubles or singles are correct. http://www.w3.org/TR/REC-CSS1#font-family Double quotes might be correct in the specs and for all browsers that follow the specs including surprisingly IE6. Except for FF on windows, it does not want to play by the rules it needs single quotes not double quotes, I found this out the hard way last week. Nick *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Visual Design Of Websites
I think that everybody has missed the original point of Marvin's post. Marvin was looking for help in completing his visual design units in his web design course, as Marvin is visually impaired and is trying to build websites for sighted people using a screen reader. And you thought is was hard the other way round. I assume Marvin must pass the visual design units to complete the course. Do not pass the course and no qualification, no chance of further education and less chance of a job in the field he wants. Marvin is after advice, help, tips, tricks and techniques for visual design, such as colour theory, image size etc. as well as suggestions on how to storyboards and flowcharts. I don't have a lot of links at hand but I will have a look over the weekend for you Marvin. I hope a few others can go through there del.icio.us accounts and similar and find a few links for Marvin before next semester. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Mobiles and standards
Katrina I would serve XHTML and stick to XHTML-Basic or XHTML-MP subset of features. Because not all elements are available in XHTML-Basic or XHTML-MP for example button. So if you build a form use input type=submit not button type=submit otherwise most mobile users will not be able to submit the form. And only use the WCSS (Wireless CSS) standards you should get most modern phones. Specs (both 400Kb PDFs) XHTML-WP http://www.openmobilealliance.org/release_program/docs/browsing/v2_2-20061020-a/oma-wap-xhtmlmp-v1_1-20061020-a.pdf WCSS http://www.openmobilealliance.org/release_program/docs/browsing/v2_2-20061020-a/oma-wap-wcss-v1_1-20061020-a.pdf That is still no guarantee that it will work in all mobiles, there are a number of different OSes and around 50 different browsers for mobiles and you thought developing for the 4 different flavours of desktop browsers was difficult. Nick -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Mobiles and standards
Hi Katrina I have not done enough research on this, but: If I creating a site that I expected mobile browsers to visit (ie every site I create from now) I would use XHTML 1.0 transitional DTD, mime type of text/html and restrict my XHTML to the XHTML-MP subset and my CSS to the WCSS subset If I was building a mobile only site (and I have not done that yet), I would have to be convinced of the advantages of moving to a XHTML-MP dtd and associated mime type. In other words XHTML 1.0 transitional works with most browsers, computer or mobile based. I have done no research of redirecting mobile users to a different URL, .Apparently the WP-PDA plugin http://imthi.com/wp-pda does this and works with the major mobile browsers, so time to play with it. Nick -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Recommended screen size
If you look around the web today you will see the general consensus is 1024x768px. However, I would have a look at you stats to see what is the most appropriate for your site. For example my blog 800x600 accounts for less than 2.5% of the traffic, for my work site it is over 17%. If I was redesigning my work site it would be a 800x600 baseline. You also need to make sure the site is usable in mobile browsers. Surveys shows over 10% of mobile phone users have browsed web site on their phone. -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Converting font size from pt to % or em
On 25/05/07, Katrina [EMAIL PROTECTED] wrote:
I think you should respect your users' default. Make sure the design
scales properly when text size is increased, beyond what MIE allows you
to do.
I disagree a little here, about user defaults. Yes you should respect them,
but not by using 100% or 1em.
1em = 100% = 16px = 16pt (yes 1px = 1pt for the screen) in all PC based
browsers since 2000 unless changed by the user or PC manufacturer (this is
becoming a little more common with laptops having twice the pixels per inch
or cm that desktop screens).
From experience almost all users do not change the default.
Those that do, tend to push the size up a bit to deal with sites that set
the base pixel size in percentages (usually somewhere between 62 and 76%).
If I as a user want 16px text on sites I visited, I would set my default
size to 20px or 22px.
Due to a bug in an old version of IE most people when choosing to use
scaling fonts is set the body size in percentage and them use ems for all
other font size measurements.
Due to a rounding error bug in an old old version on Opera some people tend
to push the percentage up by 1%.
I would (and regularly do) decided on my base font size for text in px and
set my body font-size to:
percentages to pixels
56.25% or 57% = 9px or 9pt (way too small IMHO)
62.5% or 63% = 10px
69.75, 70 or 71% = 11px
75 or 76% = 12px
81.25 or 82% = 13px
87.5 or 88% = 14px
Then set
p, ol, ul, li, table, tr, td, a, input {font-size: 1em}
h1 {font-size: 2.5em or whatever}
There is another view that you should set your body font-size to 62.5% then
1em = 10px and calculate your sizes from there, ie 12px body text, 18px h1
is:
p { font-size: 1.2em or 120%;}
h1{font-size: 1.8em or 180%;}
I don't like this method, just in case I nest something or make small
mistake in my css.
ie if p, ol, ul, li, table, tr, td, a, input {font-size: 120%;}
would be 12px inside a paragraph, 14px links, 14px list and 17px links in a
list.
hopes that makes sense too much caffeine and other things for lunch
and if you want to scale your design to your font-size google elastic
design http://www.google.com/search?q=elastic+design
--
Nick Cowie
http://nickcowie.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] stand alone blog software
I agree with Lucien unless there are other requirements (ie no php must bet .NET) go wordpress, *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Tiling image problem
Hi
#wrapper {
position: relative;
width: 770px;
margin: 0 auto;
text-align: left;
background:
url(/resources/5661/assets/images_medical/wrapper_tile.jpg) repeat-y 0
300px;
}
Should work, my suggestion is try it with a 770by2px image, I have had
weird problems with repeating 1px wide images in FF or Safari (can't
remember which one) I always used 2px wide images now.
--
Nick Cowie
http://nickcowie.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] wa state guidlines question
Jermayn You might want to consider posting the question to the WA Online Services Interest Group http://www.dpc.wa.gov.au/psmd/osig/osig.html It is a very low traffic mailing list for WA public sector. A number of the people involved in the development of the guidelines are on that list. The State Government Web Site Guidelines do not mention opening links or documents in new windows. If I remember correctly it was discussed by the working group on version 2 of the guidelines and because there where two quite different opposing views, it was left out of the guidelines. You need to check section 3.12 which covers content in pdf, word and other non HTML formats. You wrote: I found a reference about html and pdf copies as pdf is not accessible (word is) I would disagree. I believe the pdf and word issue dates back to 1999 or so, when you needed to upgrade to the latest and greatest of JAWS at considerable cost to fully access pdfs. Things have changed in 8 years. Now you can access pdfs with almost any screenreader (that is less than 8 years old) and a free version of acrobat. For word documents you also need software to open it and the most common, word costs. -- Nick Cowie http://nickcowie.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] 3 column layout - centre column forced below side columns in IE at low resolution
I would of suggested wrapping a div with float: left around #sidebar_a and #content so when worse came to worse you forced #sidebar_b below the main content.However, that would require a major change in your source code. And seeing your are already using conditional comments to serve a .htc behaviour to ie only. Why not add another for min-width options:
grab ie7 behaviours from Dean Edwards http://dean.edwards.name/IE7/ try this one it is much smaller but untested
http://archivist.incutio.com/viewlist/css-discuss/42236or just add the following into you conditional comment:style type=text/css
.minWidth{
width:_expression_(document.body.clientWidth 800 ? 800px: auto );
}
/style
-- Nick Cowiehttp://nickcowie.com
Re: [WSG] Safari Lightening Entire Background Image
My suggestion it has something to do with the two background images involved:html { min-height:100%; margin-bottom:1px; background:url(../_images/bg2.jpg); }body { background:url(../_images/bg.jpg) repeat-x top;
position:relative;(snip) }Safari has a bug which can cause background images to behave badly (if the background image is larger than the container or set to repeat), the background image will overflow the container they are the background for.
I describe here - halfway down the page - see trouble with safarihttp://nickcowie.com/2005/elastic-faux-columns/I would remove background:url(../_images/bg.jpg) repeat-x top; from body and see if that resolves the issue
-- Nick Cowiehttp://nickcowie.com
Re: [WSG] Building a Two-Column Layout with Fixed-Width Columns
First off assuming IE7 beta works the same way as IE6, no doctype sends it into quirks mode. Which means it uses the old IE box model.Which means in IE 100% width on #Content_Background is 680px which is broken down to 660px of container width and 20 px of margin. In Firefox 100% width on #Content_Background in 680px which is the container width + 20 px of margin. Personal I would give no width and 10px border to #Sub_Wrapper and 680px width to #Content_Background and Header. Exclude #Footer from #Sub_Wrapper and give #Footer a width of 700px.ps you need to make sure each declaration in your css ends with ; for it to work -- Nick Cowiehttp://nickcowie.com
Re: [WSG] Dean Edwards IE7... just PNG support?
Josh asked: Alternatively, how does one go about getting alpha support for CSS
background images? Not having a great deal of luck with this...I could not get alpha support for CSS background images to work in IE. I tried pngbehaviour.htc (
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html ) and various versions of Dean Edwards' IE7.Instead I use an alternative method.I use condional comments to feed IE6 and below an extra css which has
#DivWithBackground { background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enable=true, sizingMethod=scale, src='');
}Advatange you do not need _javascript_ or your server set up to serve .htc files as the correct mime type.You can find the method discussed in detail:
http://subtlegradient.com/articles/2005/11/30/get-ie-5-5-to-support-transparent-pngs-using-microsoft-chowhttp://www.daltonlp.com/daltonlp.cgi?item_type=1item_id=217
Read the comments sectionsFor alternative methodshttp://www.alistapart.com/articles/pngopacity/ also read the commentsFor more on MS Alpha image filter
http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp-- Nick Cowie
http://nickcowie.com
Re: [WSG] Setting Up Font Sizes
SamuelYou wrote: body { font-size .8em; } p { font-size : 90%; (adjust per design to get the correct sizes etc)}That is asking for trouble, you really need to watch out for the cascade. Get a p inside a p, an li inside an li or a li inside a p and suddenly instead of being 12px text ( 16px - default font size 16px *
0.8em (80%) * 90% (0.9em) = 11.52px ) it is 10px text (16px * 0.8 * 90% * 90% = 10.37px )personally it isbody { font-size 76%}the font size I will be using the great majority of my text. Default text size in all modern browsers is 16px and very few people change it. So 16px * 76% =
12.16px rounds to 12px p, table, td, ul, li, a, button { font-size: 1em }because some browser like to set their own values for certain elements. (and for IE that is in pixels, well that was my recent experience with the button element)
Also initially setting your font-size to ems can produce tiny text in some versions of IE, don't know which ones, but I have never really tested it.Nick Cowie
http://nickcowie.com
Re: [WSG] Variable background image size
I take it you want the left hand column to be a different colour to the main column, and both column to be the same length like this example and this example 2So when you change font size the column change size too.It goes something like thisdiv id=container style=background-color: left hand column bg colour; background-image: 1500px long 1px high gif, background-position 0 10.5em; background-repeat: y; width: 60em; float: none;div id=non semantic left column style= width: 10em; float: leftleft column/divdiv id=non semantic right column style= width: 49em; float: right right column /div/div-- Nick Cowiehttp://nickcowie.com
Re: [WSG] Lengthy form buttons
One way around this is to use button type=submit instead of input type=submitThe button tag offers far more opportunity to style than input, and allows you to include an image inside a button tag. The buttons look the same in all modern browsers regadless of OS.Did a little experimenting here: http://nickcowie.com/2005/stylish-accessible-buttons/ -- Nick Cowiehttp://nickcowie.com
Re: [WSG] Lengthy form buttons
Tim askedDoes button type=submit still submit a form by default, or does it require _javascript_ to do so?button type=submit = input type=submit but don't take my word for it, do what I did when I found out about the button element, go visit the W3c http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.5 If it doesn't require _javascript_.. why doesn't everyone use buttontype=submit?Because everybody has been taught / learnt to use the input element.The button element is the new kid on the block it was only introduced in 1997 with HTML 4.0 http://www.w3.org/TR/WD-html40-970708/interact/forms.html#edef-BUTTON input has be around a lot longer. -- Nick Cowiehttp://nickcowie.com
Re: [WSG] Scalable background-image?
lets rephrase the last bit of css
#image {
z-index:1;
}
#content {
z-index:2;
}
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Scalable background-image?
Another not as far as I know (but that is only as far as CSS2)
alternative is to layer content
div id=imageimage height=10em width=10em src=x.jpg //div
div id=contentLorem ipsum dolor sit amet, consectetuer adipiscing
elit. Cras odio leo, feugiat ut, adipiscing vitae, malesuada id,
risus. Aenean non augue. Nulla gravida mi id mauris./div
#image, #content {
position: absolute;
top: 10em;
left: 10em;
height: 10em;
width: 10em;
}
#image {
z-index:1;
}
#content {
z-index:1;
}
Which will work well for fixed layouts, ie you can fix the size in ems
of all divs with scalable background images and make use of container
divs with position: relative;
--
Nick Cowie
http://nickcowie.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Set min-width using DOM
Paul Thankyou for that, it will be very usefull for a couple of projects I have. The current test URL is here - http://d81314.i50.quadrahosting.com.au/ - One word of warning in IE6 at about 960px wide browser window the centre content drops below the calendar. It only happens in a small range say 950 to 970 pixels wide. Which leads me to my next question. Anyone know of a calendar solution using PHP that creates clean code? I would look at the one that comes with wordpress: http://wordpress.org it does nice valid code. -- Nick Cowie http://nickcowie.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Link behavior
Try
#sidebar li a { background: none;} or
#sidebar li a { line-height: 1.5em;}
It is the top of second line overwriting the bottom of the first line
of the link
--
Nick Cowie
http://nickcowie.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] BR tag causes odd behaviour ??
Can anyone see why the br / is causing the content to drop down below the
adjacent floated div in the page
How about the last line in formstyles.css
br{
clear : left;
}
--
Nick Cowie
http://nickcowie.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Couple of question - Image Map etc.
Q: should I use image maps or cut the image up? I believe I saw that its bad to use image maps, could be wrong here? Cut the image up, image maps are server side if my memory serves me right and I don't think anybody has used has really them since 1996, because it is quicker to slice up an image. -- Nick Cowie http://nickcowie.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Advanced CSS Training and Publications
Books CSS by examples I own both these and they are good to work through, I have learnt from both books. More Eric Meyer on CSS by Eric Meyer The Zen of CSS Design by Dave Shea and Molly Holzschlag Courses: West Civ http://www.westciv.com/courses/index.html there is even a free one to tempt you in. Resources http://www.csszengarden.com 185+ css files to see how the experts deal with css issues http://css.maxdesign.com.au/ http://www.maxdesign.com.au/presentation/ great tutorials http://alistapart.com lots of articles on anything to with CSS http://positioniseverything.net/ the problem solvers -- Nick Cowie http://nickcowie.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] faux columns for fixed AND percentage width
I wrote: I will see if I can pump out a working example to my blog in the next day or so. Why should I when there is an version at Position is Everything http://www.positioniseverything.net/articles/sidepages/jello-piefecta-cleanhtml It does everything you need and my example does need a little tidying up or more to work in all browsers Nick nickcowie.com This email is from the Department of Consumer and Employment Protection and any information or attachments to it may be confidential. If you are not the intended recipient, please reply mail to the sender informing them of the error and delete all copies from your computer system, including attachments and your reply email. As the information is confidential you must not disclose, copy or use it in any manner. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] faux columns for fixed AND percentage width
It can be done, but only if the content of the nav div will never be taller than any other div first you need div to hold the nav and content divs lets call that the holder: div id=holder style= float: left; /* need to hold floats */ background-color: #e8e8e8; /* gives nav grey background */ background-image: url(../images/LM_back.gif); /* a 1px 1600px wide gif with the first pixel black and the rest white to clearly delineate between nav and content */ background-repeat: repeat-y; background-position: 201px 0; div id =nav style= float: left; width: 200px; nav content /div div id=content style= float: right; width: auto; background-image: url(../images/LL_back.gif); /* a 1px 600px wide gif with the first pixel black and the rest white (or different colour to clearly delineate between centre and right content */ background-repeat: repeat-y; background-position: 67% 0; div id=center style= float: left; width: 66%; center content here /div div id=right style= float: right; width: 32%; right content here /div /div /div It should work, i did something similar before moving along to a full elastic model using ems - it evolved to sligthly different structure: http://www.docep.wa.gov.au/lr/default.html Nick This email is from the Department of Consumer and Employment Protection and any information or attachments to it may be confidential. If you are not the intended recipient, please reply mail to the sender informing them of the error and delete all copies from your computer system, including attachments and your reply email. As the information is confidential you must not disclose, copy or use it in any manner. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] faux columns for fixed AND percentage width
I wrote: It can be done, but only if the content of the nav div will never be taller than any other div It should read the nav div can not be longer (taller) than the longest (tallest) of centre or right div. I will see if I can pump out a working example to my blog in the next day or so. Nick nickcowie.com This email is from the Department of Consumer and Employment Protection and any information or attachments to it may be confidential. If you are not the intended recipient, please reply mail to the sender informing them of the error and delete all copies from your computer system, including attachments and your reply email. As the information is confidential you must not disclose, copy or use it in any manner. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Chinese food and web standards
Ian I am with Kay on Netscape 6.2 it was based on Mozilla 0.9.4.1 and released in October 2001. And quickly followed by 6.2.1 6.2.2 and 6.2.3 and then replaced within a year by Netscape 7 which ran a real Mozilla engine 1.0.1. http://en.wikipedia.org/wiki/Netscape NS 6.2 has not been in my support profile for over 18 months, never tested with it. But how disastrous your page looks I might just have to check a couple of recent sites, then write a detection script in javascript and feed a plain CSS (ie remove all positioning, floats etc.) for Netscape 6 users. As for Konqueror the screenshot does not look that bad, it appears to have problems with the javascript for advertising more than anything else. If you want to test in Linux, get a copy of Ubuntu live CD, drop the CD into your drive, reboot from the CD and you have a fully function Linux box, unfortunately it uses the Gnome desktop which knocks out testing Konqueror, but there should be something similar which uses the KDE desktop. Nick This email is from the Department of Consumer and Employment Protection and any information or attachments to it may be confidential. If you are not the intended recipient, please reply mail to the sender informing them of the error and delete all copies from your computer system, including attachments and your reply email. As the information is confidential you must not disclose, copy or use it in any manner. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Text will not valign
As you have sizes set for the containers it is easy to centre the text vertically: to #column2-header h2 add line-height: 50px; to #column2-footer h2 add line-height: 30px; my previous comments where about horiziontally aligning the text (late friday afternoon brain fade) Nick This email is from the Department of Consumer and Employment Protection and any information or attachments to it may be confidential. If you are not the intended recipient, please reply mail to the sender informing them of the error and delete all copies from your computer system, including attachments and your reply email. As the information is confidential you must not disclose, copy or use it in any manner. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Text will not valign
#column2-header h2
{
display: block;
is the culprit, a block will always fill available space and align left.
either
1. replace display: block; with display: inline;
2. Add a width to #column2-header h2 that is smaller than #column2-header and
change margin: 0; to margin: 0 auto;
that should solve the problem in most modern browsers
Nick
This email is from the Department of Consumer and Employment Protection and any
information or attachments to it may be confidential. If you are not the
intended recipient, please reply mail to the sender informing them of the error
and delete all copies from your computer system, including attachments and your
reply email. As the information is confidential you must not disclose, copy or
use it in any manner.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] How do I vertical-align bottom
You can use absolute positioning as long as it is inside a relatively positioned block element. Add postion: relative; to the td holding the div ad and to the div ad Add position: absoloute; bottom: 0; left: 0; Nick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Janelle Clemens Sent: Thursday, 6 October 2005 6:07 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] How do I vertical-align bottom Thanks Paul. I was hoping to find a solution without having to split the cell. But I might have to go that route. This email is from the Department of Consumer and Employment Protection and any information or attachments to it may be confidential. If you are not the intended recipient, please reply mail to the sender informing them of the error and delete all copies from your computer system, including attachments and your reply email. As the information is confidential you must not disclose, copy or use it in any manner. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] 'em' versus '%'
Wybe wrote: Actually i'm asking: what is the difference between using percentages or em's? (when it comes to font-size). No difference for just font-size. The advantage comes in using ems for both font-size and layout dimensions. Your layout can be proportional to your font size. Read Patrick Griffith's Elastic Layout http://www.alistapart.com/articles/elastic/ Nick This email is from the Department of Consumer and Employment Protection and any information or attachments to it may be confidential. If you are not the intended recipient, please reply mail to the sender informing them of the error and delete all copies from your computer system, including attachments and your reply email. As the information is confidential you must not disclose, copy or use it in any manner. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: Spam: [WSG] Help with navigation
From a quick look, it appears the class name differs between the two pages From navigation page a href=introduction.html class=currenttopicIntroduction/a From page a href=introduction.html class=topicIntroduction/a Nick This email is from the Department of Consumer and Employment Protection and any information or attachments to it may be confidential. If you are not the intended recipient, please reply mail to the sender informing them of the error and delete all copies from your computer system, including attachments and your reply email. As the information is confidential you must not disclose, copy or use it in any manner. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Spam: RE: [WSG] firefox for OS9?
Sorry for a possibly off-topic post. We have a client on our intranet that needs to look at our site on OS9.2. I couldn't find information on the Firefox web site about compatibility with this platform. Does anyone know where I could send this person for more advice? From memory and a quick look at http://browsers.evolt.org/ does not show any OS 9 Firefox versions. Best bet for a standards based OS 9 browser is Mozilla 1.2.1 from here: http://www.mozilla.org/releases/old-releases-1.1-1.4rc3.html#1.2.1 an alternative is Netscape 7.02 from: http://browsers.evolt.org/?navigator/mac/7.02 Nick This email is from the Department of Consumer and Employment Protection and any information or attachments to it may be confidential. If you are not the intended recipient, please reply mail to the sender informing them of the error and delete all copies from your computer system, including attachments and your reply email. As the information is confidential you must not disclose, copy or use it in any manner. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Absolute position problem in IE
tee wrote: Thanks but are your sure the menu is working??? It obviously doesn't in my IE 5/6 (both W2K and XP home); hover disappear and links are not clickable. Try it without the background png on the li. I see you are using IE7 from Dean Edwards, but the magic of his javascript may be conflicting with hover over a png. If that does not work, disable the ie7 patch and try again. I am sure that the problem is in that combination and not in absolute positioning inside a relative container. I have done far worse/ more complicated layout using absolute and relative containers. Nick This email is from the Department of Consumer and Employment Protection and any information or attachments to it may be confidential. If you are not the intended recipient, please reply mail to the sender informing them of the error and delete all copies from your computer system, including attachments and your reply email. As the information is confidential you must not disclose, copy or use it in any manner. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Standards Publication
Chris wrote: Has any knowledgeable soul read: Web Standards Design Guide (Internet Series) No and I am not racing out to order it either. I am slowly reading Kevin Ruse's previous book in that series - XML for Web Designers Using Macromedia Studio MX 2004 and while I learning a bit about XML (an area I completely lack knowledge), the HTML and CSS in that book makes me cringe. The HTML is basic and uses table for everything and the CSS is fairly primitive. It was like the code I wrote four or more years ago. Seeing that book was published in April 2004, I find it difficult to believe that Kevin Ruse has learnt enough in the year between books, to create a book on Web Standards that would interest me. This email is from the Department of Consumer and Employment Protection and any information or attachments to it may be confidential. If you are not the intended recipient, please reply mail to the sender informing them of the error and delete all copies from your computer system, including attachments and your reply email. As the information is confidential you must not disclose, copy or use it in any manner. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Space-saving Form Select vs Space-hungry HTML List
Dan wrote: What is the 'official' word on the use of form selects as an alternative to space hungry HTML lists? I would not even go think about using a form select for a menu, my experience has shown that most people ignore form selects. I inherited a web site many years ago that the main nav was in a form select. Over 50% of all users went from the home page straight to search. Replacing the form select with a list had dramatic results, basically an 75% reduction in the number of people who went to search straight after landing on the home page (ie just over 10% went home page search page, the remaining 90% went to other pages, and number of pages per visit increase). One surprise was the number of searches (it was a poor search engine) dropped from an average of 3 to 2 per visit to the search page. Nick This email is from the Department of Consumer and Employment Protection and any information or attachments to it may be confidential. If you are not the intended recipient, please reply mail to the sender informing them of the error and delete all copies from your computer system, including attachments and your reply email. As the information is confidential you must not disclose, copy or use it in any manner. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] silly question
anyone tell me why the list bullets are not showing in ie6. they appear to be working in firefox bar ie Try adding list-style-image: (url (images/dot.gif); to #c #list should fix it, can't give a logical explanation, it is to do with inheritance and specificity. And FF and IE using different logic/rules for dealing with specificity and iheritance. Nick This email is from the Department of Consumer and Employment Protection and any information or attachments to it may be confidential. If you are not the intended recipient, please reply mail to the sender informing them of the error and delete all copies from your computer system, including attachments and your reply email. As the information is confidential you must not disclose, copy or use it in any manner. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Spam: RE: [WSG] Is there any way to set the width of a file input field in Firefox?
Irina wrote: Does anybody knows how to set the width of a file input field in Firefox? Style like this produces funny looking input field (see file attached) Never had any problems with form elements or input fields with Firefox, other than legend. Most of what I use, I accquired from Cameron Adams via: http://www.themaninblue.com/writing/perspective/2004/03/24/ Nick This email is from the Department of Consumer and Employment Protection and any information or attachments to it may be confidential. If you are not the intended recipient, please reply mail to the sender informing them of the error and delete all copies from your computer system, including attachments and your reply email. As the information is confidential you must not disclose, copy or use it in any manner. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] why 3px out in ie
It is only 2px :-) and it is all to do with how IE handles the box model Tantek explains better than I can: http://tantek.com/CSS/Examples/boxmodelhack.html This email is from the Department of Consumer and Employment Protection and any information or attachments to it may be confidential. If you are not the intended recipient, please reply mail to the sender informing them of the error and delete all copies from your computer system, including attachments and your reply email. As the information is confidential you must not disclose, copy or use it in any manner. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Spam: RE: [WSG] making money out of web standards
Wong wrote: Ok, so a programmer may not be able to come out with works of art, but hey, I just want a corporate-looking site. Banner on top, footer bottom, menu on the left yadda yadda. Mr programmer, you can do that, right? No, go read How Do People Evaluate a Web Site's Credibility? Results from a Large Study http://www.consumerwebwatch.org/news/report3_credibilityresearch/stanfordPTL_abstract.htm I have started using that report to get programmers who think they can design - out of any design work. A well designed site is far more credible than a poorly designed site. Bob Regan from Macromedia's accessibility guru at a presentation a couple of years back said something like if you want to sell the advantages of accessibility/CSS/XHTML point the client to http://www.csszengarden.com/ because it is sexy and sex sells Nick This email is from the Department of Consumer and Employment Protection and any information or attachments to it may be confidential. If you are not the intended recipient, please reply mail to the sender informing them of the error and delete all copies from your computer system, including attachments and your reply email. As the information is confidential you must not disclose, copy or use it in any manner. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] rationalising my refusal to support IE/NS4
Kay wrote: I have a requirements document here that I'm quoting for, that mentions that the web site should be optimised for IE4 and Netscape 4. If it is a WA gov site they are quoting four year old state government guidelines which have not been updated and are unlikely in the near future. Get hold of their web logs or from a similar site, you should find the combined IE4/NS4 and earlier browsers account for less than 0.5% of all vistors (it is with our sites) and seeing a sizeable chunk ( a least a third) of those are using NS3, IE3 or NS4.04 (bad javascript) or earlier. It makes it highly illogical to build a site optimised for the 1 in 300 or 400 visitors that are using those particular ancient browsers, but not in devices like PDAs, mobiles etc. When you can build a site that will function in those old browsers and will be future proof, work with handhelds, mobile phones, screen readers etc. Nick ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Western Australian Government Website
One of the main problems with the WA gov sites is that a little over two years ago a large number of govt departments got amalgamated. Most of my peers have spent the last couple of years trying to get three, four or more sites into a single logical structure (and boy it is fun with all the internal polictics involved). I understand it hasn't been touched since 2001 - and that would certainly explain it. The dot com bust also hit gov hard, what was once a promising portal, is now all but abandoned. Regarding that link - that was another of my peeves. The average person isn't going to think of looking under Labor Relations or Work and Conditions for that info (I myself missed that link.) I think Public Holidays isn't even mention in the title of the search result but about 15 words into the description :( Part of my personal IA peeve, some people expect everybody to know intutively which section of which govt department look after what and expect us to build web sites around the structure of the department /section not around the structure of the information. I'm not intending to be negative - all I was is dissapointed that the site was so hard to use, almost every page was actually a different sub domain or domain, and looked totally different from the last :( While there is common branding http://www.commonbadge.dpc.wa.gov.au/ Most websites have a very different view of what it all means and with no direction from above it will continue that way. Nick ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Western Australian Government Website
I went to do a search on public holidays (which I am compiling from all Government Websites) and being a proud WA girl, thought our site would be the best. Visit http://www.docep.wa.gov.au/lr/LabourRelations/Content/Wages%20and%20Conditions/Public%20Holidays/Public_Holidays.html for the information. Alas, I was wrong and it's killing me how poor it is in relation to standards, accessibility and usability. And no this site does not validate, the CMS only likes HTML 4.01 and the code used for the drop downs is valid XHTML 1.1 transitional but not 4.01 transitional. It is something we are hoping will be fixed in the next version of the CMS. Another problem is that the content is cut and pasted from MS Word. Many content contributors, none who know or understand HTML. However, that site is accessible and has decent usability. Traffic has doubled in the last six months since the redesign (no promotion or any other changes, just redesigned and the information architecture improved). Does anyone on this list work in any dept in WA that could perhaps enlighten the powers that be at how bad the site makes WA look compared to other government sites? Yes. See http://www.egov.dpc.wa.gov.au/index.cfm?fuseaction=projects.policy for the Guidelines for State Government Web Sites. There is a push for standards based sites from the office of e-government and it is slowly happening, but very slowly. Nick ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Navbar to foot of page?
faux columns - using a background image of a container div to make it look like a section goes all the way done the page read about it here: http://www.alistapart.com/articles/fauxcolumns/ another couple of (mis)uses : http://www.docep.wa.gov.au/lr/default.html http://www.docep.wa.gov.au/lr/LabourRelations/Content/Public%20Sector/Current%20Issues/Current_Issues.html It can be done with three columns too. Just need to use two containers with background images, to hold the three columns. Nick ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] IE weird display problem
IE renders a 3px margin on adjacent divs in certain circunstances. This will take that out; in other browsers, if you have different backgrounds for each div this solution isn't suitable. That will be the IE Three Pixel Text-Jog http://www.positioniseverything.net/explorer/threepxtest.html You are not the first person to be caught out by it. Nick ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Tantek Celik on Ten CSS tricks you may not know
Recent Evolt article Ten CSS tricks you may not know, http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369/index.html You should know most of the tricks. Tantek's peer review http://tantek.com/log/2004/09.html#d07t1434 I found far more informative and I learnt more. Like why IE/Win ignores !important (it does not, IE/Win just has problems processing of multiple declarations of the same propertry in the same style rule.) Defintely worth the read. Nick ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Unaccessible - NY Attorney General busts two big name sites
Cameron wrote: Did we resolve whether Australian legislation has the potential for similar effects? Have you forgotten Sydney Olympics web site, it was 4 years ago the Human Rights Commission awarded A$20,000 compensation in the Maguire vs. SOCOG case. You can find it all here: http://www.contenu.nu/socog.html Nick ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] help on this rollover please
Jim asked I am having a problem with this sample rollover at http://www.barricksinsurance.com/button.html . It shows up fine with 4 rows across and 4 rows down on IE but it shows 5 rows across on Firefox. Has anybody any idea what is going wrong here Please? I believe is all to do with the box model http://tantek.com/CSS/Examples/boxmodelhack.html and that IE sees the li containers at greater than 20% in width and Gecko sees the containers as exactly 20% and 5*20% will fit in 100% two solutions: add clear: left; to ul.navlist this works while you have 4 items in each ul.navlist, personally I think this is a little bit of overkill and would use one ul for all items in a box. or increase the width in ul.navlist li from 20 to 22% works in both IE and Firefox. Nick ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Aligning the text in list items
Anura asked: My question is: how do I get the text in each list item to appear vertically in the middle of item? In other words, I want the text to appear midway between the top and bottom of the item, rather than at the top. Try adding line-height: 29px; to #banner ul li This will force the each line of text to be 29 pixels high, and if the text is smaller than 29 pixels, equal spacing above and below the text. Nick ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Please help me with this layout!
Dragan wrote: I want to have both columns, left and right, with the same width but different background color. You need faux columns, go read http://alistapart.com/articles/fauxcolumns/ by Dan Cederholm, that was what I used for http://www.docep.wa.gov.au/lr/default.html You use a container div with the background image required, and inside that div you have the two divs containing the data required. This way your background image is always as tall as your tallest div. Works well with three columns too. (Except you need to use two container divs, if you use relative widths). Have yet to try and wrap my head round a 4 column version. Nick * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] xforms
Lachlan wrote: This is the most comprehensive site I've found : http://xforms.dstc.edu.au/index.html I was at a lecture by Dr Hoylen Sue on Xforms yesterday. One of the people responsible for that web site. Xforms looks promising, especially if you look at the online demos with the right tools (but they are few and far between on the browser side). He mentioned FormsPlayer: http://www.formsplayer.com/ a proprietary solution and rather hefty 5mb plugin or X-Smiles: http://www.xsmiles.org/ a java web browser as two option to view the client side demos. Got formsplayer running and xforms is impressive, I would suggest if you have 20 minutes to spare go get the plugin and look at the demos on http://xforms.dstc.edu.au/ and play with Suncorp loan application form, see sections of questions appear depending on your answer to a question. The server side solution using an Xforms server such as Chiba http://chiba.sourceforge.net/ is probably the only solution in the anything but a small intranet environment, but it does give the full power of xforms. Nick * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] Recommended Books
Kay wrote: Designing for Web Standards I can't recommend Jeffrey Zeldman's Designing for Web Standards enough. It's the absolute bees knees :) ditto, very good book, my copy is making the rounds at work, everybody is very positive. It has not made it into the hands of the one and only tables lives guy yet. also: Web Design on a Shoestring by Carrie Bickner, or how to rebuild the NY Public Library websites, with two people and no budget. CSS More Eric Meyer on CSS learnt more CSS reading this than anything in the past few months and Kay next time I go to a Port-80 meeting I bring it along. Usability Defensive Design for the Web as Andy says contingency design is not sexy, but this is a very readable book on the subject. (When More Eric Meyer on CSS getting heavy going on the bus on the way home I switch to this). Nick * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] OT: need help from a mac user please
Mike No email address in your post and neither of my browsers (IE 5.23 on Mac or Firefox 0.8 on Win2k) render the AFP Webworks page fully (might be our firewall and the java applet). So having to reply here. With OsX 10.2.8 and IE 5.23 I do not have any problem accessing http://nqpropertyreview.com and clicking enter and being presented with the login screen. ie no error messages. Nick * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] New suckerfish menus
Neerav wrote: Still a laudable piece of work but the individual decision to not have a working menu for IE 4/5 and design for the future must be made. But if you stick to the horizontal menu (which works well in IE5) and use the @import to hide the relevant CSS from version 4 browsers (neither IE4 or NS4 can deal with the dropdowns), you serve IE4, NS4 and any browser which does not understand CSS with straight lists as menus, you get a functional menu system that works in almost every browser (I will not guarantee Opera 5 6). I am impressed, what took 30k+ of complex javascript is now done with 12 lines of javascript and roughly the same amout of CSS code. Nick * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] digital web magazine redesign
Tina wrote: So far, I just scout around the Internet and look for other sites in the same industry or of the same subject matter. I build sites for the government and sticking to sites in the same industry or same subject matter, would makes some very uninteresting sites. I tend to take nodes of inspiration (see http://www.cameronmoll.com/archives/16.html for the rundown on nodes of inspiration) from a wide variety of sources, personal blogs, CSS Zen garden and almost everywhere else except other Gov sites. May I ask what sort of design books you use for inspiration? I have wondered myself where to get inspiration from. The book that has influenced me the most in how I design sites is Magazine Design That Works: Secrets for Successful Magazine Design by Stacey King, Rockport Publishers. Probably for two reasons: 1. It taught me a lot about grid theory (not being a traditional designer) 2. It mad me think about how to present the information in the best structre. Nick * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] Site Review and some guidance on inheritance please
Alan wrote:
page at the moment but I am interested in how it looks to you
guys.
It is a starting point and compared to my early attempts quite sucessful.
I have one thing I am struggling on - perhaps some of you know a good
resource that will help me understand this concept. The text Latest
Results should be black but is white. I think this is because the h2
setting is more specific than the class content and the id
results. So
how do I specify that h2 within results should be a
different colour than
a general h2? I have tried various different formats gleaned
from the web
but can't get any of them to work.
try
#results h2 {color: black; }
it means that all h2's inside the container with the id of results with have a color
of black
or you could try
.content h2 {color: black; }
which means that all h2's inside the containers with a class of content with have a
color of black
in both cases it is parent (results, content), child (h2) relationship.
Nick
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
RE: [WSG] [WSG} Height Issue with two column layout
Simon asked: http://204.157.1.128/~wadigi/temp2.html with a two column layout however i cant seem to make the sidebar div run 100% any help would be great !!! Best solution I have found to the problem is: http://www.alistapart.com/issues/167/ simple, effective and it works even with relative layouts. Nick * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] Where am I missing the left turn at Alberqurque?
No DTD, page no validate!?! Got it in one. No DTD (or invalid DTD) will not validate. Simpley the validator does not know what to validate it against. HTML 3.2, HTML 4.01, XHTML 1.0, XHTML 1.1 and is it strict or transitional. Nick * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] Where am I missing the left turn at Alberqurque?
Fixed now - Found out I needed to add some padding Part of the prob was that things weren't lining up and were dropping down. Firstly no DTD, this sends IE6, Gecko engined browsers and others into quirks mode. While IE6 in quirks mode is not difficult to handle (behaves just like IE 5) Gecko engine browsers are too unpredictable IMHO. div d1 does not really need a height (or width), it will flow around the divs it contains and lose the overflowing on bottom border I am getting in Firefox, (caused of the box model differences in IE and everybody else). Nick * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] Browser testing across Windows OS's
I have tested projects in the past on IE5.5 across Windows 98, NT4 and Win2k boxes with no noticeable differences. These projects have included basic javascript and flash. So now I just test on one PC (Win2k) running IE4, IE5, IE5.5, IE 6, NS3 (great for testing how a page works with no CSS and minimal JS), NS4.7, Lynx, Opera 7.23, Mozilla 1.6 and Firefox 0.8 and I have an ancient G3 running Os X and Safari, IE5.23, Opera 7.5 beta and Firefox 0.8 as well as the classic environ and IE5.1. Note there is a diiference between Firefox 0.8 on Mac OS X and Windows. The Windows version supports opacity, on a Mac any opacity value 1 (ie 0.95) is treated as 0, making the element invisible. Nick * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] XHTML Form + Label - (blame)
Cameron wrote: Who's blaming the what now? in response to my previous posting and blame Cameron Adams aka the man in blue http://themaninblue.com/writing/perspective/2004/03/24/ for my thing with fieldset legend a couple of HTML 4 tags. It was a backhanded compliment to Cameron for opening my eyes to two underused HTML 4 tags. fieldset and legend (which are soon to be overused me in a new project). If you use forms or are thinking about using form elements, check out: http://themaninblue.com/writing/perspective/2004/03/24/ for some good ideas on what can be doe with forms. Nick Cowie Online Services Department of Consumer and Employment Protection Government of Western Australia * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] Relative Fonts
OK - so is there a formula to work out PX to EM ? (at least on a vanilla type of setup). In theory, on the standard browser ;-(IE6 on windows) the default font size is 12 pixels so in that case 1em = 12 pixels. Or it should be until you start playing with it with font-size=76%. But for some reason using font-size=76% 1em = 12px and 60em = 720px with text-size medium. If you use text-size smallest 1em = 9px and text-size largest 1em = 18px. And I am not sure what you were saying in the line that had (60em) in it. I use a container div 60em wide to hold all my content. That way no content is wider than 60ems 720px. Max size for a 800 by 600 screen at text size medium.. On the JavaScript front. that is something I want to avoid. I was not even sure I could play around with the font size in JavaScript - but I would not consider this to be standard. Just playing with the style font-size in the body tag. Try and finish this later got a couple of nasty problems to solve. Nick * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] Relative Fonts
Gary asked So - what does everyone do? I use em for all measurements (except images). So those column widths are not 200px but 16.7em. With a fixed width page (60em) long lines of text ie 80+ characters per line are difficult to read. Use a little bit of javascript to set the inital font size (and everything elses size) 76% for screens under 1000 pixels wide and 101% for screens wider than 1000 pixels. (OK that will upset a few people, but we are working on the great unwashed masses who do not know or care how to change font sizes) and no JS means 76%. Give people the opportunity to change font sizes with buttons A+ and a- (+10% and -10% respectively) and that info is held by a cookie (again an evil bit of javascript ;-). Nick * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] Show/hide layers without javascript (was: [WSG] How to do some things)
Leo wrote: It can be done in CSS by toggling the display visibility with the a:hover and positioning. Except is does not work in that browser. (you know the one I mean Internet Exploder ) There are a number of tricks you can do with hover and CSS for people using CSS2 compliant browsers have a look at the suckerfish dropdowns on a list apart for a starting point and go from there, it is only limited by your imagination, hard work and how many people using the wrong browser ;-). Seriously there is a lot you can do, but it will not work in IE without javascript. And seeing most people use IE, you might as well use javascript. Nick * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] New Colour Schemer - draft - any suggestions?
Michael The right column, has a commnet This is text in the colour #XX Unfortunately #XX is the first colour entered, while it does display correctly as the second coloured entered. Nick * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] IE5 Mac Doosey
Peter wrote:
Thanks anyway. Any other ideas folks?
I have got a similar problem with IE5.2 on the Mac
A navigation bar (div id=one) that is horiziontal on all other browsers is vertical
in IE5.2 on the Mac.
Fortunately another very similar navigation bar (div id=two) worked as expected.
The difference between the two was the holding div (div id=one) was absolute
positioned inside a relative position div. Where as (div id=two) was a relative
positioned inside a relative position div. Changing (div id=one) to relative
positioned fixed the problem.
What the problem appears to be is IE5.2 on Mac can not float items that are inside a
absolutely positioned div.
Nick
The code if any one is interested.
div id=one
spana href=#link 1/a/span
spana href=#link 2/a/span
spana href=#link 3/a/span
/div
#one {
position: absolute;
bottom: 0;
left: 0;
background-color:#666;
width: auto;
clear: both;
height: 1.8em;
margin: 0;
padding: 0;
}
#one span {
display: block;
width: 7em;
float: left;
padding: 0.3em 0 0.3em 0;
}
#one a {
/* main links */
height: 1%;
color: #06f;
padding: 0.3em 0.5em 0.3em 0.5em;
text-decoration: none;
}
div id=two
spana href=#link 1/a/span
spana href=#link 2/a/span
spana href=#link 3/a/span
/div
#two {
/* holds bottom links */
position: relative;
background-color:#e8e8e8;
width: auto;
clear: both;
height: 1.8em;
margin: 0;
padding: 0;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
font-size: 0.82em;
}
#two span {
/* controls padding and size of bottom links */
display: block;
width: 7em;
float: left;
padding: 0.3em 0 0.3em 0;
}
#two span a {
/* bottom links */
padding: 0.3em 0.3em 0.3em 0.6em;
}
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
RE: [WSG] Help us redesign the WSG site
Andy wrote: How about doing a Zen Garden type thing and allow people to skin the WSG site. That would be an interesting task, seeing it would be a 20 odd page site we would be skinning. The first challenge will be to get enough agreement on how to create the basic page structure, eg: do we include extra divs to allow for clearing floats to deal with IE bugs? who many divs just to contain the page ? one, one inside another or four to allow for various corner tricks? do we have a few extra divs for images ala Zen Garden just incase people want to use them and how many? So if Russ is willing to completely change the rules, we are willing to put up with some lively discussions on most suitable page strucutre, I for one am looking forward to the opportunity. Nick winmail.dat
