Re: [WSG] More on spam traps

[Oliver Boermans]

Hi Bob,

A few points:
- The form submission was likely posted without JavaScript
- There is no point confronting a robot with the reality of it’s existence

Look into writing a filter on your email inbox or server that can
eliminate such messages without your intervention.

Don’t give up :)
Ollie
--
@ollicle

On 22 August 2012 21:07, coder  wrote:
> I have recently attempted to 'trap' spammers who use autofilling tactics on
> the site at www.gwelanmor-internet.co.uk. This is written in html5 and uses
> a mixture of simple tests to validate the form.  However, yesterday I recvd
> a mail thus:
>
> 
>
> name
>
> igmgrtasel
>
> email
>
> hidden
>
> -9
>
> comments
>
> CaWePF http://ipdszgwutyvp.com/";>ipdszgwutyvp,
> [url=http://fkpbtvpaxitv.com/]fkpbtvpaxitv[/url],
> [link=http://rtcdalwdjrkb.com/]rtcdalwdjrkb[/link], http://xsejahukjzdr.com/
>
> send
>
> send message .
>
> 
>
> The script I used to validate the form is this:
>
>
> 
> function validateForm()
>   {
>   var x=document.forms["contact"]["email"].value;
>   var atpos=x.indexOf("@");
>   var dotpos=x.lastIndexOf(".");
>   if (atpos<1 || dotpos=x.length)
>  {
>  alert("This is Not a valid e-mail address");
>  return false;
>  }
> //
>   var y=document.forms["contact"]["hidden"].value;
>if (y==null || y=="")
>{
>return true;}
>   else
>{
> alert("I think you are a machine")
> return false;
>}
>
> }
> 
>   function check(node)
>{
> var re = new RegExp('[<>\[\\]]', 'g');
> document.getElementById('send').disabled = re.test(node.value);
>}
> 
>
> and it works locally and online. However the mail I quote from above is
> completely unaffected.  Does this mean I give up trying, or what?


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

Re: [WSG] list heading - best practice?

[Oliver Boermans]

On 6 March 2012 09:20, Dan Freeman  wrote:
> How about in HTML5?
>
> 
>     Some Title
>     
>     Item 1
>     Item 2
>     Item 3
>     
> 
>
> OR:
>
> 
>     Some Title
>     
>     Item 1
>     Item 2
>     Item 3
>     
> 

How do people feel about a definition list instead for this?


Some title
Item 1
Item 2
Item 3


Ollie
--
@ollicle

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

Re: [WSG] Expected behaviour of links to external websites

[Oliver Boermans]

This subject and me have some history so please excuse me if I get a
little ranty. I’ll do my level best to be rational and on topic. Here
goes…

To my mind this comes down to a very simple question: What will the
user of the website (or piece of software) you are building expect to
happen when they click the link? Broadly speaking I believe if you are
providing a surprise you need a good reason to do so.

If by performing an action that causes something unexpected to happen,
an inexperienced users confidence in their ability to use and
anticipate how your software works will be eroded. When you surprise
an experienced user they are more likely to blame the software rather
than themselves for the annoyance. Either outcome is not desirable.

Surprise can be wonderful. Essential, for example, to an effective
ending to any great movie. I love useful surprises built into software
that anticipate my needs. Opening a new window automatically is hardly
a delight.

The only time I have found it useful for a window to open in fresh
browser chrome is where I have a need to see the information on both
pages simultaneously. These kind of “pop-up” windows tend to be
significantly smaller than the window that launched them. After all
the website designer couldn’t presume to know the size of my monitor!
These are the kind of utility windows are commonly seen within desktop
software. On a website they have been made largely redundant by
JavaScript libraries that make it easy to load or reveal information
or options within the page to which they have a direct relationship.

There is a different (almost opposite) reason many people want links
on their web page to open in a new window. This is the one that I find
most annoying. They want visitors clicking a link on their site to
notice the new window and read it to mean something like:
“The link I just clicked is to a website separate to that which I was
just looking at. I won’t want to linger there long. It’s a
distraction. I’ll pop my head in for a little peek. When I’m done in a
moment I can just close this new window to come back to the more
important website and continue along my way.

A little presumptuous don’t you think?

That other website may be exactly what I was looking for. If not,
consider what happens when I can’t see the first site (now concealed
under the new window) and I reach for the most useful button in my
browser – the back button. Nothing. By opening a new window have
created a new thread of browsing history for me. If I was an
experienced user I would know and understand what happened and recover
quickly. I would also know how and when to open a fresh window on my
own (I don’t need your help with the items on my desk thank-you). If I
was new to this internet thing I may not understand such
technicalities and feel needlessly frustrated.

I’d love to be able to pull out some user testing that supports my
take on this. Sadly I cannot – so take it as experienced opinion and
consider the specific context you are working in. Here’s an exception
to consider right in front of me. GMail. It is not surprising to me
that the links open in a new window because in my experience my email
application does not disappear when I click a link in an email.

To avoid the surprise you may inform us with phrase or an icon
alongside a link that will open in a new window. If in doubt, keep it
simple and do what people expect. Use a regular link. Keep the
surprises to the twists of action thrillers.

Thankfully pop-up windows don’t kill people.

Happy New Year when it comes
Ollie
--
@ollicle


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

Re: [WSG] Using ellipsis to indicate truncated overflow content

[Oliver Boermans]

You could possibly use JavaScript to implement it in browsers that don’t 
support it.
I’ve seen a few jQuery plugins written for the purpose. For example:
http://dotdotdot.frebsite.nl/

I’ve not used it myself.
HTH
Ollie

On 23/11/2011, at 4:13 PM, Ben Buchanan  wrote:

>>> text-overflow: ellipsis?
>>> http://www.quirksmode.org/css/textoverflow.html
>> Thank you, yes, the text-overflow property is great but does not work in
>> Firefox 3.6. Do you know of a work-around for Firefox.
> 
> Unless you have a really massive FF 3.6 userbase that you know is
> blocked from upgrades, I'd say use it anyway.
> 
> People regularly use things that don't work in IE - it doesn't stop
> being Progressive Enhancement just because Firefox was the weakest
> link in this case :)
> 
> cheers,
> Ben
> 
> -- 
> --- 
> --- The future has arrived; it's just not
> --- evenly distributed. - William Gibson
> 
> 
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> ***
> 


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

Re: [WSG] Wrapping text before float drop

[Oliver Boermans]

One more:
-
Option 4 - overflow: hidden instead of float on the second div
-


Although you may need to set some form of width on the first for this to work.

On 4 November 2011 06:51, Russ Weakley  wrote:
>>
>> Think of how two columns work in a table, when they have no specified width. 
>> They adjust to the size of the content and the available width, and wrap 
>> their content if the available width is reduced.
>>
>> This should be easy in CSS, no?
>
>
> The simple answer is that floats are not ideal in this situation.
>
> There are three ways you
> could solve this problem - but as Hassan mentions, they are best done without 
> using "float". All three solutions may present issues in older versions of 
> IE. Without knowing exactly what you are trying to achieve, it is hard to 
> recommend one of these solutions.
>
> -
> Option 1 - display: table, display: table-row, display: table-cell
> -
> 
>
> For example, you could make the two containers operate like table cells. I am 
> not really a fan of this approach, but it would give you the behaviour you 
> are looking for.
>
> 
>
> -
> Option 2 - columns
> -
> 
>
> -
> Option 3 - Flexible Box
> -
> As Hassan mentioned, you could use the flexible box module as a solution
> 
>
>
> Not sure if any of these help...
> Russ
>
>
>
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> ***
>
>


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

Re: [WSG] a:link behaviors issues

[Oliver Boermans]

Mathew is asking the pertinent question.
There are five pseudo selectors to consider on links:

:link
:visited
:focus
:hover
:active

By applying the font attributes to link and visited you leave the others 
undefined. You could apply the attributes to all states, although the more 
efficient solution is to only use pseudo selectors to apply attributes you wish 
to differ between these states, anything else ought to be set to the element or 
inherited from a parent.

.navbar {
font: ...
}
.navbar a {
text-decoration: none; /* applied to all link states */
}
.navbar a:link {
color: blue;
}
.navbar a:visited {
color: purple;
}


Hope that helps.
Ollie

--
@ollicle

On 28/07/2011, at 8:51 AM, Mathew Robertson  
wrote:

> This is going to sound like an odd question, but have you also applied this 
> style to the non-psuedo-selector (ie just 'a')?
> 
> regards,
> Mathew Robertson
> 
> On 28 July 2011 08:42, olivia antonin  wrote:
> Hi ,
>  
> I don't understand, my navigation bar, on my mac they behave as I want, so 
> that the font size remain the same , as well as when visited.
>  
> a:link, a:visited{
> font: 13px  Myriad pro, Lucida Grande, Calibri, sans-serif;
> color:#686868;
> text-decoration: none;
> }


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

Re: [WSG] Site test?

[Oliver Boermans]

The transition is smooth and the paging buttons just big enough to hit with my 
finger on my iPad. Agree regarding the blue on blue nav. Clearly you have not 
finished so I'll leave it there.

--
@ollicle

On 22/05/2011, at 7:03 AM, Andrew Maben  wrote:

> Looks good on my Touch, except the blue on blue nav is a bit hard to read. 
> The transtions look great!


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

Re: [WSG] question about screen reader behavior when pulling in content via Ajax fetch

[Oliver Boermans]

Hi tee

On 26/03/2011, at 4:50 PM, tee  wrote:

> I have a small login  popup box, and is using Ajax fetch to pull in the login 
> page. Due to the way the system works, the login page default is to use a 
> page template instead of just the chunk of login code placed in a header or 
> left/right column, though can be done too but  my view is that the login code 
> shouldn't be in every page since it's to be showed in a modal window so I 
> want it retrieves via Ajax. 
> 
> I created a template, strip out dtd, body and all other areas except  the 
> code that retrieves the content area (where it will then load the login code 
> template), this all works well.  My concern is, will it be any problem for 
> screen reader read the  login page's info, enter email which the page has no 
> dtd, body and html tags?

I can't answer your question directly, but this is a familiar scenario in which 
you have some alternative approaches available to you could employ. 

Is your concern for when and if the login page is loaded directly rather than 
via Ajax?

Rather than stripping the page elements from your login page make two versions 
of the form:
One designed to be viewed as a standalone page (complete with page elements);
And another that only includes the login form portion you wish to load with 
Ajax.
Link to the first in your page in your HTML and use JavaScript to load the 
other instead when the link is clicked.

Alternatively, keep your login page as one file designed to be viewed 
independently, and use JavaScript to strip out the unneeded elements before 
inserting the form into your page. 

This is really easy with jQuery. The load method allows you to append the URL 
to the page you wish to load with a selector for the portion of the the 
requested page you wish to insert (with a space to separate them) eg: 
"login.html #loginform" where “lo inform” is an id on an element that contains 
your form. JQuery discards the rest. Note that the whole page is loaded even if 
it is not displayed so if you have a lot of navigation or unrelated markup in 
your page this approach may be slower to load even if it is otherwise elegant.

Broadly the term Hijax is an appealing title for this if you are looking for 
more on it.

I should also point out I have not tested the accessibility of a form loaded 
into a page in this manner, so I cannot comment on how it might behave in a 
screen reader.

hth
Ollie
--
@ollicle

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

Re: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?

[Oliver Boermans]

An alternative to get the first dd in a dl:

:first-child + dd { ... }

I'm not sure how browser support for '+' compares to 'first-of-type'.

Cheers Ollie
--
@ollicle

On 06/03/2011, at 20:33, tee  wrote:

> http://jsbin.com/apate4/9/
> 
>  dt, dd { border-top:1px solid #555;float:left }
>  dt:first-child {border-top:0}
>dd:first-child {border-top:0}
>  h2, p {background:#ddd;padding:15px;margin:5px}
>  h2:first-child,p:first-child  {background:#95B26B} p/s. I tried declared the 
> two individually as I thought maybe they can't be grouped, but it makes no 
> differences.
> 
> According to the spec, it should work.
> The :first-child pseudo-class represents an element that is the first child 
> of some other element.
> http://www.w3.org/TR/css3-selectors/#first-child-pseudo
> 
> Assigning a class to the element is of no help.
> 
> 
> tee
> 
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> ***
> 


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

[WSG] Re: We are currently out of the office

[Oliver Boermans]

 Dear Ladybug, I hope you had a pleasant outing.


In your absence, automated email responses from your email account are close to 
becoming sufficiently annoying for me to set up a filter that trashes any email 
from you automatically. This, unfortunately, would only solve the problem for 
myself. So I am writing to urge you to consider the tidy inboxes all the 
subscribers of this list and to please investigate a means to ensure you do not 
send automated responses to this or any other email lists.



At least when you get back to the office…



Sincerely
Ollie
On Saturday, 11 December 2010 at 4:21 PM, Ladybug wrote:

> 
> 
> 
> 
 Re: We are currently out of the office 

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

Re: [WSG] best formatting for alt text

[Oliver Boermans]

On 13 November 2010 11:33, Janice Schwarz  wrote:
> Alt text is not formatted. You just have alt="your description here". And
> that's it.
> Janice
>
> On Fri, Nov 12, 2010 at 6:23 PM, cat soul  wrote:
>>
>> Hello;
>>
>> I am assuming that alt text will be heard and not read. If this is so, it
>> need only be there and could be any size, correct?

Alt text does become visible when the image has yet to, or has failed,
to load. In which case it is most certainly worthy of consideration. I
believe (in most browsers?) this text will inherit any font attributes
assigned to the IMG tag or it’s parents.

On the other hand you have absolutely no control over the display of
the title attribute. It doesn’t even increase in size when fonts are
enlarged!

Ollie
@ollicle


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

Re: [WSG] CSS support of HTML5 tags not ready yet?

[Oliver Boermans]

I don't have any personal experience with this stuff but your
discussion rereminded me of a page I bookmarked recently:
http://jdbartlett.github.com/innershiv/

Sorry if it is not relevant, have not read the whole thread in detail.

Hope it helps!
--
Cheers Ollie
@ollicle

On Wednesday, September 29, 2010, Rob Crowther  wrote:
> On 28/09/10 23:41, Steven Tan wrote:
>
> Strange, I expected the innerHTML part to fail. Any idea why that works?
>
>
> Nope! I expected one or the other of the two (DOM and innerHTML) to fail as 
> surely jQuery is using one or other of them underneath?
>
> I haven't had time to dig in to the jQuery source and figure out what it's 
> doing, but I guess it's wrapping the DOM approach to make it look like 
> innerHTML, and something is getting lost in translation.
>
> Rob
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> ***
>
>


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

Re: [WSG] @import and IE7

[Oliver Boermans]

Hi Cole

On Saturday, July 24, 2010, Cole Kuryakin  wrote:
> Hello All -
>
> I've finally decided that I'd like to  a single base style
> sheet (base.css) into my projects.
>
> The base.css would then @import various other style sheets which would
> define the dclarations for project layout, type, color, forms, etc.

I would not recommend you separate your CSS files for purely
organisational purposes. Do this _within_ your files. Less files
loaded by the browser means faster pagel loading. @import is also bad
for performance. Where you must separate your files it is better to
have multiple link elements. The other advantage of avoiding @import
is to see what CSS is being loaded into the page it is only necessary
to look in the HTML. This can save someone else a lot of time
troubleshooting your site later.

Before Firebug l would separate my CSS into a bunch of files, just to
reduce the time to navigate them. Now the inspector in Firebug makes
this so easy there isn't really a lot of organisation advantage in
doing so.

I hope this is helpful, even if I didn't really answer your question...

Cheers Ollie
@ollicle


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

Re: [WSG] Overflow hidden and floated divs

[Oliver Boermans]

Hi Stevio

On 16 July 2010 00:41, Stevio  wrote:
> My question is why does it do this? I have looked up what overflow hidden is
> meant to do and from what I read it sounds like the content should just get
> clipped at the right hand side and not be shown. Why is it causing the box
> to expand down the way?

Most basically overflow has a different effect depending on whether
dimensions are set or not. In your case you are not setting the height
on the same element that has the overflow set. If you want
overflow;hidden to clip the non fitting li try either moving the
height to the div or the overflow to the ul.

Cheers
Ollie
--
@ollicle


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

Re: [WSG] link rel="stylesheet" question

[Oliver Boermans]

Hi Jody,

On Sunday, July 18, 2010, Jody Tate  wrote:
> In a stylesheet link, does the order of rel, href and type affect how a 
> browser understands, loads, etc. a stylesheet?

No, the order of HTML attributes is not important; Unless you are
doing something invalid like repeating them within an element.

Best
Ollie
--
@ollicle


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

Re: [WSG] color contrast, success criterion 1.4.3

[Oliver Boermans]

Hi tee

On 3 May 2010 20:20, tee  wrote:
> I need to pass a site for SC 1.4.3 and I was told some areas (especially link 
> texts) do not passed.
>
>  I ran the site through Juice studios Color Contrast Analyser as well as 
> Color Checker Firefox extension and they fail in some areas that I find 
> suspicious. Example, the site has #333 for body background, but header/footer 
> sections use background images that are much lighter and I am pretty sure the 
> contrast is above 4:5:1
>
> I am not entirely sure if the person who assess the site uses Contrast 
> Analyser to evaluate the site and doesn't taken other factors (e.g. 
> background image)  into account.

It’s not likely to take images into account. Try setting a background
colour in addition to an image eg: background: #fff url(pic.img);

This is good practice regardless to ensure the text is legible when
images are disabled or fail to load for some reason.


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

Re: [WSG] Standards based Drupal WYSIWYG Editor

[Oliver Boermans]

On 01/03/2010, at 8:44 AM, Sam Dwyer  wrote:


Hope some of that helps.

(Hi to the mailing list by the way, this is my first post since I  
joined, look forward to engaging with you all)


Thanks Sam and welcome, great to get your perspective on TinyMCE, if  
you ever do dig into extending CKEditor please let us know if it lives  
up to your first impressions.


I'd be delighted to go down the WYSIWYM path if only to force those  
contributing content to think about the structure of it. Although it  
seems that knowledge of HTML is a prerequisite for the appreciation of  
markdown and the like.


Ollie
@ollicle 
 



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

Re: [WSG] Background music on web pages

[Oliver Boermans]

Hi Lesley,

On 1 March 2010 00:55, Lesley Lutomski  wrote:
> Thanks to all who have replied.
>
> The clients in question are a committee (first problem!), who all say "Oh, I
> know nothing about computers/the internet" but at the same time refuse to be
> guided.  Referring them to usability articles is a non-starter, because
> they'll just not look at them.  I've tried reducing the arguments to very
> basic, non-technical issues, but my powers of persuasion are apparently
> lacking.

Maybe they need a real world example. Next meeting you have with the
committee, before they arrive, hide a couple of portable stereos in
your reception. Have them playing 'pleasant' music, simultaneously.
Let them wait a little while before you bring them into the meeting
room where you have more music playing – don’t switch it off before
they ask you to :-)

> Given that I can't afford to turn down the work, I'll take on board the
> points folk have made here and promise to do the least-awful job on it I
> can!

Make the point that you are in the business of building websites which
leave a positive impression on the visitors and it would be negligent
on your part; to not point out the cons of music on a page. Where the
music is not the primary subject of the content anyway.

Failing that…I have not tried it - but something like this appears to
provide the control you would want to STOP the music:


Perhaps if you added a mouseenter/focus event to a large portion of
the page which would switch it off. Once you know the visitor has had
enough of the 'ambience' of the site and is ready to learn more…

Good luck!
Ollie
@ollicle


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

Re: [WSG] Standards based Drupal WYSIWYG Editor

[Oliver Boermans]

Hi James,

On 27 February 2010 03:30, James O'Neill  wrote:

> I am not at all happy with the FCK editor. I am
> starting to look at Time MCE and Standard.

When you say FCK editor do you mean the current version?
Now called CKEditor.

Broadly, I’m very interested to hear comparisons or war stories from
anyone who has extensive experience with more than one of these
editors.

Cheers
Ollie


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

Re: [WSG] Line wrap multiple select box

[Oliver Boermans]

Hi Paul,

On 17 February 2010 01:51, Paul Collins  wrote:
> I'm have a fixed width on a multiple select box. The problem is, some of the
> options are longer than the width and by default the lines won't wrap. I'm
> wondering if anyone has seen a way of making lines wrap using either CSS or
> JQuery. I've added a title to each option, so you can get the full content
> if you hover over an item, but really need the text to wrap.

I’ve used this jquery plugin successfully in the past:


Haven’t tried this one:


Once I wrote some simple JavaScript which made the select wider upon
focus if necessary in Internet Explorer. Even with some absolute
positioning to ensure the surrounding layout wasn’t broken, the effect
was effective but a bit weird.

HTH
Ollie
@ollicle


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

Re: [WSG] Print style sheet

[Oliver Boermans]

On 17/02/2010, at 2:12 PM, c...@fagandesign.com.au wrote:

I would like to know if this is deemed acceptable use of CSSAND  
if a hard-coded image has to be downloaded on page load or page  
print??


I'm not sure exactly when the image downloads when you use this  
technique, but it does work.


Unless your print logo is very large the impact is likely to be  
negligible either way.


An alternative technique is to use CSS to apply the 'web' logo as a  
background image to the scaled print logo. Hiding the image area of  
the print logo with padding and overflow hidden. This will remove the  
redundant markup but may mean the print logo must download before the  
logo on your webpage will be visible.


Test it, I'd like to know what happens to alt text with this treatment.

Cheers 
  


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

Re: [WSG] Minimal forms or marking up a search field

[Oliver Boermans]

On 31 January 2010 13:45, Thierry Koblentz  wrote:
>> You do not need  nor a  as they are intended for
>> grouping form fields on more complex forms.
>
> I agree.
> I'd just use a DIV to wrap these form controls.

Thanks guys, I’m glad I asked this question. I was carrying around the
idea that the required element around any inputs inside a form element
was a fieldset. Seems I was wrong, any block element will satisfy the
spec.

So presuming we do away with the legend:

   Keyword/s
   
   


…and assuming there are no other 'search' fields in the page we need
to distinguish from. I’d like to test some further assumptions:

- Some people don’t know how to submit the query without a 'Search'
(or 'Go') button?

   Keyword/s
   

Apple seems to believe the the submit input is unnecessary


- Now that the legend is gone I should use the label to describe the
purpose of the text field rather than what one should enter in it?
Everyone knows you put keywords in a search field, right?

   Search
   


- Is including the keywords hint in the title attribute useful to anyone?

   Search
   


- Does everyone agree this is taking simplicity too far?

   


Thanks for indulging my hairsplitting.

Ollie
--
@ollicle


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

[WSG] Minimal forms or marking up a search field

[Oliver Boermans]

A practical distraction for the standardistas and accessibility gurus…

Hoping tap your brain for an alternative perspective on the simple and
common HTML scenario of a site search form.

Search this site
Keyword/s




As far as I understand it this mark-up meets the requirements demanded
of such a form.
Although, in striving for simplicity, there may be significant redundancy.

My question regards the HTML and text used:
How much mark-up can be removed without breaking it?

- FIeldset / legend combination are required to meet HTML standards
and provides valuable context to my mind.
Am I missing anything?

- Sacrifice the label and add a title attribute on the text input?

Search this site




- Once supported, will the new HTML5 placeholder attribute make the
label redundant

Search this site




- How many users know that they can use the Enter key to submit the form?

Search this site



- The future?

Search this site



Editable mark-up here
http://fixee.org/paste/bxmsvue/#url=bxmsvue

Redundancy can be a good thing, but where do you draw the line?
Looking forward to your considered thoughts and relevant experiences.

Cheers
Ollie
--
@ollicle


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

Re: [WSG] Accessibility does not matter!

[Oliver Boermans]

On 30/01/2010, at 11:04 AM, Peter Mount  wrote:

Even with closed systems like intranets you're "playing with fire"  
if you don't have regard for accessibility.


Agreed. Web applications built ‘for' closed intranets are the reason  
so many corporates still have IE6 installed. There are perfectly good  
selfish reasons why companies ought to consider accessibility. It's  
about ensuring things just work.


Ollie 


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

Re: [WSG] How to resolve z-index problem for select box in IE 6

[Oliver Boermans]

On 28 January 2010 17:32, Brajesh Patel  wrote:
> I am getting Z-index problem in IE 6.
> back ground select box are displaying on the popup when popup appear, it's
> working fine on the firefox but getting problem in IE 6,
> Please suggest solution this is major issue for  me.
>
Iframes are the accepted solution for covering select elements in IE 6.

JavaScript is recommended to prevent burdening newer browsers with the
fudgy mark-up.

Something like this makes it easier:
jquery.bgiframe docs [jquery plugin]
http://brandonaaron.net/jquery/plugins/bgiframe/docs/

[the above link it timing out for me right now - should be good though
- maybe worth trying tomorrow if it still doesn’t work]

hth
Ollie


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

Re: [WSG] CSS off button

[Oliver Boermans]

On 27 January 2010 17:55, Jayachandran Kandasamy
 wrote:
>  $(document).ready(function(){
>   $("input.offButt").click(function() {
>    if($("head:has(style)") && $("head:has(link)")){
> $("head:has(style)").remove();
> $("head:has(link)").remove();
>    }
>   });
>  });

I’m pretty sure this will remove the head element and everything in it.
Link elements are also used for more than just loading CSS so you
wouldn’t want to remove them without checking the type or rel
attribute too.

Regarding the JavaScript
http://api.jquery.com/
http://forum.jquery.com/

Cheers
Ollie


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

Re: [WSG] CSS off button

[Oliver Boermans]

Hi Kevin

On 23 January 2010 06:52, Erickson, Kevin (DOE)
 wrote:
> Could anyone please tell me if there is a right way to put a clickable
> button in a web page that will turn off all CSS?

Why do you want to switch off CSS?
Reasons aside, the simplest method that jumps to my mind is to use an
empty alternate stylesheet and some JavaScript to switch between it
and the default [presuming you have all your style in the one external
CSS file].

This rather old article explains the concept
http://www.alistapart.com/articles/alternate/

If you have the option, a server-side approach as Paul suggests would
be more reliable as it would work without JavaScript.

Comes back to why!?

Hope that helps
Ollie


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

Re: [WSG] Re: WSG Digest

[Oliver Boermans]

> We are closed for the Festive and New Year Season…

All I want for xmas is smarter auto-responders for everyone…
Sheesh.


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

Re: [WSG] 8 invites for Google Wave

[Oliver Boermans]

30 wave invites spare.

Don’t reply here!

If you would like one email me directly or DM me on twitter:

Ollie
@ollicle


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

Re: [WSG] site feedback

[Oliver Boermans]

Hi Marvin

2009/11/12 Marvin Hunkin :
> here'sthe current version and hopefully the final version.
> now from a accessibility view point, and a layout and content viewpoint.
> what do you think?

It has a plain and unsophisticated look but there’s a certain honesty
that comes with that may prove to be appropriate to the business of
selling fresh produce.

I believe the home page would benefit from a descriptive paragraph
which introduces the business and what Joe has to offer, This would
make the most sense near the top of the home page with the first
image. A summary of the content that appears on the history page would
be appropriate. I’d include a read more link to the history page at
the end of this text. Actually I would suggest you rename the history
page to 'About Joe’s'.

The banana icons used on the main navigation are too complex to be
used on every link. Their repetition draws attention away from the
links themselves rather than helping people visually distinguish
between them. If you are willing to do some additional work, I would
suggest you only place the icon in front of the link to the current
page. The best way to distinguish this link from the others is to not
have it linked at all. Instead of the [a] use a [span] or [strong] for
emphasis. This will also provide a usability improvement by preventing
the confusion that is created when one follows links to a page already
loaded.

Are the specials going to change? If so you’ll need to be careful to
prevent too much text being added to the description of each special.
This is a potential problem because you are setting the height of the
specials divs – additional content may be obscured if it doesn’t fit
in this height. If this content is going to be regularly changed ask
this list about alternative layout techniques you could use to avoid
this problem.

One more point regarding the navigation. Personally I don’t think it
is necessary to repeat the navigation at the top and bottom of the
page. The 'Top of page' link ought to be adequate for those looking
for the navigation in the footer. It would be better I think to split
the navigation into two sets to provide the most important links in
the site more emphasis. Very few visitors to the site will be looking
for Copyright or Credits information so take these out of the
navigation at the top of the page and put them in the footer.
Similarly, as Nathanael suggested, the links to other Fruit and Veg
sites is another candidate for the footer unless you really see this
being a core reason people will visit Joe’s web page.

I hope you find my criticisms constructive.
Ollie
@ollicle


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

Re: [WSG] strange behavior in IE7

[Oliver Boermans]

Hi Ido

2009/11/10 Ido dekkers :
> I'm having trouble with this table which is part of a page not shown:
> http://test3.dekkers.net/test.htm
>
> in IE7 only when hovering over the table different cells get colored red?
> now i know the first css rule causes it. what i don't know is why ??
> it has nothing to do with the table and is targeting a different element in
> the page..

Weird indeed!
I would put that down to general IE bugginess.

As an alternative approach you should use TH instead of TD for the
cells you wish to style differently.

tbody th {color:red;}

Or you could try COL/COLGROUP as a means to distinguish them.

hth

Ollie
@ollicle


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

Re: [WSG] Is pressing Enter to submit (or not) on forms an accessability issue? [SEC=UNCLASSIFIED]

[Oliver Boermans]

2009/10/21 Chris Vickery :
> In this case it’s for an input field, not a textarea, and enter will still
> not submit (unless you tab out) so in this case makes it contrary to ‘native
> browser behaviour’.

This would potentially create annoyance to users of Safari on an
iPhone or iPod Touch.
When you have a text input focused (in contrast to a textarea) Mobile
Safari displays a big blue [ Go ] button in the bottom right corner
which one would expect will submit the form (equivalent to hitting
Enter).
If Enter does not submit the form it will be necessary for Mobile
Safari users to leave the 'form mode' by clicking [Done] and then
manually tap the submit button. I would consider this unexpected
behaviour a usability issue at very least.

Cheers Ollie
--
@ollicle


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

Re: [WSG] Re: More than one H1?

[Oliver Boermans]

2009/10/16 Jason Grant :
> Ollie you are threading a dangerous ground there.
> Explained here why you are
> wrong: http://www.flexewebs.com/semantix/semantic-uses-of-h1-h2-h6-html-tags/

Good link for this thread Jason. Although I don’t understand why the
company name would be inappropriate semantically to use as the h1 on
the home page.

The home page represents the company. If I Google for a company with
it’s name as a keyword I would expect to find their home page. Using
it on every page of the site is a different matter.

For this to work the 'logo' would be text which would be styled with
CSS to look like the logo in a browser. As an alternative I expect the
alt text of an image would likely suffice (not so sure on this one).

To put on my hat with horns to present a possible issue with my own
suggestion; I would point out that using a different structure between
pages of a site can be confusing for a screenreader user; But then,
home pages often are a different structure to topic-specific sub pages
anyway so I don’t expect anyone would get upset about it.

I’ve been doing this for a few years now so if I’m wrong I’m keen to
be corrected!

…

The defence for using two h1 elements in a page makes some sense to me
from the same perspective that it makes sense to put the company name
in every page title alongside the subject of the page eg: "[title]SEO
and semantics - WSG blog[/title]".

You have to draw the line somewhere though, as too much emphasis is no
emphasis at all.

Interesting discussion - thanks to those at WDS09 who introduced me to
this group!
--
Ollie Boermans
@ollicle


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

Re: [Spam] :Re: More than one H1? (was [WSG] Out of Office AutoReply: WSG Digest)

[Oliver Boermans]

2009/10/16 Adam Martin :
> Again the logo is usually only the most important thing to the owner - not
> the customer - the customer will recognise if they are on the right site or
> not.

I believe it”s appropriate to represent the logo as a h1 on a site’s
home page, unless you are using a positioning statement in the page
title of home page. In which case it would be best to apply the h1 to
that within the page. HTH
--
Ollie Boermans
@ollicle


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