Loading ...
Sorry, an error occurred while loading the content.

Colors of link, vlink & alink when using a photo background.

Expand Messages
  • woodysnomad
    I am working on a website showing how I am building a cedar strip canoe and I found a photo of a pine board that I am using for a background. It looks great
    Message 1 of 14 , May 4, 2008
    View Source
    • 0 Attachment
      I am working on a website showing how I am building a cedar strip
      canoe and I found a photo of a pine board that I am using for a
      background. It looks great with dark brown letters but the colors of
      the links change as soon as I use the photo. If I remove the photo
      and used a background color, they work, OK... Any ideas what is
      happening???
      Thanks in advance, Joe
    • Cary Driscoll
      My guess is it s an optical illusion, but can t be sure without seeing all the html and css for the page.
      Message 2 of 14 , May 4, 2008
      View Source
      • 0 Attachment
        My guess is it's an optical illusion, but can't be
        sure without seeing all the html and css for the page.


        --- woodysnomad wrote:

        > I am working on a website showing how I am building
        > a cedar strip
        > canoe and I found a photo of a pine board that I am
        > using for a
        > background. It looks great with dark brown letters
        > but the colors of
        > the links change as soon as I use the photo. If I
        > remove the photo
        > and used a background color, they work, OK... Any
        > ideas what is
        > happening???
        > Thanks in advance, Joe
      • Dave
        Hi Are the links active ,change color when you land on them ,you may have to change the color to match your background ,have you checked the colors ? THANKYOU
        Message 3 of 14 , May 5, 2008
        View Source
        • 0 Attachment
          Hi
          Are the links active ,change color when you land on them ,you may have to
          change the color to match your background ,have you checked the colors ?
          THANKYOU DAVE M

          ----- Original Message -----
          From: "woodysnomad" <jmgledhill@...>
          To: <ntb-html@yahoogroups.com>
          Sent: Monday, May 05, 2008 11:28 AM
          Subject: [NH] Colors of link, vlink & alink when using a photo background.


          >I am working on a website showing how I am building a cedar strip
          > canoe and I found a photo of a pine board that I am using for a
          > background. It looks great with dark brown letters but the colors of
          > the links change as soon as I use the photo. If I remove the photo
          > and used a background color, they work, OK... Any ideas what is
          > happening???
          > Thanks in advance, Joe
          >
          >
          > ------------------------------------
          >
          > Fookes Software: http://www.fookes.com/
          > NoteTab website: http://www.notetab.com/
          > NoteTab Discussion Lists: http://www.notetab.com/groups.php
          >
          > ***
          > Yahoo! Groups Links
          >
          >
          >
        • Chris Dart
          Are perhaps the link colour values different in different tags? Such as - is the background in a container tag together with the links? Regards Chris Dart
          Message 4 of 14 , May 5, 2008
          View Source
          • 0 Attachment
            Are perhaps the link colour values different in different tags? Such as
            - is the background in a container tag together with the links?


            Regards

            Chris Dart




            ________________________________

            From: ntb-html@yahoogroups.com [mailto:ntb-html@yahoogroups.com] On
            Behalf Of Dave
            Sent: 05 May 2008 15:25
            To: ntb-html@yahoogroups.com
            Subject: Re: [NH] Colors of link, vlink & alink when using a photo
            background.



            Hi
            Are the links active ,change color when you land on them ,you may have
            to
            change the color to match your background ,have you checked the colors ?
            THANKYOU DAVE M

            ----- Original Message -----
            From: "woodysnomad" <jmgledhill@...
            <mailto:jmgledhill%40comcast.net> >
            To: <ntb-html@yahoogroups.com <mailto:ntb-html%40yahoogroups.com> >
            Sent: Monday, May 05, 2008 11:28 AM
            Subject: [NH] Colors of link, vlink & alink when using a photo
            background.

            >I am working on a website showing how I am building a cedar strip
            > canoe and I found a photo of a pine board that I am using for a
            > background. It looks great with dark brown letters but the colors of
            > the links change as soon as I use the photo. If I remove the photo
            > and used a background color, they work, OK... Any ideas what is
            > happening???
            > Thanks in advance, Joe
            >
            >
            > ------------------------------------
            >
            > Fookes Software: http://www.fookes.com/ <http://www.fookes.com/>
            > NoteTab website: http://www.notetab.com/ <http://www.notetab.com/>
            > NoteTab Discussion Lists: http://www.notetab.com/groups.php
            <http://www.notetab.com/groups.php>
            >
            > ***
            > Yahoo! Groups Links
            >
            >
            >






            [Non-text portions of this message have been removed]
          • sisterscape
            Here are some more thoughts . . . Sometime colors will look different on different backgrounds. It s kind of an optical illusion - I often have to readjust a
            Message 5 of 14 , May 5, 2008
            View Source
            • 0 Attachment
              Here are some more thoughts . . .

              Sometime colors will look different on different backgrounds. It's
              kind of an optical illusion - I often have to readjust a color to
              account for it. If the colors are just a little off, this might be the
              problem. If they are totally different, the problem lies elsewhere.
              Could you post some code?

              An even better way to go would be to put the links in CSS rather than
              the markup. You could even define different classes of links for
              different parts of your page:

              a:link

              a:visited

              a:active

              a:hover


              a.other:link

              a.other:visited

              a.other:active

              a.other:hover

              >
              > ----- Original Message -----
              > From: "woodysnomad" <jmgledhill@...
              > <mailto:jmgledhill%40comcast.net> >
              > To: <ntb-html@yahoogroups.com <mailto:ntb-html%40yahoogroups.com> >
              > Sent: Monday, May 05, 2008 11:28 AM
              > Subject: [NH] Colors of link, vlink & alink when using a photo
              > background.
              >
              > >I am working on a website showing how I am building a cedar strip
              > > canoe and I found a photo of a pine board that I am using for a
              > > background. It looks great with dark brown letters but the colors
              > of
              > > the links change as soon as I use the photo. If I remove the photo
              > > and used a background color, they work, OK... Any ideas what is
              > > happening???
              > > Thanks in advance, Joe
              > >



              ____________________________________________________________________________________
              Be a better friend, newshound, and
              know-it-all with Yahoo! Mobile. Try it now. http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ
            • Axel Berger
              ... Agreed. What you could do is make a screenshot and feed it to some graphics program. Many have a tool to pick the colour from one precise point and show
              Message 6 of 14 , May 5, 2008
              View Source
              • 0 Attachment
                sisterscape wrote:
                > If the colors are just a little off, this might be the problem.

                Agreed. What you could do is make a screenshot and feed it to some
                graphics program. Many have a tool to pick the colour from one
                precise point and show you exactly what it is or supposed to be.
                Apart from your eyes it might also be the monitor that reacts a bit
                to the surroundings (although if present at all that effect will be
                small).

                Axel
              • Greg Chapman
                ... And in the case of a menu I d only use: a.menu and normally: a.menu:hover as one rarely wants menu links to change colour in the way that one does with
                Message 7 of 14 , May 5, 2008
                View Source
                • 0 Attachment
                  On 05 May 08 16:46 sisterscape <sisterscape@...> said:
                  > An even better way to go would be to put the links in CSS rather
                  > than the markup. You could even define different classes of links
                  > for different parts of your page:
                  >
                  ......>
                  > a.other:link
                  >
                  > a.other:visited
                  >
                  > a.other:active
                  >
                  > a.other:hover

                  And in the case of a menu I'd only use:

                  a.menu

                  and normally:

                  a.menu:hover

                  as one rarely wants menu links to change colour in the way that one
                  does with links in he main body of the page.

                  Greg
                • Axel Berger
                  ... Don t just use hover, always use focus,hover,active in that order. While a mouse user has the pointer to show him where he is, a keyboard user tabbing
                  Message 8 of 14 , May 5, 2008
                  View Source
                  • 0 Attachment
                    Greg Chapman wrote:
                    > a.menu
                    > a.menu:hover

                    Don't just use hover, always use focus,hover,active in that order.
                    While a mouse user has the pointer to show him where he is, a
                    keyboard user tabbing through a page needs more feedback and often
                    gets less. Iirc the active is needed for IE, which does not
                    recognize focus.

                    Axel
                  • loro
                    ... I also think it s a matter of perception. That or you accidently changed more than you think you did when you added the background image. But to
                    Message 9 of 14 , May 6, 2008
                    View Source
                    • 0 Attachment
                      Joe wrote:
                      >It looks great with dark brown letters but the colors of
                      >the links change as soon as I use the photo. If I remove the photo
                      >and used a background color, they work, OK... Any ideas what is
                      >happening???

                      I also think it's a matter of perception. That or you accidently
                      changed more than you think you did when you added the background
                      image. But to definitely solve the problem I think you have to show
                      us a sample page with the background and the link color you talk about.

                      While CSS is neat and all, a color is a color and I don't see how
                      defining the color in CSS instead of in HTML will solve this problem.

                      Lotta
                    • woodysnomad
                      Thanks for all your replies... Here is what I have done: This is the code in my index.htm file seting up the CSS
                      Message 10 of 14 , May 6, 2008
                      View Source
                      • 0 Attachment
                        Thanks for all your replies... Here is what I have done:

                        This is the code in my index.htm file seting up the CSS
                        <link rel="stylesheet" type="text/css" ref="Style3.css">

                        This is the code I used to get a lite brownish background with dark
                        brown letters with links. At one time they worked???
                        <!--
                        body { background-color: #FFCC99; color: #660000;
                        font-family: tahoma; font = bold; size = -1 }
                        a:link {color = "#660000" ; font = "bold" }
                        a:visited {color = "#000000" ; font = "bold" }
                        a:active {color = "#663333" ; font = "bold" }
                        -->

                        This is the code I used to get the photo background which looks like
                        a pine board with dark brown letters. It also worked???
                        <style>
                        <!--
                        body { background-image: url(woodh1.jpg);
                        color: #660000;
                        font-family: tahoma;
                        font-weight: bold;
                        font-size: -1 }
                        -->
                        </style>

                        I have seen several ways to write the code and I just don't know what
                        is the right way anymore. I am back to ground zero. When I used the
                        brown background, the links all worked with black and a lighter brown
                        letters and when I put the same code in with the photo, I would get
                        blue and other wierd colors. Need lots of help...
                        Thanks, Joe
                      • Marcelo de Castro Bastos
                        ... OK, in the first example your CSS syntax is just wrong. You are using HTML syntax in CSS, which won t work, unless the browser is more forgiving than it
                        Message 11 of 14 , May 6, 2008
                        View Source
                        • 0 Attachment
                          Interviewed by CNN on 6/5/2008 13:38, woodysnomad told the world:
                          > Thanks for all your replies... Here is what I have done:
                          >
                          > This is the code in my index.htm file seting up the CSS
                          > <link rel="stylesheet" type="text/css" ref="Style3.css">
                          >
                          > This is the code I used to get a lite brownish background with dark
                          > brown letters with links. At one time they worked???
                          > <!--
                          > body { background-color: #FFCC99; color: #660000;
                          > font-family: tahoma; font = bold; size = -1 }
                          > a:link {color = "#660000" ; font = "bold" }
                          > a:visited {color = "#000000" ; font = "bold" }
                          > a:active {color = "#663333" ; font = "bold" }
                          > -->
                          >
                          > This is the code I used to get the photo background which looks like
                          > a pine board with dark brown letters. It also worked???
                          > <style>
                          > <!--
                          > body { background-image: url(woodh1.jpg);
                          > color: #660000;
                          > font-family: tahoma;
                          > font-weight: bold;
                          > font-size: -1 }
                          > -->
                          > </style>
                          >
                          > I have seen several ways to write the code and I just don't know what
                          > is the right way anymore. I am back to ground zero. When I used the
                          > brown background, the links all worked with black and a lighter brown
                          > letters and when I put the same code in with the photo, I would get
                          > blue and other wierd colors. Need lots of help...
                          > Thanks, Joe
                          >
                          >
                          >
                          OK, in the first example your CSS syntax is just wrong. You are using
                          HTML syntax in CSS, which won't work, unless the browser is more
                          forgiving than it should be. Your second example is MOSTLY right, though.

                          Let's see point by point:
                          - Don't use the equal sign to assign property values in CSS; use a colon.
                          - Also, don't use quotes in the property values.
                          - "-1" is NOT an acceptable value for the "font-size" property.
                          Acceptable values are:
                          * Absolute-size keywords [ xx-small | x-small | small | medium |
                          large | x-large | xx-large ]
                          * Relative size keywords [smaller | larger ]
                          * Size in valid CSS units (px, pt, em, %) -- usage of em or % is
                          suggested as px and pt can cause problems.
                          - It's good practice to assign MORE than one name in the "font-family"
                          property -- if the browser can't find the first font, it will try the
                          second, then the third and so on, until it finds one it can use. A good
                          idea is to use a generic font name as the last one. Generic font names
                          are 'serif', 'sans-serif', 'cursive', 'fantasy', and 'monospace'.
                          - Although {font:bold} is a valid syntax, you should be careful using
                          this: "font" by itself is a SHORTHAND syntax, supposed to set a number
                          of attributes in one line, and it might end up setting attributes you
                          didn't want to change. Try using separate properties to set each
                          attribute, like you did in your second example.



                          Marcelo
                          -=-=-
                          Look Ma, No Taglines!
                          * TagZilla 0.066 on Seamonkey 1.1.9
                        • Axel Berger
                          As to colour I stand by what several people wrote, it must be perception. As a case in point I have just adjusted the default colours in my browsers a little.
                          Message 12 of 14 , May 6, 2008
                          View Source
                          • 0 Attachment
                            As to colour I stand by what several people wrote, it must be
                            perception. As a case in point I have just adjusted the default colours
                            in my browsers a little. Text made of thin lines looks totally different
                            from the block of colour where I define it, it took many trial and error
                            steps to get it right. (My being colour deficient limits choices.)

                            But additionally we no longer use MGA or CGA, where a pixel is a pixel,
                            but proportional fonts where lines straddle pixel boundaries. The actual
                            pixel then becomes a mixture of foreground and background colour. You
                            can see that by taking a screen shot and zooming very far in with a tool
                            that does not smooth the enlargement but shows actual pixels as square
                            blocks (Irfanview when looking at a selection). There's not much you can
                            do but live with it and choose colours it does not become too bad with.

                            woodysnomad wrote:
                            > body { font = bold; size = -1 }

                            I've done that myself, as it seems to be the taste of the advertising
                            flacks and the masses have come to expect it, but it is wrong. You can
                            use big and small script where appropriate, but the main text, the bread
                            font, ought to be left well alone. The reader chooses how he likes it
                            best for optimal legibility and it is up to us to respect their choices.
                            In fact three out of four of my browsers are set to ignore all font
                            style, size, and colour directives that may be in the page and present
                            them exactly the way I find them most comfortable to read.
                            At least test your pages with raising and lowering font sizes in the
                            browser (<Ctrl><+> in Mozilla) and check they do not break. If they do,
                            redesign them.

                            And lastly you forgot the basic rule "if you change one colour, change
                            them all" If you set a background you must set a font colour and vice
                            versa. It may not be very probable, but it's entirely possible that
                            someone for whatever reason has set his default font colour to exactly
                            or very nearly your choice of background.

                            Axel
                          • sisterscape
                            In addition to what Marcelo listed (he beat me to it!). . . If you are using a linked style sheet you shouldn t include the . I also use around the
                            Message 13 of 14 , May 6, 2008
                            View Source
                            • 0 Attachment
                              In addition to what Marcelo listed (he beat me to it!). . .

                              If you are using a linked style sheet you shouldn't include the <!--
                              -->.

                              I also use " " around the image file name but can't remember why. Mac
                              compatability?

                              Added background: transparent ; to your links just to be safe a user
                              doesn't see something funny.

                              Try this:

                              body { background-image: url("woodh1.jpg");
                              color: #660000;
                              font-family: Tahoma, Sans-serif;
                              font-weight: bold;
                              font-size: 90% }

                              a:link {color: #660000 ; background: transparent ; font-weight: bold
                              ; font-family: Tahoma, Sans-serif;}
                              a:visited {color:#000000 ; background: transparent ; font-weight: bold
                              ; font-family: Tahoma, Sans-serif;}
                              a:active {color: #663333 ; background: transparent ; font-weight: bold
                              ; font-family: Tahoma, Sans-serif;}

                              Sister

                              --- Marcelo de Castro Bastos <mcblista@...> wrote:
                              >
                              > OK, in the first example your CSS syntax is just wrong. You are using
                              >
                              > HTML syntax in CSS, which won't work, unless the browser is more
                              > forgiving than it should be. Your second example is MOSTLY right,
                              > though.
                              >
                              > Let's see point by point:
                              > - Don't use the equal sign to assign property values in CSS; use a
                              > colon.
                              > - Also, don't use quotes in the property values.
                              > - "-1" is NOT an acceptable value for the "font-size" property.
                              > Acceptable values are:
                              > * Absolute-size keywords [ xx-small | x-small | small | medium |
                              > large | x-large | xx-large ]
                              > * Relative size keywords [smaller | larger ]
                              > * Size in valid CSS units (px, pt, em, %) -- usage of em or % is
                              > suggested as px and pt can cause problems.
                              > - It's good practice to assign MORE than one name in the
                              > "font-family"
                              > property -- if the browser can't find the first font, it will try the
                              >
                              > second, then the third and so on, until it finds one it can use. A
                              > good
                              > idea is to use a generic font name as the last one. Generic font
                              > names
                              > are 'serif', 'sans-serif', 'cursive', 'fantasy', and 'monospace'.
                              > - Although {font:bold} is a valid syntax, you should be careful using
                              >
                              > this: "font" by itself is a SHORTHAND syntax, supposed to set a
                              > number
                              > of attributes in one line, and it might end up setting attributes you
                              >
                              > didn't want to change. Try using separate properties to set each
                              > attribute, like you did in your second example.
                              >
                              >
                              >
                              > Marcelo



                              ____________________________________________________________________________________
                              Be a better friend, newshound, and
                              know-it-all with Yahoo! Mobile. Try it now. http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ
                            • Axel Berger
                              ... And I didn t even notice. Am I going balmy? That said, Joe, you really ought to validate your code and your stylesheets. If not for grossly wrong syntax
                              Message 14 of 14 , May 6, 2008
                              View Source
                              • 0 Attachment
                                sisterscape wrote:
                                > In addition to what Marcelo listed (he beat me to it!). . .

                                And I didn't even notice. Am I going balmy?
                                That said, Joe, you really ought to validate your code and your
                                stylesheets. If not for grossly wrong syntax then for all those
                                nasty typos and missing brackets that creep in.

                                In fact, if anything does not seem to work as expected, validation
                                should always be the first step. If the code is valid, you can look
                                for faulty logic, but if not, some tiny innocuous mistake might take
                                ages to find on your own.

                                Axel
                              Your message has been successfully submitted and would be delivered to recipients shortly.