Re: [css-d] PROBLEM with CSS for checkbox - Firefox
On 6/18/2017 9:21 AM, Philippe Wittenbergh wrote:
On Jun 18, 2017, at 7:56 PM, william drescher wrote:
The original problem was that firefox sized the radio buttones and checkboxes
very small and ignored the
"html {font-size 2.2 rem}" for them.
I am writing this for an intranet and ff is the only browser supported. I
haven't had time to try the suggested fixes.
here is a test page…
https://dev.l-c-n.com/_temp/srbc.html
The checkbox uses a SVG file as background image. Feel free to
steal/borrow/reuse/…
But I was wrong to originally suggest using the [checked] attribute. That never
matches when the checkbox / radio is toggled. I should have suggested using the
`:checked` pseudo-class instead.
Philippe
Thanks Philippe
When/If I understand the source I will use this. I really like
the way it looks.
bill
__
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] PROBLEM with CSS for checkbox - Firefox
On 6/17/2017 6:48 PM, Philippe Wittenbergh wrote:
On Jun 18, 2017, at 6:53 AM, Karl DeSaulniers wrote:
Yes I have. I had to use it once when mobile phones were styling my submit
buttons and not letting my style be applied.
It would allow the color, but not the appearance like borders and shading to be
applied.
Once I added the -*-appearance: unset, it allowed my style to be applied
including borders and shading.
IOW - you did the same as what appearance:none does. And it would not allow the
author styling of border / background of radio buttons and checkboxes in
Firefox older than 54, even when using !important.
It also does _not_ help for radio buttons and checkbox on Mobile Safari (it
does for input[type=button|submit]).
FWIW, the problem the OP has is that, starting with Firefox 54, his checkboxes
and radio buttons lost their borders, and the indicator for the checked state.
But he does want to remove the native look-and-feel.
Philippe
--
Philippe Wittenbergh
https://l-c-n.com/
The original problem was that firefox sized the radio buttones
and checkboxes very small and ignored the
"html {font-size 2.2 rem}" for them.
I am writing this for an intranet and ff is the only browser
supported. I haven't had time to try the suggested fixes.
bill
__
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] PROBLEM with CSS for checkbox - Firefox
I have: Since the most recent update of Firefox the checkboxes and radio buttons no longer show (but the outline does) and when clicked the checkbox/radio still don't show, but the receiving program acts as if it has received the checked box/radio Thoughts? -bill __ 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] default border property?
On 7/22/2016 8:38 PM, John J wrote: Can anyone shed light on the concept of the setting of default border properties? I may be suffering the effects of this on some elements which ought to be following the same css, but which seem not to be; differing border code might be the reason. Thank you! here is more than you might want: http://www.w3schools.com/css/css_border.asp bill __ 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] How to: enlarge all content for accessibility
On 5/29/2016 10:35 PM, Philippe Wittenbergh wrote:
On May 30, 2016, at 3:02 AM, william drescher wrote:
On 5/29/2016 9:13 AM, Philippe Wittenbergh wrote:
On May 29, 2016, at 6:49 PM, william drescher wrote:
That works nicely except the radio buttons stay small.
Try setting width and height on those:
[type=checkbox], [type=radio] { width: 1rem; height: 1rem; }
Or something like that - adjust to taste and needs, etc.
Bare in mind that the look of those things is actually an image.
Interesting. Doing that changes the spacing, as if they were larger, but the
radio button stays the same size.
Interesting. Firefox on OS X scales the image along the size, Safari (OS X,
iOS) scale to a certain size, but not more. I never really use this kind of
things, as scaling those form controls is an exercise in futility.
For Firefox, you can add `-moz-appearance: none;`. This will remove the
platform look and revert the widgets to some good old GFX thing from the year
1995 or so. It should scale though. For your Android browser (Chrome I guess?),
no clue unfortunately. Perhaps add an outline to make it more visible?
[type=checkbox], [type=radio] {
width: 1rem;
height: 1rem;
-moz-appearance: none;
outline: 2px dotted red; /* or anything to taste that might help */
}
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
I apologize, I misled us both. The css you gave me does work in
Anderoid, just not FF.
adding -moz-appearance:none did the trick.
Many thanks for the help and the education.
--
bill
__
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] How to: enlarge all content for accessibility
On 5/29/2016 9:13 AM, Philippe Wittenbergh wrote:
On May 29, 2016, at 6:49 PM, william drescher wrote:
That works nicely except the radio buttons stay small.
Try setting width and height on those:
[type=checkbox], [type=radio] { width: 1rem; height: 1rem; }
Or something like that - adjust to taste and needs, etc.
Bare in mind that the look of those things is actually an image.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
Interesting. Doing that changes the spacing, as if they were
larger, but the radio button stays the same size.
bill
__
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] How to: enlarge all content for accessibility
On 5/28/2016 8:08 AM, Philippe Wittenbergh wrote:
On May 28, 2016, at 7:38 PM, william drescher wrote:
My wife is vision impaired. I am writing a web application for her. How can I
style the page so it displays at 300%. I can increase the fontsize, but then
it does not increase the size of the form elements. I want to increase
everything.
I would start with:
html, button, input, select, textarea { font-size: 3rem; }
then see if you need further adjustment to form controls (such as padding,
border, …)
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
Thank you very much.
That works nicely except the radio buttons stay small.
Firefox 46.0.1 on Win10
whatever browser comes with Android KitKat
__
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] How to: enlarge all content for accessibility
My wife is vision impaired. I am writing a web application for her. How can I style the page so it displays at 300%. I can increase the fontsize, but then it does not increase the size of the form elements. I want to increase everything. Changing the dpi of the display works, but then it is a problem for me. Any suggestions will be appreciated. -- bill __ 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] Slides JS behavior due to CSS? (OT?)
On 10/24/2014 11:21 PM, J.C. Berry wrote: Thanks, just to clarify. It's supposed to be smooth. I didn't know how to describe it other than jump and the radiology one is seamless.. On Fri, Oct 24, 2014 at 8:17 PM, David Laakso wrote: On Fri, Oct 24, 2014 at 10:49 PM, J.C. Berry wrote: Hello all, Feel free to tell me that this is not a CSS issue, but I thought I'd ask: We have a sliding banner on our main site homepage http://www.xifin.com And our radiology microsite homepage http://www.xifin.com/radiology But you will notice on the main site that there is a jump in the image at the end of each transition. Do you think this is due to a CSS problem? The script is the same on both sites, so I am stumped. The main site has buttons to advance slides, the radiology site does not. On the radiology site the back half of the slide advances (rather than the front half)half way, then the rest of the slide pops up. Now, having said that, I have no suggestions. -bill __ 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] Trying to get the big picture view on responsive design
On 11/13/2013 7:26 AM, william drescher wrote: ... Fluid/flexible layouts are, IMO, best. Like you mention, new devices are coming out all the time. Percentage width on your structure help you cover all the varying widths. Start mobile first, and adjust layout with breakpoints when the *content* requires it. Sometimes a single column is all you need up to 600px wide or so. I generally use 3-4 breakpoints, adding in others as need to fine-tune widths or # of columns, etc. I looked and googled but... what is a css breakpoint? Is it just setting width ? bill Thanks all ! bill __ 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] Trying to get the big picture view on responsive design
... Fluid/flexible layouts are, IMO, best. Like you mention, new devices are coming out all the time. Percentage width on your structure help you cover all the varying widths. Start mobile first, and adjust layout with breakpoints when the *content* requires it. Sometimes a single column is all you need up to 600px wide or so. I generally use 3-4 breakpoints, adding in others as need to fine-tune widths or # of columns, etc. I looked and googled but... what is a css breakpoint? Is it just setting width ? bill __ 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] The Simpsons in CSS
On 11/11/2013 12:33 PM, Theresa Jennings wrote: Deconstruct at your leisure. http://pattle.github.io/simpsons-in-css/ I had no idea CSS could do this. I need to get out more. someone has WAY too much time on his/her hands. But, it is a masterful display of CSS bill __ 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] ADMIN: Gggfcnjsheyl beggigpk. Nnkkknkkkn.
On 9/9/2013 12:36 PM, Eric A. Meyer wrote: On 14 Jan 2000, at 18:55, Carl Peterson wrote: Ccgeg(1(!(eg(:efffvdgv),?1sfgbhxc .)$hvhjFjfhgfzjfgxhsxdffxxfc ujirr ffnxmcgddhhh BhhgucuvvvcvvgghDjhc jbvvhicg Sorry, everyone; I only just now saw this and have taken the usual action. And while I was tempted to ROT13 my reply in order to attempt some level of visual consistency, I decided to refrain. This time. LOL bill __ 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] media break woes back
On 8/30/2013 5:06 PM, John A. Johnson wrote: On Aug 30, 2013, at 2:02 PM, Chris Rockwell wrote: No, that is the problem. You commented out the opening of you tablet mq, but not the closing. well that seems to have fixed one problem; the mobile MQ break to at least happen. I see my 960 layout doesn't measure 960! I've got a wrapper and header both max-width960px, but it actually measures 860! yipes! which is worse: 1) a page that works but doesn't seem to, or 2) a page that doesn't work, but seems to? bill __ 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] Simple Floats on Multiple Rows Getting "Stuck"
On 5/30/2013 3:02 PM, Christopher Akins wrote: I'm almost embarrassed to admit I don't know why this is happening since I've worked with CSS for a number of years now. I don't claim to be a CSS master, though! :-) On this page: www.springfieldmo.gov/logos/ I have several floated items that look fine until the page is made narrower. Then I want the floats to fall nicely to the next line and slide all the way to the left, but they get "stuck" and won't slide all the way over to the left until the page is pulled way in to be at it's minimum width. I have a similar structure on a couple other pages, with similar results, and I've never been able to quite figure out what the issue is. I would guess it has something to do with conflicting heights on the elements or something. But I can't just put a "clear" rule on the floats, cause that would kill the float, right? I basically want something like a clearing element to kick in ONLY when the float needs to fall to the next row. Does that make sense? When I explored the site I found that the floats were getting stuck because the "Environmental Services" within the paragraph tags contains two BR tags that force the P to be larger than the other tag; even when the images are the same size. When I took out the BR tags it worked a charm. What I do in this circumstance is to drop the P tags and enclose the image and the text in a DIV and float the DIV. bill __ 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/
