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