date:20160310

Re: [css-d] Menu hover bleeding 1px on FF

2016-03-10 Thread Dave Chiu

if you want to do CSS only, you could take advantage of keyframes, which
works on most browsers these days
http://caniuse.com/#search=css-animation

add a simple CSS animation:
@keyframes showSubnav {
0% { opacity: 0; }
100% { opacity: 1; }
}

add the animation elements to your :hover ul class
#pronet_topnav_wrapper #pronet_nav_container #pronet_nav ul#subnav li:hover
ul {
[...] /* opacity: 1; // remove this, will now be specified in the keyframe
*/ animation-delay: 200ms; // spreading the 400ms across the delay +
duration, adjust as desired animation-direction: normal;
animation-duration: 200ms; // second half of the requested 400ms delay.
animation-name: showSubnav; animation-iteration-count: 1;
animation-fill-mode: forwards; }

you will discover another issue though, the subnav is triggered by hover on
the LI not the A, so i'd recommend moving the styling for the a:hover into
a ul#subnav > li:hover > a class so it all happens together, like so:
#pronet_topnav_wrapper #pronet_nav_container #pronet_nav ul#subnav >
li:hover > a

On Thu, Mar 10, 2016 at 6:15 PM, J.C. Berry  wrote:

> Thanks again, everyone. Now I have an issue that is more of a usability one
> with that menu.
>
> We need:
> 1. The submenus to delay opening until after the main menu animation/bkgd
> color (0.4s).
> 2. And for the main menu item to stay highlighted while the mouse is over
> the submenu.
>
> I just didn't know if either of these is possible with CSS?
>
> On Thu, Mar 10, 2016 at 3:09 PM, J.C. Berry 
> wrote:
>
> > Works great! Beautiful Dave. Thanks to Karl as well.
> >
> > On Thu, Mar 10, 2016 at 2:57 PM, Dave Chiu 
> > wrote:
> >
> >> adding vertical-align: top will at least get FF and Chrome to act the
> same
> >> #pronet_topnav_wrapper #pronet_nav_container #pronet_nav ul#subnav > li
> a
> >> {
> >> [...]
> >> vertical-align: top;
> >> }
> >>
> >> then adjust the margin-top on the list item from 6 to 7
> >> #pronet_topnav_wrapper #pronet_nav_container #pronet_nav ul#subnav > li
> {
> >> margin-top: 7px !important;
> >> }
> >>
> >> there is also a small issue where in Firefox the height of the anchor
> tag
> >> on hover is 41px, and in Chrome it's 40px, but i think the above is the
> >> quickest way to answer what you asked for without changing more.
> >>
> >> On Thu, Mar 10, 2016 at 5:28 PM, J.C. Berry 
> >> wrote:
> >>
> >>> Hi everyone, could you help with an issue I am having with a menu hover
> >>> background color in Firefox?
> >>>
> >>> http://www.xifin.com/pronet/partners
> >>>
> >>> You will notice that the hover bleeds about 1px on the bottom. Any
> ideas?
> >>>
> >>> Thanks!
> >>>
> >>> --
> >>> J.C. Berry, M.A.
> >>> UI Developer
> >>> 619.306.1712(m)
> >>> jcharlesbe...@gmail.com
> >>> http://www.mindarc.com
> >>>
> >>>
> 
> >>>
> >>> This E-mail is covered by the Electronic Communications Privacy Act, 18
> >>> U.S.C. ?? 2510-2521 and is legally privileged. This information is
> >>> confidential information and is intended only for the use of the
> >>> individual
> >>> or entity named above. If the reader of this message is not the
> intended
> >>> recipient, you are hereby notified that any dissemination, distribution
> >>> or
> >>> copying of this communication is strictly prohibited.
> >>>
> >>>
> 
> >>> __
> >>> 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/
> >>>
> >>
> >>
> >
> >
> > --
> > J.C. Berry, M.A.
> > UI Developer
> > 619.306.1712(m)
> > jcharlesbe...@gmail.com
> > http://www.mindarc.com
> >
> >
> 
> >
> > This E-mail is covered by the Electronic Communications Privacy Act, 18
> > U.S.C. ?? 2510-2521 and is legally privileged. This information is
> > confidential information and is intended only for the use of the
> individual
> > or entity named above. If the reader of this message is not the intended
> > recipient, you are hereby notified that any dissemination, distribution
> or
> > copying of this communication is strictly prohibited.
> >
> >
> 
> >
>
>
>
> --
> J.C. Berry, M.A.
> UI Developer
> 619.306.1712(m)
>

Re: [css-d] New website

2016-03-10 Thread Karl DeSaulniers

Hello again Everyone,
I made edits to my site that I "believe" will fix most if not all of the issues 
people had with viewing my new website.
If I could ask you to take another look and let me know if that is the case, I 
would greatly appreciate it.

I think I have ironed out about 95-98% of the issues. Haven't made things 
conventional per se,
but it should be a little less confusing now.

http://designdrumm.com

TIA,

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/

[css-d] Samsung Galaxy ?

2016-03-10 Thread Crest Christopher


Anyone on this list have a Samsung Galaxy S5 or S6 or both ?


__
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] Menu hover bleeding 1px on FF

2016-03-10 Thread J.C. Berry

Thanks again, everyone. Now I have an issue that is more of a usability one
with that menu.

We need:
1. The submenus to delay opening until after the main menu animation/bkgd
color (0.4s).
2. And for the main menu item to stay highlighted while the mouse is over
the submenu.

I just didn't know if either of these is possible with CSS?

On Thu, Mar 10, 2016 at 3:09 PM, J.C. Berry  wrote:

> Works great! Beautiful Dave. Thanks to Karl as well.
>
> On Thu, Mar 10, 2016 at 2:57 PM, Dave Chiu 
> wrote:
>
>> adding vertical-align: top will at least get FF and Chrome to act the same
>> #pronet_topnav_wrapper #pronet_nav_container #pronet_nav ul#subnav > li a
>> {
>> [...]
>> vertical-align: top;
>> }
>>
>> then adjust the margin-top on the list item from 6 to 7
>> #pronet_topnav_wrapper #pronet_nav_container #pronet_nav ul#subnav > li {
>> margin-top: 7px !important;
>> }
>>
>> there is also a small issue where in Firefox the height of the anchor tag
>> on hover is 41px, and in Chrome it's 40px, but i think the above is the
>> quickest way to answer what you asked for without changing more.
>>
>> On Thu, Mar 10, 2016 at 5:28 PM, J.C. Berry 
>> wrote:
>>
>>> Hi everyone, could you help with an issue I am having with a menu hover
>>> background color in Firefox?
>>>
>>> http://www.xifin.com/pronet/partners
>>>
>>> You will notice that the hover bleeds about 1px on the bottom. Any ideas?
>>>
>>> Thanks!
>>>
>>> --
>>> J.C. Berry, M.A.
>>> UI Developer
>>> 619.306.1712(m)
>>> jcharlesbe...@gmail.com
>>> http://www.mindarc.com
>>>
>>> 
>>>
>>> This E-mail is covered by the Electronic Communications Privacy Act, 18
>>> U.S.C. ?? 2510-2521 and is legally privileged. This information is
>>> confidential information and is intended only for the use of the
>>> individual
>>> or entity named above. If the reader of this message is not the intended
>>> recipient, you are hereby notified that any dissemination, distribution
>>> or
>>> copying of this communication is strictly prohibited.
>>>
>>> 
>>> __
>>> 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/
>>>
>>
>>
>
>
> --
> J.C. Berry, M.A.
> UI Developer
> 619.306.1712(m)
> jcharlesbe...@gmail.com
> http://www.mindarc.com
>
> 
>
> This E-mail is covered by the Electronic Communications Privacy Act, 18
> U.S.C. ?? 2510-2521 and is legally privileged. This information is
> confidential information and is intended only for the use of the individual
> or entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any dissemination, distribution or
> copying of this communication is strictly prohibited.
>
> 
>



-- 
J.C. Berry, M.A.
UI Developer
619.306.1712(m)
jcharlesbe...@gmail.com
http://www.mindarc.com


This E-mail is covered by the Electronic Communications Privacy Act, 18
U.S.C. ?? 2510-2521 and is legally privileged. This information is
confidential information and is intended only for the use of the individual
or entity named above. If the reader of this message is not the intended
recipient, you are hereby notified that any dissemination, distribution or
copying of this communication is strictly prohibited.

__
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] Menu hover bleeding 1px on FF

2016-03-10 Thread J.C. Berry

Works great! Beautiful Dave. Thanks to Karl as well.

On Thu, Mar 10, 2016 at 2:57 PM, Dave Chiu  wrote:

> adding vertical-align: top will at least get FF and Chrome to act the same
> #pronet_topnav_wrapper #pronet_nav_container #pronet_nav ul#subnav > li a {
> [...]
> vertical-align: top;
> }
>
> then adjust the margin-top on the list item from 6 to 7
> #pronet_topnav_wrapper #pronet_nav_container #pronet_nav ul#subnav > li {
> margin-top: 7px !important;
> }
>
> there is also a small issue where in Firefox the height of the anchor tag
> on hover is 41px, and in Chrome it's 40px, but i think the above is the
> quickest way to answer what you asked for without changing more.
>
> On Thu, Mar 10, 2016 at 5:28 PM, J.C. Berry 
> wrote:
>
>> Hi everyone, could you help with an issue I am having with a menu hover
>> background color in Firefox?
>>
>> http://www.xifin.com/pronet/partners
>>
>> You will notice that the hover bleeds about 1px on the bottom. Any ideas?
>>
>> Thanks!
>>
>> --
>> J.C. Berry, M.A.
>> UI Developer
>> 619.306.1712(m)
>> jcharlesbe...@gmail.com
>> http://www.mindarc.com
>>
>> 
>>
>> This E-mail is covered by the Electronic Communications Privacy Act, 18
>> U.S.C. ?? 2510-2521 and is legally privileged. This information is
>> confidential information and is intended only for the use of the
>> individual
>> or entity named above. If the reader of this message is not the intended
>> recipient, you are hereby notified that any dissemination, distribution or
>> copying of this communication is strictly prohibited.
>>
>> 
>> __
>> 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/
>>
>
>


-- 
J.C. Berry, M.A.
UI Developer
619.306.1712(m)
jcharlesbe...@gmail.com
http://www.mindarc.com


This E-mail is covered by the Electronic Communications Privacy Act, 18
U.S.C. ?? 2510-2521 and is legally privileged. This information is
confidential information and is intended only for the use of the individual
or entity named above. If the reader of this message is not the intended
recipient, you are hereby notified that any dissemination, distribution or
copying of this communication is strictly prohibited.

__
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] Menu hover bleeding 1px on FF

2016-03-10 Thread Dave Chiu

adding vertical-align: top will at least get FF and Chrome to act the same
#pronet_topnav_wrapper #pronet_nav_container #pronet_nav ul#subnav > li a {
[...]
vertical-align: top;
}

then adjust the margin-top on the list item from 6 to 7
#pronet_topnav_wrapper #pronet_nav_container #pronet_nav ul#subnav > li {
margin-top: 7px !important;
}

there is also a small issue where in Firefox the height of the anchor tag
on hover is 41px, and in Chrome it's 40px, but i think the above is the
quickest way to answer what you asked for without changing more.

On Thu, Mar 10, 2016 at 5:28 PM, J.C. Berry  wrote:

> Hi everyone, could you help with an issue I am having with a menu hover
> background color in Firefox?
>
> http://www.xifin.com/pronet/partners
>
> You will notice that the hover bleeds about 1px on the bottom. Any ideas?
>
> Thanks!
>
> --
> J.C. Berry, M.A.
> UI Developer
> 619.306.1712(m)
> jcharlesbe...@gmail.com
> http://www.mindarc.com
>
> 
>
> This E-mail is covered by the Electronic Communications Privacy Act, 18
> U.S.C. ?? 2510-2521 and is legally privileged. This information is
> confidential information and is intended only for the use of the individual
> or entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any dissemination, distribution or
> copying of this communication is strictly prohibited.
>
> 
> __
> 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] Menu hover bleeding 1px on FF

2016-03-10 Thread Karl DeSaulniers

Hi J.C.,
I noticed that

#pronet_topnav_wrapper #pronet_nav_container #pronet_nav {
height: 41px;
...
}

The rest of your nav containers are height: 40px;
Might be the culprit.

Also, you should not need to use !important for your nav.
Check your floats and/or display: block vs. display: inline-block

inline-block will fill its container better than just block. IMEx
Something you may want on your anchor tags in your nav.

Lastly, before adding padding, check the line-height on text in your nav along 
with text-align:center on the parent to give them that centering proportion.
Padding will add to the width and height of the parent container if it extends 
past.

This might also might be the culprit.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com






On Mar 10, 2016, at 4:28 PM, "J.C. Berry"  wrote:

> Hi everyone, could you help with an issue I am having with a menu hover
> background color in Firefox?
> 
> http://www.xifin.com/pronet/partners
> 
> You will notice that the hover bleeds about 1px on the bottom. Any ideas?
> 
> Thanks!
> 
> -- 
> J.C. Berry, M.A.
> UI Developer
> 619.306.1712(m)
> jcharlesbe...@gmail.com
> http://www.mindarc.com
> 
> 
> This E-mail is covered by the Electronic Communications Privacy Act, 18
> U.S.C. ?? 2510-2521 and is legally privileged. This information is
> confidential information and is intended only for the use of the individual
> or entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any dissemination, distribution or
> copying of this communication is strictly prohibited.
> 
> __
> 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] Menu hover bleeding 1px on FF

2016-03-10 Thread J.C. Berry

Hi everyone, could you help with an issue I am having with a menu hover
background color in Firefox?

http://www.xifin.com/pronet/partners

You will notice that the hover bleeds about 1px on the bottom. Any ideas?

Thanks!

-- 
J.C. Berry, M.A.
UI Developer
619.306.1712(m)
jcharlesbe...@gmail.com
http://www.mindarc.com


This E-mail is covered by the Electronic Communications Privacy Act, 18
U.S.C. ?? 2510-2521 and is legally privileged. This information is
confidential information and is intended only for the use of the individual
or entity named above. If the reader of this message is not the intended
recipient, you are hereby notified that any dissemination, distribution or
copying of this communication is strictly prohibited.

__
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] Menu hover bleeding 1px on FF

Re: [css-d] New website

[css-d] Samsung Galaxy ?

Re: [css-d] Menu hover bleeding 1px on FF

Re: [css-d] Menu hover bleeding 1px on FF

Re: [css-d] Menu hover bleeding 1px on FF

Re: [css-d] Menu hover bleeding 1px on FF

[css-d] Menu hover bleeding 1px on FF

8 matches

Site Navigation

Mail list logo

Footer information