.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 <[email protected]> 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: [email protected]
> [mailto:[email protected]] 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 <[email protected]> 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:[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=%2308
>>> 799f"></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/
> ______________________________________________________________________
> 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/
______________________________________________________________________
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/
