Re: [css-d] syntax: attribute selector on linked image
The below fixed both "back to..." buttons when I set it.
I was using Safari. Did not test other browsers at this time though.
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
On Mar 28, 2016, at 2:01 PM, Karl DeSaulniers wrote:
> .twEDFooter td a { }
>
> add
>
> display: inline-block;
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
> On Mar 28, 2016, at 11:15 AM, Angela French wrote:
>
>> http://www.dev.sbctc.edu/calendar.aspx. Click on any link under the Event
>> column to display the event details. It is here that you will see a "BACK TO
>> PREVIOUS VIEW" link directly underneath the month navigation bar. This is
>> the item I am trying to put space above and below to make it stand out a
>> little more.
>>
>> Angela French
>>
>> -Original Message-
>> From: css-d-boun...@lists.css-discuss.org
>> [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Karl DeSaulniers
>> Sent: Friday, March 25, 2016 6:30 PM
>> To: CSS-D
>> Subject: 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=%2308
>>>> 799f">
>>>>
>>>> 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]
>>>
Re: [css-d] syntax: attribute selector on linked image
Yup, that whole top section is in an iframe. Adding space around the upper
most "back to previous" link (in Chrome dev tools), pushes the bottom of
that content out of view within it's container.
On Mon, Mar 28, 2016 at 3:30 PM, Chris Rockwell
wrote:
> As Tom said, it's definitely possible. However, I don't see any of your
> CSS being overridden by the twEDFooter css. I would expect to see it in
> Dev Tools - I do see an iFrame though: http://imgur.com/j4SA3u9
>
> On Mon, Mar 28, 2016 at 12:23 PM Angela French wrote:
>
> > It is not in an iframe. I'm wondering if the css coming from Trumba
> > (their JS code is embedded into my page) comes later in the page
> lifecycle
> > and is thus overwriting mine. Is this possible?
> >
> > Angela French
> >
> >
> > -Original Message-
> > From: css-d-boun...@lists.css-discuss.org [mailto:
> > css-d-boun...@lists.css-discuss.org] On Behalf Of Chris Rockwell
> > Sent: Friday, March 25, 2016 7:29 PM
> > To: Karl DeSaulniers; CSS-D
> > Subject: 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.
> > &
Re: [css-d] syntax: attribute selector on linked image
As Tom said, it's definitely possible. However, I don't see any of your
CSS being overridden by the twEDFooter css. I would expect to see it in
Dev Tools - I do see an iFrame though: http://imgur.com/j4SA3u9
On Mon, Mar 28, 2016 at 12:23 PM Angela French wrote:
> It is not in an iframe. I'm wondering if the css coming from Trumba
> (their JS code is embedded into my page) comes later in the page lifecycle
> and is thus overwriting mine. Is this possible?
>
> Angela French
>
>
> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:
> css-d-boun...@lists.css-discuss.org] On Behalf Of Chris Rockwell
> Sent: Friday, March 25, 2016 7:29 PM
> To: Karl DeSaulniers; CSS-D
> Subject: 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/
> > >
> > >
> > >
> > >
> > >
> > > __
Re: [css-d] syntax: attribute selector on linked image
.twEDFooter td a { }
add
display: inline-block;
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
On Mar 28, 2016, at 11:15 AM, Angela French wrote:
> http://www.dev.sbctc.edu/calendar.aspx. Click on any link under the Event
> column to display the event details. It is here that you will see a "BACK TO
> PREVIOUS VIEW" link directly underneath the month navigation bar. This is
> the item I am trying to put space above and below to make it stand out a
> little more.
>
> Angela French
>
> -Original Message-
> From: css-d-boun...@lists.css-discuss.org
> [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Karl DeSaulniers
> Sent: Friday, March 25, 2016 6:30 PM
> To: CSS-D
> Subject: 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=%2308
>>> 799f">
>>>
>>> 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/
Re: [css-d] syntax: attribute selector on linked image
It is. I have this come up with Wordpress and WP plugins.
On Monday, March 28, 2016, Angela French wrote:
> It is not in an iframe. I'm wondering if the css coming from Trumba
> (their JS code is embedded into my page) comes later in the page lifecycle
> and is thus overwriting mine. Is this possible?
>
> Angela French
>
>
> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:
> css-d-boun...@lists.css-discuss.org ] On Behalf Of Chris
> Rockwell
> Sent: Friday, March 25, 2016 7:29 PM
> To: Karl DeSaulniers; CSS-D
> Subject: 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-
Re: [css-d] syntax: attribute selector on linked image
It is not in an iframe. I'm wondering if the css coming from Trumba (their JS
code is embedded into my page) comes later in the page lifecycle and is thus
overwriting mine. Is this possible?
Angela French
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Chris Rockwell
Sent: Friday, March 25, 2016 7:29 PM
To: Karl DeSaulniers; CSS-D
Subject: 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/
__
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
http://www.dev.sbctc.edu/calendar.aspx. Click on any link under the Event
column to display the event details. It is here that you will see a "BACK TO
PREVIOUS VIEW" link directly underneath the month navigation bar. This is the
item I am trying to put space above and below to make it stand out a little
more.
Angela French
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Karl DeSaulniers
Sent: Friday, March 25, 2016 6:30 PM
To: CSS-D
Subject: 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=%2308
>> 799f">
>>
>> 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/
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/
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
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
> 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
Try...
a[title^="Back to"] {
display:inline-block;
margin-top:20px;
background-color:pink; /*test*/
}
I switched it to a[title^="Back to"] so you could use it on a Back to Home or a
Back to anything basically.
Probably would be better to set an id or class and check that though.
HTH,
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
On Mar 24, 2016, at 11:56 AM, Angela French wrote:
> Hello,
> 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? 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{
>/*display:block;*/
>padding-top:200px; /* big for test */
>background-color:pink; /*test*/
> }
>
> and this (removed img):
>
> td < a[title="Back to Previous View"] {
>/*display:block;*/
>padding-top:200px; /* big for test */
>background-color:pink; /*test*/
> }
>
>
>
> Thank you for any advice.
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu
> www.sbctc.edu
Re: [css-d] syntax: attribute selector on linked image
On Thu, Mar 24, 2016 at 12:56 PM, Angela French wrote:
> Hello,
> 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*/
> }
>
You most likely won't see a bg color BEHIND an image. The syntax looks
right to me. Try adding a border or outline for testing. Try padding
instead of margin.
>
> Unfortunately, I'm seeing no effect. Is my syntax incorrect, or am I
> trying to do something that is not possible? 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{
> /*display:block;*/
> padding-top:200px; /* big for test */
> background-color:pink; /*test*/
> }
>
>
I've never seen '<' used before. I don't think that's a thing. You can't
select elements back UP in the DOM tree, unfortunately.
Good reference:
https://css-tricks.com/attribute-selectors/
HTH
--
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/
[css-d] syntax: attribute selector on linked image
Hello,
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:
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? 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{
/*display:block;*/
padding-top:200px; /* big for test */
background-color:pink; /*test*/
}
and this (removed img):
td < a[title="Back to Previous View"] {
/*display:block;*/
padding-top:200px; /* big for test */
background-color:pink; /*test*/
}
Thank you for any advice.
Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
www.sbctc.edu
