[css-d] W3C errors. in application....
I do application development and the W3C throws an error: 1 with an Accessible counter I pulled off the web, that goes with a textarea box name= is used with span or div span id=abc name=789r aria-atomic=true aria-live=polite class=fontsize085 2000/span The back-end developer used rid='1' with a datepicker input id=111 name='pickup value=07/07/2014 type=text class=width5 rid=1 section I am using without a heading... and it throws a warning.. Am I used section incorrectly? This site is in development and will always be a private application so I cannot show it. Thanks Nancy __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is There A Way to Shrink Wrap Inline Elements?
A more stable fix is using a small negative margin-right (something like -.1em). But again, this is dependent on platform, browser and font-metrics. Thanks you guys for all the input. Yes it seems to be the font metrics as when I resized the text in the test div it the same spacing issue appeared. I decided to use a negative margin in percentages though and that seems to work, at least in Chrome. Have not done full testing across browsers yet. I would recommend to redo the SVG as an image since the can be scaled as a percentage width of the h1 header and would look much more graceful as you re-sized the view-port. The only problem is it also fails in IE12. Will have to experiment with this later ... thanks for the demos and if you can leave them up for awhile would greatly appreciate it. Just curious if text-rendering:optimizeLegibility might help. I've found it can really be helpful with type. Rick, can you please expand on this? I'm not sure what this is or how to implement it. Elli Vizcaino http://www.e7flux.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] W3C errors. in application....
2014-07-09 15:32, Nancy Johnson wrote: I do application development and the W3C throws an error: These issues have nothing to do with CSS, so they are off-topic in this list. I'll send you privately an explanation of them. Generally, in problems with HTML validation, check http://validator.w3.org/feedback.html Yucca __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] P tag can't be child of label ?
I've had to restyle my form and it has caused the validator to inform me I'm not allowed to use p as a child element of a label tag ? __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] P tag can't be child of label ?
On Wed, Jul 9, 2014 at 1:58 PM, Crest Christopher crestchristop...@gmail.com wrote: I've had to restyle my form and it has caused the validator to inform me I'm not allowed to use p as a child element of a label tag ? From what I can see (searching, etc) the only thing you are supposed to have inside a label is the associated input. You don't have to, but you can. If you wrap the input with the label, you can leave off the 'for' attribute (just read that... had no idea about that one!). There is some language in the spec stating the above, but not being of the right mind to dig into the spec, I didn't see anything obvious stating NOTHING else can be within the label element. So I wonder if span might be allowed? I'd have to whip up a test and run it through the validator and see if it complains. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] P tag can't be child of label ?
On Wed, Jul 9, 2014 at 2:08 PM, Tom Livingston tom...@gmail.com wrote: On Wed, Jul 9, 2014 at 1:58 PM, Crest Christopher crestchristop...@gmail.com wrote: I've had to restyle my form and it has caused the validator to inform me I'm not allowed to use p as a child element of a label tag ? From what I can see (searching, etc) the only thing you are supposed to have inside a label is the associated input. You don't have to, but you can. If you wrap the input with the label, you can leave off the 'for' attribute (just read that... had no idea about that one!). There is some language in the spec stating the above, but not being of the right mind to dig into the spec, I didn't see anything obvious stating NOTHING else can be within the label element. So I wonder if span might be allowed? I'd have to whip up a test and run it through the validator and see if it complains. A quick test resulted in no complaint about a span inside label. However, maybe someone more familiar with the spec can say whether that is actually OK or not according to the spec. Remember, the validator isn't law, it's a guide -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] P tag can't be child of label ?
2014-07-09 20:58, Crest Christopher wrote:
I've had to restyle my form and it has caused the validator to inform me
I'm not allowed to use p as a child element of a label tag ?
The information is correct, see e.g.
http://www.w3.org/TR/REC-html40/interact/forms.html#edef-LABEL
http://www.w3.org/TR/html5/forms.html#the-label-element
Only inline content / phrasing content is allowed, e.g. span is
OK, p is not. This is natural, since the element is supposed to
contain a short label (caption) for a control, like Name or Address
or something a bit longer, but not a paragraph.
What matters in CSS here is that the syntax rule is not just a formal
rule. Browsers actually enforce it in parsing, and this affects what
happens when you style a label element. Consider this example:
!doctype html
title /title
style
label { outline: solid red }
/style
labelfoo pbar/p done/label
This is invalid markup, but what matters in practice is that in
browsers, the p tag closes the open label element (and the closing
tag /label later will be ignored). So the CSS rule will draw an
outline around the word foo only.
What you should depends on the context and purpose, like what you are
using label for, why it should contain a paragraph, and how do you
wish to style things.
Yucca
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is There A Way to Shrink Wrap Inline Elements?
Look at http://www.webdesignerdepot.com/2013/05/how-to-optimize-for-legibility-using-text-rendering/ or Google it for many more articles. Support for the optimizeLegibility setting is pretty good. The text-rendering property has four settings: auto: allows the browser to choose a setting itself (generally defaults to optimizeSpeed) optimizeSpeed: focuses on speed optimizeLegibility: focuses on advanced rendering geometricPrecision: precise rendering optimizeLegibility will improve kerning and add ligature substitution. geometricPrecision (minimally supported, just Chrome, I think) allegedly calculates subpixel kerning values and prioritizes kerning over any other property. Rick Gordon On 7/9/14 9:54 AM, Elli Vizcaino wrote: A more stable fix is using a small negative margin-right (something like -.1em). But again, this is dependent on platform, browser and font-metrics. Thanks you guys for all the input. Yes it seems to be the font metrics as when I resized the text in the test div it the same spacing issue appeared. I decided to use a negative margin in percentages though and that seems to work, at least in Chrome. Have not done full testing across browsers yet. I would recommend to redo the SVG as an image since the can be scaled as a percentage width of theh1 header and would look much more graceful as you re-sized the view-port. The only problem is it also fails in IE12. Will have to experiment with this later ... thanks for the demos and if you can leave them up for awhile would greatly appreciate it. Just curious if text-rendering:optimizeLegibility might help. I've found it can really be helpful with type. Rick, can you please expand on this? I'm not sure what this is or how to implement it. Elli Vizcaino http://www.e7flux.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ___ RICK GORDON EMERALD VALLEY GRAPHICS AND CONSULTING ___ WWW: http://www.shelterpub.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] P tag can't be child of label ?
* What you should depends on the context and purpose, like what you
are using label for, why it should contain a paragraph, and how do
you wish to style things.
I didn't understand your last paragraph ?
Placing a p tag within a label causes the browser to ignore the
label tag, that is the information I strictly understood, as it was
direct !
Jukka K. Korpela wrote:
2014-07-09 20:58, Crest Christopher wrote:
I've had to restyle my form and it has caused the validator to inform me
I'm not allowed to use p as a child element of a label tag ?
The information is correct, see e.g.
http://www.w3.org/TR/REC-html40/interact/forms.html#edef-LABEL
http://www.w3.org/TR/html5/forms.html#the-label-element
Only inline content / phrasing content is allowed, e.g. span is
OK, p is not. This is natural, since the element is supposed to
contain a short label (caption) for a control, like Name or
Address or something a bit longer, but not a paragraph.
What matters in CSS here is that the syntax rule is not just a formal
rule. Browsers actually enforce it in parsing, and this affects what
happens when you style a label element. Consider this example:
!doctype html
title /title
style
label { outline: solid red }
/style
labelfoo pbar/p done/label
This is invalid markup, but what matters in practice is that in
browsers, the p tag closes the open label element (and the closing
tag /label later will be ignored). So the CSS rule will draw an
outline around the word foo only.
What you should depends on the context and purpose, like what you are
using label for, why it should contain a paragraph, and how do you
wish to style things.
Yucca
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] P tag can't be child of label ?
2014-07-09 21:30, Crest Christopher wrote: * What you should depends on the context and purpose, like what you are using label for, why it should contain a paragraph, and how do you wish to style things. I didn't understand your last paragraph ? Well I meant to write What you should do depends..., but I think this wasn't the problem. What I meant is that I cannot imagine what markup you have and how it should be styled. The only obvious thing is that the markup needs some fixing. Only after fixing it can we design the styling properly, though the intended styling may affect the markup you choose. Placing a p tag within a label causes the browser to ignore the label tag, that is the information I strictly understood, as it was direct ! No, it does not cause label to be ignored, but the label element will be terminated earlier than you thought. If you had labelp..., then the label element would have empty content (but it could still be styled, in principle). Yucca __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table with fixed headers
On Sun, Jul 6, 2014 at 10:52 AM, Larry Martell larry.mart...@gmail.com wrote: On Sat, Jul 5, 2014 at 3:14 PM, Karl DeSaulniers k...@designdrumm.com wrote: On Jul 4, 2014, at 1:18 PM, Larry Martell larry.mart...@gmail.com wrote: On Thu, Jul 3, 2014 at 10:49 PM, Karl DeSaulniers k...@designdrumm.com wrote: Hi Larry, See my code pen. I think this is what your wanting and it's table less. :) http://codepen.io/designdrumm/pen/FLAkc Haven't tested on IE, I'm on a mac. But safari, firefox and opera seemed to work and display the same. HTH, Karl, thanks very much for taking the time to put this up. But it still has the same issue - if a cell of data is long, then it runs into the adjoining cell, e.g.: http://codepen.io/anon/pen/IGcmt Also I need it to be table since we use a table sorting package. I've found a javascript solution that appears to work: http://nevcal.com/eclectic/UltimateScrollingTable.html The only issue I am having is that I've lost the on click handler for the table headers that invoke the sorting. I think I know how to fix it, but I haven't had a chance to implement it yet. I would much prefer a pure CSS solution, but I don't think that's possible while keeping all the features the table provides. Hi Larry, Give this one a try. I made this one with a table. HTH, http://codepen.io/designdrumm/pen/dreBL Hi Karl, Thanks very much for taking the time to put this up. The issue I see with this, is you set the column width to 33% (100/number of columns). In my tables I have 10-15 columns and I do not want them to be the same size - I need them to auto size based on the data. I played around with your code and when I added more columns, some with very short data (e.g. 4 characters), the headers and data got misaligned. I have 10 tables and they are all different and I don't want to have to have a style for each of my 125 cells. I'd like it to work as it does now (where I don't set any widths) and the table just works as I want. Thanks again. Just to close out this thread, I ended up using http://nevcal.com/eclectic/UltimateScrollingTable.html __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] W3C errors. in application....
Technically the error was thrown correctly: http://www.w3.org/html/wg/drafts/html/master/sections.html#the-section-element http://html5doctor.com/the-section-element/ Eric On July 9, 2014 at 8:32 AM Nancy Johnson njohnso...@gmail.com wrote: I do application development and the W3C throws an error: 1 with an Accessible counter I pulled off the web, that goes with a textarea box name= is used with span or div span id=abc name=789r aria-atomic=true aria-live=polite class=fontsize085 2000/span The back-end developer used rid='1' with a datepicker input id=111 name='pickup value=07/07/2014 type=text class=width5 rid=1 section I am using without a heading... and it throws a warning.. Am I used section incorrectly? This site is in development and will always be a private application so I cannot show it. Thanks Nancy __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
