Re: [css-d] Menu hover bleeding 1px on FF
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! Can't help with that, I am afraid, but I can tell you that the site renders badly here, with content disappearing off both the left and right-hand sides of the screen. Philip Taylor __ 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
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. Berrywrote: > 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] Menu hover bleeding 1px on FF
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. Berrywrote: > 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
Works great! Beautiful Dave. Thanks to Karl as well. On Thu, Mar 10, 2016 at 2:57 PM, Dave Chiuwrote: > 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
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. Berrywrote: > 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
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/