[css-d] Vertical align nav button text
Hello again all! If you go to http://www.xifin.com/solutions When you reduce the viewport you will see the blue button menu that replace the icon menu, but the text on the one-row buttons does not vertical align. I think vertical-align has to be on inline elements right? Any way to fix this and not break anything else? -- 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] Vertical align nav button text
Don't see what your talking about on Safari 6.2.8 What browser are you viewing with? Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Mar 25, 2016, at 12:39 PM, "J.C. Berry" wrote: > Hello again all! > > If you go to http://www.xifin.com/solutions > > When you reduce the viewport you will see the blue button menu that replace > the icon menu, but the text on the one-row buttons does not vertical align. > I think vertical-align has to be on inline elements right? Any way to fix > this and not break anything else? > > -- > 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] Vertical align nav button text
Maybe use flexbox, and use the current styles as fallback? On Fri, Mar 25, 2016 at 1:39 PM, J.C. Berry wrote: > Hello again all! > > If you go to http://www.xifin.com/solutions > > When you reduce the viewport you will see the blue button menu that replace > the icon menu, but the text on the one-row buttons does not vertical align. > I think vertical-align has to be on inline elements right? Any way to fix > this and not break anything else? > > -- > 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/ > -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ 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] syntax: attribute selector on linked image
Have tried all 3 suggestions (plus a few of my own) and none work. There must
be some other factor at play here. I think I will talk to support at Trumba.
/* Classes to override styles in Trumba calendar */
a[title="Back to Previous View"] img{
display:block;
margin-top:20px;
outline: 3px solid red;
}
span.ImageLink a{
border:3px solid black;
margin-left:50px!important;
}
.twEDFooter {
margin-bottom:20px;
}
-Original Message-
From: Philippe Wittenbergh [mailto:e...@l-c-n.com]
Sent: Thursday, March 24, 2016 5:48 PM
To: CSS-D
Cc: Angela French
Subject: Re: [css-d] syntax: attribute selector on linked image
> On Mar 25, 2016, at 01:56, Angela French wrote:
>
> I am trying to write CSS that will apply top margin on an image that is used
> as a back arrow button. The generated html is as follows:
>
>
>
> src="http://www.trumba.com/i/DgC4zgBAwusa93o2xKoNIHtu.gif?color=%2308799f";>
>
> I tried writing the CSS as:
>
> a[title="Back to Previous View"] img{
> display:block;
> margin-top:20px;
> background-color:pink; /*test*/
> }
>
> Unfortunately, I'm seeing no effect. Is my syntax incorrect, or am I trying
> to do something that is not possible?
Your syntax is correct (given the HTML markup you quoted). If you see no
effect:
1/ is your image transparent? otherwise you won’t see the background-color.The
`outline` property is your friend for debugging purposes.
img { outline: 3px solid red; } /* or lime or cyan or fuchsia - any of those
highly visible colours are very useful */
2/ your image, although set to `display:block`, is nested inside inline
elements, inside a `td`. The margin may have no visible effect due to that –
depending on how the other elements are styled.
3/ anything in the stylesheet that could possibly override your styling? check
with the developer tools in your browser what styling is actually applied.
> I also tried targeting the the image is in and applying padding to the
> cell like this:
>
> td < a[title="Back to Previous View"] img{
there is no such thing a '<' selector.
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] syntax: attribute selector on linked image
Link?
Best,
Karl
Sent from losPhone
> On Mar 25, 2016, at 5:52 PM, Angela French wrote:
>
> Have tried all 3 suggestions (plus a few of my own) and none work. There
> must be some other factor at play here. I think I will talk to support at
> Trumba.
> /* Classes to override styles in Trumba calendar */
> a[title="Back to Previous View"] img{
>display:block;
>margin-top:20px;
>outline: 3px solid red;
> }
>
> span.ImageLink a{
>border:3px solid black;
>margin-left:50px!important;
> }
>
> .twEDFooter {
>margin-bottom:20px;
> }
>
> -Original Message-
> From: Philippe Wittenbergh [mailto:e...@l-c-n.com]
> Sent: Thursday, March 24, 2016 5:48 PM
> To: CSS-D
> Cc: Angela French
> Subject: Re: [css-d] syntax: attribute selector on linked image
>
>
>> On Mar 25, 2016, at 01:56, Angela French wrote:
>>
>> I am trying to write CSS that will apply top margin on an image that is used
>> as a back arrow button. The generated html is as follows:
>>
>>
>> > href="javascript:controller.navigateBack();">
>> > src="http://www.trumba.com/i/DgC4zgBAwusa93o2xKoNIHtu.gif?color=%2308799f";>
>>
>> I tried writing the CSS as:
>>
>> a[title="Back to Previous View"] img{
>> display:block;
>> margin-top:20px;
>> background-color:pink; /*test*/
>> }
>>
>> Unfortunately, I'm seeing no effect. Is my syntax incorrect, or am I trying
>> to do something that is not possible?
>
> Your syntax is correct (given the HTML markup you quoted). If you see no
> effect:
>
> 1/ is your image transparent? otherwise you won’t see the
> background-color.The `outline` property is your friend for debugging
> purposes.
>
> img { outline: 3px solid red; } /* or lime or cyan or fuchsia - any of those
> highly visible colours are very useful */
>
> 2/ your image, although set to `display:block`, is nested inside inline
> elements, inside a `td`. The margin may have no visible effect due to that –
> depending on how the other elements are styled.
>
> 3/ anything in the stylesheet that could possibly override your styling?
> check with the developer tools in your browser what styling is actually
> applied.
>
>
>> I also tried targeting the the image is in and applying padding to the
>> cell like this:
>>
>> td < a[title="Back to Previous View"] img{
>
> there is no such thing a '<' selector.
>
> 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/
__
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] syntax: attribute selector on linked image
Is this in an iFrame? Have you inspected the element with developer tools
to see what styles are being applied to it? Maybe yours are simply not
specific enough.
Here is an example using your original that shows the margin works just
fine: https://jsfiddle.net/wnzfh6c4/
On Fri, Mar 25, 2016 at 9:29 PM Karl DeSaulniers
wrote:
> Link?
>
> Best,
> Karl
>
> Sent from losPhone
>
> > On Mar 25, 2016, at 5:52 PM, Angela French wrote:
> >
> > Have tried all 3 suggestions (plus a few of my own) and none work.
> There must be some other factor at play here. I think I will talk to
> support at Trumba.
> > /* Classes to override styles in Trumba calendar */
> > a[title="Back to Previous View"] img{
> >display:block;
> >margin-top:20px;
> >outline: 3px solid red;
> > }
> >
> > span.ImageLink a{
> >border:3px solid black;
> >margin-left:50px!important;
> > }
> >
> > .twEDFooter {
> >margin-bottom:20px;
> > }
> >
> > -Original Message-
> > From: Philippe Wittenbergh [mailto:e...@l-c-n.com]
> > Sent: Thursday, March 24, 2016 5:48 PM
> > To: CSS-D
> > Cc: Angela French
> > Subject: Re: [css-d] syntax: attribute selector on linked image
> >
> >
> >> On Mar 25, 2016, at 01:56, Angela French wrote:
> >>
> >> I am trying to write CSS that will apply top margin on an image that is
> used as a back arrow button. The generated html is as follows:
> >>
> >>
> >> href="javascript:controller.navigateBack();">
> >> http://www.trumba.com/i/DgC4zgBAwusa93o2xKoNIHtu.gif?color=%2308799f
> ">
> >>
> >> I tried writing the CSS as:
> >>
> >> a[title="Back to Previous View"] img{
> >> display:block;
> >> margin-top:20px;
> >> background-color:pink; /*test*/
> >> }
> >>
> >> Unfortunately, I'm seeing no effect. Is my syntax incorrect, or am I
> trying to do something that is not possible?
> >
> > Your syntax is correct (given the HTML markup you quoted). If you see no
> effect:
> >
> > 1/ is your image transparent? otherwise you won’t see the
> background-color.The `outline` property is your friend for debugging
> purposes.
> >
> > img { outline: 3px solid red; } /* or lime or cyan or fuchsia - any of
> those highly visible colours are very useful */
> >
> > 2/ your image, although set to `display:block`, is nested inside inline
> elements, inside a `td`. The margin may have no visible effect due to that
> – depending on how the other elements are styled.
> >
> > 3/ anything in the stylesheet that could possibly override your styling?
> check with the developer tools in your browser what styling is actually
> applied.
> >
> >
> >> I also tried targeting the the image is in and applying padding to
> the cell like this:
> >>
> >> td < a[title="Back to Previous View"] img{
> >
> > there is no such thing a '<' selector.
> >
> > 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/
> __
> 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/
