Re: [css-d] Chrome issue with 1 pixel spacing between
Den 15.07.2014 02:44, skrev Jon Reece: > Maybe a pixel-rounding issue? Yes, it is. Testing on various window-widths shows the gap come and go. > Bumping the width of .l-region--navigation nav > .menu > li ul.menu up to 100.5% appears to remove the unwanted separation in Chrome. That, or to add a 1px padding that will overlap the gap, seems to be the best solution. regards Georg __ 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] Placeholder fontsize in FireFox !
2014-07-15 5:21, Crest Christopher wrote:
I have a vendor prefix for a placeholder for both Chrome and FireFox,
the same values for both, except FireFox displays a font-size of 3em
larger then Chrome ?
Please share your HTML and CSS code.
I tested with just
::-webkit-input-placeholder {
font-size: 3em;
}
::-moz-placeholder {
font-size: 3em;
}
The font sizes appear to be the same, assuming that the browser settings
have the same basic font size. But in Chrome, the placeholder is cut off
so that it is illegible. So there surely is a problem, but not in the
font size.
Playing a little I was able to make the placeholder visible this way:
Placeholder
::-webkit-input-placeholder {
font-size: 3em;
}
::-moz-placeholder {
font-size: 3em;
vertical-align: 1em;
}
input {
height: 4em;
line-height: 4em;
}
Search:
Now it is easier to see that the font sizes are the same. There are
other problems, though. The width of the box is too narrow for the
placeholder; this is understandable because it defaults to 20
characters, in the font size of the element. And the placeholder looks
grotesquely large, especially compared with the label’s font size and
the font size of the actual input text when I start typing. So I wonder
why you are setting font-size to 3em. Anyway, if you try that, there
will be sizing problems, but not with the font size itself, as far as I
can see.
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] Placeholder fontsize in FireFox !
I have a vendor prefix for a placeholder for both Chrome and FireFox, the same values for both, except FireFox displays a font-size of 3em larger then Chrome ? __ 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] Chrome issue with 1 pixel spacing between
Le 15 juil. 2014 à 10:37, Chris Rockwell a écrit : > That will resolve the issue with the spacing, but the menu functionality is > messed up -- `overflow` is not transitionable (?) so the sub menus appear > before the transition finishes. See this pen for an example: > http://codepen.io/anon/pen/gJsDd. Am I missing your point (very possible)? Nah, you’re not missing anything – I think. I didn't test interactively, only the static display in the inspector. The Blink inspector isn’t really good (ahem - understatement !!) at that kind things. In that case, why not set your dark blue background on the parent UL (.l-region--navigation nav > ul); that will mask the gap without side effect for other browsers. Philippe -- Philippe Wittenbergh http://l-c-n.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] Chrome issue with 1 pixel spacing between
Works for me since you made the nav go all the way accross the page. Mac OS Chrome 28.0.1500.71 Best, Karl DeSaulniers Design Drumm http://designdrumm.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] Chrome issue with 1 pixel spacing between
> > > In that case, why not add 'overflow: visible' to > .l-region--navigation nav > .menu:hover > li > ul > That will resolve the issue with the spacing, but the menu functionality is messed up -- `overflow` is not transitionable (?) so the sub menus appear before the transition finishes. See this pen for an example: http://codepen.io/anon/pen/gJsDd. Am I missing your point (very possible)? > > Something you may want to fix: add all the missing -webkit- prefixed > flex** properties for the benefit of Safari. Also, on “.front .l-header”, > your unprefixed linear-gradient uses the wrong syntax, it should use “TO > top” (or rather “to bottom”), as in: > background-image: linear-gradient(to bottom, #ff 0%, #ff 50%, > rgba(255, 255, 255, 0) 100%); > or you can omit the direction keyword, as top-to-bottom is the default) > Ah - thank you for this! Adding the prefixes wasn't even on my clean-up list and I surely would have missed them (time for auto-prefixer). I've fixed the "TO top" also. Thanks for going "above and beyond" to point out other issues Philippe, I do appreciate it! Chris __ 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] Chrome issue with 1 pixel spacing between
On Mon, Jul 14, 2014 at 5:16 PM, Chris Rockwell wrote: > I'm struggling to track down why, in Chrome (I'm in 35.0.1916.153 m), I'm > getting transparent separation between some items. It's not occurring in > Firefox or IE. > > The dev site is dev.truckingshow.com. To reproduce, simply mouse over any > of the main navigation items and you'll see a transparent separation that, > again, only occurs in Chrome on this home page. I'm also a bit baffled > because it doesn't happen on internal pages despite them using the same > styling, only the positioning is different. > Maybe a pixel-rounding issue? Bumping the width of .l-region--navigation nav > .menu > li ul.menu up to 100.5% appears to remove the unwanted separation in Chrome. -- Jon Reece jon.re...@gmail.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] Chrome issue with 1 pixel spacing between
Le 15 juil. 2014 à 08:30, Chris Rockwell a écrit : > Thanks Jeff. Unfortunately, overflow:hidden is required, otherwise the sub > nav items are always visible (you may not have noticed because the color is > white). The goal is to have the menu transition height from 0 to X with > css, so I can't use display: none -> display: block either. In that case, why not add 'overflow: visible' to .l-region--navigation nav > .menu:hover > li > ul That “fixes” the issue on my side (Opera latest release build, based on Chrome/35). I’m not clear what is happening, though. It looks like Bink is miscalculating the width of the child ul.menu, although the computed value matches that of the parent li. Something you may want to fix: add all the missing -webkit- prefixed flex** properties for the benefit of Safari. Also, on “.front .l-header”, your unprefixed linear-gradient uses the wrong syntax, it should use “TO top” (or rather “to bottom”), as in: background-image: linear-gradient(to bottom, #ff 0%, #ff 50%, rgba(255, 255, 255, 0) 100%); or you can omit the direction keyword, as top-to-bottom is the default) Philippe -- Philippe Wittenbergh http://l-c-n.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] Chrome issue with 1 pixel spacing between
Thanks Jeff. Unfortunately, overflow:hidden is required, otherwise the sub
nav items are always visible (you may not have noticed because the color is
white). The goal is to have the menu transition height from 0 to X with
css, so I can't use display: none -> display: block either.
Chris Rockwell
On Mon, Jul 14, 2014 at 7:10 PM, Jeff Peck wrote:
> I can't tell you why, but removing overflow: hidden from the style below
> fixes it for me in chrome:
>
> .l-region--navigation nav > .menu > li ul.menu {
> display: block;
> height: 0;
> /* overflow: hidden; */
> position: absolute;
> width: 100%;
> background: rgba(0, 54, 80, 0.97);
> -webkit-transition: height 0.5s 0.3s;
> -webkit-transition-delay: ease;
> -moz-transition: height 0.5s 0.3s ease;
> -o-transition: height 0.5s 0.3s ease;
> transition: height 0.5s 0.3s ease;
> }
>
> > -Original Message-
> > From: css-d-boun...@lists.css-discuss.org [mailto:
> css-d-boun...@lists.css-
> > discuss.org] On Behalf Of Chris Rockwell
> > Sent: Monday, July 14, 2014 4:17 PM
> > To: CSS-Discuss
> > Subject: [css-d] Chrome issue with 1 pixel spacing between
> >
> > Hey all,
> >
> > I'm struggling to track down why, in Chrome (I'm in 35.0.1916.153 m), I'm
> > getting transparent separation between some items. It's not occurring in
> > Firefox or IE.
> >
> > The dev site is dev.truckingshow.com. To reproduce, simply mouse over
> any
> > of the main navigation items and you'll see a transparent separation
> that,
> > again, only occurs in Chrome on this home page. I'm also a bit baffled
> > because it doesn't happen on internal pages despite them using the same
> > styling, only the positioning is different.
> >
> > Thanks for taking a look, and for any ideas.
> >
> >
> > Chris Rockwell
> > __
> >
> > 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] Chrome issue with 1 pixel spacing between
I can't tell you why, but removing overflow: hidden from the style below
fixes it for me in chrome:
.l-region--navigation nav > .menu > li ul.menu {
display: block;
height: 0;
/* overflow: hidden; */
position: absolute;
width: 100%;
background: rgba(0, 54, 80, 0.97);
-webkit-transition: height 0.5s 0.3s;
-webkit-transition-delay: ease;
-moz-transition: height 0.5s 0.3s ease;
-o-transition: height 0.5s 0.3s ease;
transition: height 0.5s 0.3s ease;
}
> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
> discuss.org] On Behalf Of Chris Rockwell
> Sent: Monday, July 14, 2014 4:17 PM
> To: CSS-Discuss
> Subject: [css-d] Chrome issue with 1 pixel spacing between
>
> Hey all,
>
> I'm struggling to track down why, in Chrome (I'm in 35.0.1916.153 m), I'm
> getting transparent separation between some items. It's not occurring in
> Firefox or IE.
>
> The dev site is dev.truckingshow.com. To reproduce, simply mouse over any
> of the main navigation items and you'll see a transparent separation that,
> again, only occurs in Chrome on this home page. I'm also a bit baffled
> because it doesn't happen on internal pages despite them using the same
> styling, only the positioning is different.
>
> Thanks for taking a look, and for any ideas.
>
>
> Chris Rockwell
> __
>
> 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/
[css-d] Chrome issue with 1 pixel spacing between
Hey all, I'm struggling to track down why, in Chrome (I'm in 35.0.1916.153 m), I'm getting transparent separation between some items. It's not occurring in Firefox or IE. The dev site is dev.truckingshow.com. To reproduce, simply mouse over any of the main navigation items and you'll see a transparent separation that, again, only occurs in Chrome on this home page. I'm also a bit baffled because it doesn't happen on internal pages despite them using the same styling, only the positioning is different. Thanks for taking a look, and for any ideas. Chris Rockwell __ 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 ?
You're fine On Monday, July 14, 2014, Crest Christopher wrote: > I'm confused, I was using the for attribute; > email > > ??? > > Tom Livingston wrote: > > On Sun, Jul 13, 2014 at 7:05 PM, Robert A. Rosenberg > wrote: > > At 14:08 -0400 on 07/09/2014, Tom Livingston wrote about Re: [css-d] P tag > can't be child of label ?: > > > > If you wrap the input with the label, you can leave off the > 'for' attribute (just read that... had no idea about that one!). > > The use of the "for" attribute allows the label to not need to wrap the > input. It just references the id of the tag that wraps the input (if I > remember correctly). > > > Correct. I was just pointing out that IF you wrap the input, the 'for' > attribute isn't required. Something I didn't know. > > > > > -- 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 ?
I'm confused, I was using the for attribute; email ??? Tom Livingston wrote: On Sun, Jul 13, 2014 at 7:05 PM, Robert A. Rosenberg wrote: At 14:08 -0400 on 07/09/2014, Tom Livingston wrote about Re: [css-d] P tag can't be child of label ?: If you wrap the input with the label, you can leave off the 'for' attribute (just read that... had no idea about that one!). The use of the "for" attribute allows the label to not need to wrap the input. It just references the id of the tag that wraps the input (if I remember correctly). Correct. I was just pointing out that IF you wrap the input, the 'for' attribute isn't required. Something I didn't know. __ 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 Sun, Jul 13, 2014 at 7:05 PM, Robert A. Rosenberg wrote: > At 14:08 -0400 on 07/09/2014, Tom Livingston wrote about Re: [css-d] P tag > can't be child of label ?: > > >> If you wrap the input with the label, you can leave off the >> 'for' attribute (just read that... had no idea about that one!). > > > The use of the "for" attribute allows the label to not need to wrap the > input. It just references the id of the tag that wraps the input (if I > remember correctly). Correct. I was just pointing out that IF you wrap the input, the 'for' attribute isn't required. Something I didn't know. -- 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/
