Re: html/css question

Subject: Re: html/css question
From: Tony Chung <tonyc -at- tonychung -dot- ca>
To: "McLauchlan, Kevin" <Kevin -dot- McLauchlan -at- safenet-inc -dot- com>
Date: Mon, 3 Sep 2012 12:26:15 -0700

There might be some other code that overrides the style declarations.

Would you mind sharing a ful copy of the page in question? I'm curious
how the styles cascade to override the class settings.

-Tony



On 2012-09-03, at 12:20 PM, "McLauchlan, Kevin"
<Kevin -dot- McLauchlan -at- safenet-inc -dot- com> wrote:

> Tried that after receiving your post. No change. Even though the syntax looks more sensible now.
> The working browsers still work, and the non-working ones still don't. So the real gap is somewhere else.
>
> Did I improperly nest <a href=..... and some browsers are picky about it?
>
>> On Mon, Sep 3, 2012 at 11:06 AM, Jan Cohen <najnehoc -at- yahoo -dot- com> wrote:
>> Kevin,
>
>> onclick should work in all browsers and should be coded like so:
>
>> onclick="doSomething()"
>> Try changing your code to match and see if it fixes your problem (lose the colon and add the quotes).
>
>> Jan C.
>
>
>> -----Original Message-----
>> From: Tony Chung [mailto:tonyc -at- tonychung -dot- ca]
>> Sent: September-03-12 12:40 PM
>> To: McLauchlan, Kevin
>> Cc: techwr-l -at- lists -dot- techwr-l -dot- com
>> Subject: Re: html/css question
>>
>> Kevin,
>>
>> How is this supposed to make the links stand out? Onclick only acts
>> when the link is clicked. Jan is right also that onclick is an
>> attribute where you set the value with ="functionName()" and not
>> :=functionName() -- the := syntax is in VB/VBA
>>
>> My instinct tells me to set a CSS block that codes all links of a
>> "specialClass" to look different.
>>
>> <style type="text/css">
>> a.specialClass { border: 1px blue solid; padding: 2px; }
>> </style>
>> Then add the class attribute to your links like this:
>>
>> <a class="specialClass"
>> href="./001-011136-003_myproduct_5-2_webhelp_rev-
>> a/startpage.htm"
>> target="_blank">My Product 5.2.x Help </a>
>>
>> It might also help to set a colour change when the mouse hovers. Add
>> this to the style block after the first declaration:
>>
>> a.specialClass:hover { background-color: blue; }
>>
>> (Note, because the border and padding are already set in the overall
>> link, border and padding will be applied here as well.)
>>
>> You can also add a special handler for when the link is clicked:
>>
>> a.specialClass:active { border: 1px red solid; background-color: red; }
>>
>> Hope this helps.
>>
>> -Tony
>>
>>
>>
>> On 2012-09-03, at 7:50 AM, "McLauchlan, Kevin"
>> <Kevin -dot- McLauchlan -at- safenet-inc -dot- com> wrote:
>>
>>> Wiser, and more HTML/CSS-proficient brains than mine are asked:
>>>
>>> Can you tell me please why this specific code works in some
>> browsers
>>> and not in others? And what, if anything, to do about it?
>>>
>>> The task:
>>> An intro page contained links to several things, including the main
>>> product documentation, the release notes, some white papers, etc.
>>> It was pointed out that all the links were similar-looking, and the
>>> most important one - the main docs - should stand out.
>>>
>>> The approach:
>>> So, in the <head> of my START_HERE.html page, I added this:
>>>
>>> <script>
>>> function displayResult()
>>> {
>>> document.getElementById("p1").style.textDecoration="underline
>> overline";
>>> }
>>> </script>
>>>
>>>
>>> Then, down where the link text is, I surrounded the href like this:
>>>
>>>
>>> <button type="button" onclick=:displayResult()><a href="./001-
>> 011136-003_myproduct_5-2_webhelp_rev-a/startpage.htm"
>> target="_blank">My Product 5.2.x Help </a></button><br>
>>>
>>> Now, the appearance of the link is a nice, big, hard-to-miss button,
>> in all browsers.
>>> Unfortunately, it is a working link only in Chrome or Iron or Safari
>> browsers right now.
>>> It fails in IE9, Firefox, and Opera browsers... Click-click... nothing.
>>> Well, not totally nothing - it briefly inverts when clicked, but it
>> doesn't function as a link
>>>
>>> Did I steal some deprecated code? Or...
>>>
>>> Thanks,
>>>
>>> -kevin
>>>
>>> PS: It doesn't need to be a button. Anything non-garish, to make
>> the link text stand out a bit, would be fine.
>>>
>>>
>>>
>>>
>>> The information contained in this electronic mail transmission
>>> may be privileged and confidential, and therefore, protected
>>> from disclosure. If you have received this communication in
>>> error, please notify us immediately by replying to this
>>> message and deleting it from your computer without copying
>>> or disclosing it.
>>>
>>>
>>>
>>>
>> ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>> ^^^^
>>> Create and publish documentation through multiple channels with
>> Doc-To-Help. Choose your authoring formats and get any output you
>> may need.
>>>
>>> Try Doc-To-Help, now with MS SharePoint integration, free for 30-
>> days.
>>>
>>> http://bit.ly/doc-to-help
>>>
>>>
>> ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>> ^^^^
>>>
>>> You are currently subscribed to TECHWR-L as tonyc -at- tonychung -dot- ca -dot-
>>>
>>> To unsubscribe send a blank email to
>>> techwr-l-leave -at- lists -dot- techwr-l -dot- com
>>>
>>>
>>> Send administrative questions to admin -at- techwr-l -dot- com -dot- Visit
>>> http://www.techwhirl.com/email-discussion-groups/ for more
>> resources and info.
>>>
>>> Looking for articles on Technical Communications? Head over to our
>> online magazine at http://techwhirl.com
>>>
>>> Looking for the archived Techwr-l email discussions? Search our
>> public email archives @ http://techwr-l.com/archives
> The information contained in this electronic mail transmission
> may be privileged and confidential, and therefore, protected
> from disclosure. If you have received this communication in
> error, please notify us immediately by replying to this
> message and deleting it from your computer without copying
> or disclosing it.
>
>

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Create and publish documentation through multiple channels with Doc-To-Help. Choose your authoring formats and get any output you may need.

Try Doc-To-Help, now with MS SharePoint integration, free for 30-days.

http://bit.ly/doc-to-help

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

You are currently subscribed to TECHWR-L as archive -at- web -dot- techwr-l -dot- com -dot-

To unsubscribe send a blank email to
techwr-l-leave -at- lists -dot- techwr-l -dot- com


Send administrative questions to admin -at- techwr-l -dot- com -dot- Visit
http://www.techwhirl.com/email-discussion-groups/ for more resources and info.

Looking for articles on Technical Communications? Head over to our online magazine at http://techwhirl.com

Looking for the archived Techwr-l email discussions? Search our public email archives @ http://techwr-l.com/archives


Follow-Ups:

References:
html/css question: From: McLauchlan, Kevin
Re: html/css question: From: Tony Chung
RE: html/css question: From: McLauchlan, Kevin

Previous by Author: Re: html/css question
Next by Author: Re: OT: Having fun with your resume - good idea/bad idea
Previous by Thread: RE: html/css question
Next by Thread: Re: html/css question


What this post helpful? Share it with friends and colleagues:

Sponsored Ads


Sponsored Ads