Re: [css-d] syntax: attribute selector on linked image

[Angela French]

 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 <afre...@sbctc.edu> 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 [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/