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:[email protected]]
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 <[email protected]> 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:
> <td>
> <span>
> <a title="Back to Previous View" href="javascript:controller.navigateBack();">
> <img width="11" height="13" alt="Back to Previous View" title="Back to
> Previous View"
> src="http://www.trumba.com/i/DgC4zgBAwusa93o2xKoNIHtu.gif?color=%2308799f";></a></span></td>
>
> 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 <td> 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 [[email protected]]
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/
![http://www.trumba.com/i/DgC4zgBAwusa93o2xKoNIHtu.gif?color=%2308799f"](http://www.trumba.com/i/DgC4zgBAwusa93o2xKoNIHtu.gif?color=%2308799f"){kind=link}