Re: [css-d] How to use "radius" if I have no img tag?

[Dave Chiu]

can you provide a more complete example? what you are doing should work...

http://codepen.io/davechiu/pen/66633f12602bea1a49ac99936e49

could it be the difference of an absolute reference to the image in your
CSS but a relative in your HTML?

On Tue, Mar 21, 2017 at 10:01 AM, Michelle Konzack  wrote:

> Hello *,
>
> in one of my websites I have on the top left and right two images like
>
> 
>
> which I make round using
>
> .img_head { border-radius: 50%; }
>
> which works fine, BUT, if I use something like
>
> #pageHeadLeft { background-image: url(/michelle.png); }
>
> then I can not make it round like in the previous  version.   Now  I  am
> searching allready for hours without finding a solution.
>
> Any suggestions?
>
> Thanks
>
> --
> Michelle KonzackMiila ITSystems @ TDnet
> GNU/Linux Developer 00372-54541400
>
> __
> 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] anyway to style tag?

[Dave Chiu]

have you tried manipulating the ShadowDOM?

here's a quick example for webkit (chrome):
http://codepen.io/davechiu/pen/9132f47a5fb2af6c656185a8368f9600/

it will take some legwork for cross browser compatibility and your legacy
compatibility will be very limited.

On Tue, Mar 14, 2017 at 6:36 PM, Angela French  wrote:

> Hello,
> I am experimenting with using the  tag.  I see it looks very
> different across browsers.  Is there any way to consistently style it
> across browsers?  Everything I see from Google is years old.
>
> Thanks,
>
>
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu
> www.sbctc.edu
>
> __
> 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

[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
> >
> >
> -

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

[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] Why box-shadow doesn't work for one div while work for another

[Dave Chiu]

it is working, but the bottom of the shadow is being covered up by the
buttons panel.

adjust the z-index and you'll have the effect you were going for:
http://jsfiddle.net/bzgsjtb4/8/


On Fri, Aug 22, 2014 at 12:26 PM, Артур Истомин  wrote:

> I need box-shadow work for both :  and  id="buttons">. But it only work for latter. Why? And how to make that
> work? http://jsfiddle.net/bzgsjtb4/
>
> Thanks.
> __
> 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] HTML5 CSS3 Table border question

[Dave Chiu]

too simple, the doctor wants this more convoluted-like in CSS3:
http://jsfiddle.net/2JSRs/


On Tue, Oct 15, 2013 at 10:49 AM, Philip Taylor  wrote:

>
>
> The Doctor wrote:
>
> > Question 1 in css how d oyou tell the table
> > to have a visible border?
>
> UNIV : HTML 4.01 Strict, CSS 1.
> Reference : http://www.w3.org/TR/CSS1/#border
> CSS : table {border: 1px solid black}
> Example : http://web-consultants.org/sites/tests/table-borders/
>
> 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/
>
__
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 nav menu on Mac Safari and Mac Firefox

[Dave Chiu]

looks to be a difference in how the font renders on the Mac, the text is
rendering wider and there isn't enough room for that last item.

several ways to fix this, two which I'll mention here each introduce their
own issues that you'll have to update:

one would be to change the LI from float: left to display: inline-block and
give the UL the properties white-space: nowrap and overflow: hidden. the
side effect will be that each LI will suddenly have space in between them,
so you'll have to remove whitespace in between the LI tags,  or
atleast HTML Comment them out (and maintain your code's human readibility)
.

another would be to adjust the amount of padding for each LI, there is no
issue when the LI has a padding-left of 10px. the side effect is that
you'll have a gap on the right, so you'll then have to add a DIV with the
attribute clear:both and give the containing UL the purple background.

also, if you give the UL padding: 0 you wouldn't need a margin-left of
-40px.

On Mon, Jul 9, 2012 at 6:01 PM, Spencer, Laura Langa wrote:

> URL: http://www.bcbsm.com/foundation
>
> Problem: In Mac Safari and Mac Firefox, the final navigation option,
> "RESOURCES" bumps down to a second line and it should be all on one line.
> In all PC browsers (IE, Firefox, Chrome) it renders fine.
>
> Question: Can anyone help explain why this is happening or what I can try
> to fix it?
>
> What I've done: I did W3C HTML validation and that's ok. I do get some
> errors on W3C CSS validation and a lot of trial and error to fix, but no
> such luck yet.
>
> I'm really flummoxed by this problem, and would appreciate any help.
>
> Thanks,
> Laura Langa-Spencer
> (It's my first time posting to the list, so please excuse if I've done
> anything improperly, and please let me know if  I need to do anything
> differently.)
>
>
>
> The information contained in this communication is highly confidential and
> is intended solely for the use of the individual(s) to whom this
> communication is directed. If you are not the intended recipient, you are
> hereby notified that any viewing, copying, disclosure or distribution of
> this information is prohibited. Please notify the sender, by electronic
> mail or telephone, of any unintended receipt and delete the original
> message without making any copies.
>
>  Blue Cross Blue Shield of Michigan and Blue Care Network of Michigan are
> nonprofit corporations and independent licensees of the Blue Cross and Blue
> Shield Association.
> __
> 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/