Re: [WSG] Line wrap multiple select box
Hi Paul, On 17 February 2010 01:51, Paul Collins pauldcoll...@gmail.com 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: http://www.givainc.com/labs/linkselect_jquery_plugin.htm Haven’t tried this one: http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/ 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] Minimal forms or marking up a search field
Hi Paul,
An interesting question.
I'd go with b.
The label is almost, but not quite, redundant when presented with in a simple
search form.
I'd advise against method a.
A confusion of goals takes place.
The label is explicitly associated via the for attribute to the search field,
but implicitly associated by position to the submit button.
That breaks the original WCAG guidelines priority 2 parts 10.2 and 12.4
Regards
Mike Foskett
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Paul Novitski
Sent: 17 February 2010 19:25
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Minimal forms or marking up a search field
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.
...
To revisit this topic, I'm considering the
following and would appreciate feedback:
_
a) Submit button as label:
form ...
div
input type=text id=search name=search /
label for=search
input type=submit value=Search /
/label
/div
/form
_
b) Label hidden from view:
form ...
div
label for=search id=search-labelSearch:/label
input type=text id=search name=search /
input type=submit value=Search /
/div
/form
label#search-label
{
position: absolute;
left: -1000em;
}
_
The rationale for both of these is that the
Search submit button serves as a clear and
unambiguous label for the input field. In listing
a) the button is literally the label; in b) there
is a separate literal label present in the markup
but hidden from cosmetic view.
Both validate for W3C HTML Cynthia 528 Accessibilty.
Can you see any problems with them?
I favor a) but it feels edgy.
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
This is a confidential email. Tesco may monitor and record all emails. The
views expressed in this email are those of the sender and not Tesco.
Tesco Stores Limited
Company Number: 519500
Registered in England
Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL
VAT Registration Number: GB 220 4302 31
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] Ie7 test?
Can anyone guess why the columns overlap? http://freemealcenter.com Thanks! Sent via iPhone: Joseph R. B. Taylor Designer/Developer --- Sites by Joe, LLC Clean, Simple Elegant Web Design http://sitesbyjoe.com Phone: (609) 335-3076 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Ie7 test?
On Feb 18, 2010, at 12:13 PM, Joseph Taylor wrote:
Can anyone guess why the columns overlap?
http://freemealcenter.com
IE7 is confused when you have float and fixed position sat together, the width
it moved away from is exactly double the width you declared, as if it triggered
the double margin bug. Add an extra div within left_column, and declare the
position:fixed in the new div instead. Those hasLayout tricks might work too if
you don't want an extra div.
.left_column { width: 220px; float: left; }
.ie7-fix {position: fixed;width: 220px;}
div class=left_column
div class=ie7-fix
..
/div
/div
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] Ie7 test?
Can anyone guess why the columns overlap? http://freemealcenter.com The first thing I'd try is to remove the float declaration on the fixed element -- Regards, Thierry www.tjkdesign.com | www.ez-css.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Ie7 test?
Add an extra div within left_column, and declare the position:fixed
in the new div instead.
Or, since you already have an extra div, add this to screen.css:
.left_column { width: 220px; float: left; }
.left_column .column_cushion { width: 180px; position: fixed; }
Best regards,
Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] Ie7 test?
Add an extra div within left_column, and declare the position:fixed
in the new div instead.
Or, since you already have an extra div, add this to screen.css:
.left_column { width: 220px; float: left; }
.left_column .column_cushion { width: 180px; position: fixed; }
I don't think there is a need for an extra div in there.
The way I understand the styling, the float is only needed for IE6.
So either Joseph should hide that float declaration from other browsers or
simply replace this rule:
.left_column {
float:left;
position:fixed;
width:220px;
}
With this one:
.left_column {
position:absolute;
position:fixed;
width:220px;
}
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
