5 Replies Latest reply on Aug 15, 2006 4:35 AM by Newsgroup_User

    Valid CSS?

    Level 7
      W3C automated CSS validator says this is okay:

      a.main:link, a.main:visited, a.main:active {
      color: #006699;
      text-decoration: underline;
      }
      a.main:hover {
      color: #006699;
      text-decoration: none;
      border-bottom: 1px dashed #006699;
      }

      I just need another check to make sure this is a legit grouping for link
      styles.

      Thanks,

      --
      Shane H
      shane@NOSPAMavenuedesigners.com
      http://www.avenuedesigners.com

      =============================================
      Proud GAWDS Member
      http://www.gawds.org/showmember.php?memberid=1495

      Delivering accessible websites to all ...
      =============================================



        • 1. Re: Valid CSS?
          Level 7
          Yes, but unnecessarily verbose - you don't need two identical color styles.
          And in fact, you can shorten it to this -

          a.main {
          color: #069;
          text-decoration: underline;
          }
          a.main:hover {
          text-decoration:none;
          border-bottom:1px dashed #069;
          }


          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.dreamweavermx-templates.com - Template Triage!
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
          ==================


          "Shane H" <shane@NOSPAMavenuedesigners.com> wrote in message
          news:ebq217$m2i$1@forums.macromedia.com...
          > W3C automated CSS validator says this is okay:
          >
          > a.main:link, a.main:visited, a.main:active {
          > color: #006699;
          > text-decoration: underline;
          > }
          > a.main:hover {
          > color: #006699;
          > text-decoration: none;
          > border-bottom: 1px dashed #006699;
          > }
          >
          > I just need another check to make sure this is a legit grouping for link
          > styles.
          >
          > Thanks,
          >
          > --
          > Shane H
          > shane@NOSPAMavenuedesigners.com
          > http://www.avenuedesigners.com
          >
          > =============================================
          > Proud GAWDS Member
          > http://www.gawds.org/showmember.php?memberid=1495
          >
          > Delivering accessible websites to all ...
          > =============================================
          >
          >
          >


          • 2. Re: Valid CSS?
            Level 7
            Neat, thanks Murray. Now another question, if you don't mind.

            Why in IE, the black links in my footer and the
            bold blue links in my breadcrumbs (above the information boxes on the
            right-hand side) - do not show their declared 1px dashed bottom border on
            "hover"?

            http://www.avenuedesigners.com/weblog_mess.php

            (this is just a test page)

            Thanks,

            --
            Shane H
            shane@NOSPAMavenuedesigners.com
            http://www.avenuedesigners.com

            =============================================
            Proud GAWDS Member
            http://www.gawds.org/showmember.php?memberid=1495

            Delivering accessible websites to all ...
            =============================================


            "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
            news:ebq2m8$mrd$1@forums.macromedia.com...
            > Yes, but unnecessarily verbose - you don't need two identical color
            > styles. And in fact, you can shorten it to this -
            >
            > a.main {
            > color: #069;
            > text-decoration: underline;
            > }
            > a.main:hover {
            > text-decoration:none;
            > border-bottom:1px dashed #069;
            > }
            >
            >
            > --
            > Murray --- ICQ 71997575
            > Adobe Community Expert
            > (If you *MUST* email me, don't LAUGH when you do so!)
            > ==================
            > http://www.dreamweavermx-templates.com - Template Triage!
            > http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
            > http://www.dwfaq.com - DW FAQs, Tutorials & Resources
            > http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
            > ==================
            >
            >
            > "Shane H" <shane@NOSPAMavenuedesigners.com> wrote in message
            > news:ebq217$m2i$1@forums.macromedia.com...
            >> W3C automated CSS validator says this is okay:
            >>
            >> a.main:link, a.main:visited, a.main:active {
            >> color: #006699;
            >> text-decoration: underline;
            >> }
            >> a.main:hover {
            >> color: #006699;
            >> text-decoration: none;
            >> border-bottom: 1px dashed #006699;
            >> }
            >>
            >> I just need another check to make sure this is a legit grouping for link
            >> styles.
            >>
            >> Thanks,
            >>
            >> --
            >> Shane H
            >> shane@NOSPAMavenuedesigners.com
            >> http://www.avenuedesigners.com
            >>
            >> =============================================
            >> Proud GAWDS Member
            >> http://www.gawds.org/showmember.php?memberid=1495
            >>
            >> Delivering accessible websites to all ...
            >> =============================================
            >>
            >>
            >>
            >
            >


            • 3. Re: Valid CSS?
              Level 7
              Try adding this to your stylesheet -

              #footer a:hover { zoom:100%; }

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.dreamweavermx-templates.com - Template Triage!
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
              ==================


              "Shane H" <shane@NOSPAMavenuedesigners.com> wrote in message
              news:ebq4it$p41$1@forums.macromedia.com...
              > Neat, thanks Murray. Now another question, if you don't mind.
              >
              > Why in IE, the black links in my footer and the
              > bold blue links in my breadcrumbs (above the information boxes on the
              > right-hand side) - do not show their declared 1px dashed bottom border on
              > "hover"?
              >
              > http://www.avenuedesigners.com/weblog_mess.php
              >
              > (this is just a test page)
              >
              > Thanks,
              >
              > --
              > Shane H
              > shane@NOSPAMavenuedesigners.com
              > http://www.avenuedesigners.com
              >
              > =============================================
              > Proud GAWDS Member
              > http://www.gawds.org/showmember.php?memberid=1495
              >
              > Delivering accessible websites to all ...
              > =============================================
              >
              >
              > "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
              > news:ebq2m8$mrd$1@forums.macromedia.com...
              >> Yes, but unnecessarily verbose - you don't need two identical color
              >> styles. And in fact, you can shorten it to this -
              >>
              >> a.main {
              >> color: #069;
              >> text-decoration: underline;
              >> }
              >> a.main:hover {
              >> text-decoration:none;
              >> border-bottom:1px dashed #069;
              >> }
              >>
              >>
              >> --
              >> Murray --- ICQ 71997575
              >> Adobe Community Expert
              >> (If you *MUST* email me, don't LAUGH when you do so!)
              >> ==================
              >> http://www.dreamweavermx-templates.com - Template Triage!
              >> http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              >> http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              >> http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
              >> ==================
              >>
              >>
              >> "Shane H" <shane@NOSPAMavenuedesigners.com> wrote in message
              >> news:ebq217$m2i$1@forums.macromedia.com...
              >>> W3C automated CSS validator says this is okay:
              >>>
              >>> a.main:link, a.main:visited, a.main:active {
              >>> color: #006699;
              >>> text-decoration: underline;
              >>> }
              >>> a.main:hover {
              >>> color: #006699;
              >>> text-decoration: none;
              >>> border-bottom: 1px dashed #006699;
              >>> }
              >>>
              >>> I just need another check to make sure this is a legit grouping for link
              >>> styles.
              >>>
              >>> Thanks,
              >>>
              >>> --
              >>> Shane H
              >>> shane@NOSPAMavenuedesigners.com
              >>> http://www.avenuedesigners.com
              >>>
              >>> =============================================
              >>> Proud GAWDS Member
              >>> http://www.gawds.org/showmember.php?memberid=1495
              >>>
              >>> Delivering accessible websites to all ...
              >>> =============================================
              >>>
              >>>
              >>>
              >>
              >>
              >
              >


              • 4. Re: Valid CSS?
                Level 7
                It shifts everything on hover - what is this doing? This can't be the only
                way to get around it?

                --
                Shane H
                shane@NOSPAMavenuedesigners.com
                http://www.avenuedesigners.com

                =============================================
                Proud GAWDS Member
                http://www.gawds.org/showmember.php?memberid=1495

                Delivering accessible websites to all ...
                =============================================


                "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                news:ebqgs4$akp$1@forums.macromedia.com...
                > Try adding this to your stylesheet -
                >
                > #footer a:hover { zoom:100%; }
                >
                > --
                > Murray --- ICQ 71997575
                > Adobe Community Expert
                > (If you *MUST* email me, don't LAUGH when you do so!)
                > ==================
                > http://www.dreamweavermx-templates.com - Template Triage!
                > http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                > http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                > http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                > ==================
                >
                >
                > "Shane H" <shane@NOSPAMavenuedesigners.com> wrote in message
                > news:ebq4it$p41$1@forums.macromedia.com...
                >> Neat, thanks Murray. Now another question, if you don't mind.
                >>
                >> Why in IE, the black links in my footer and the
                >> bold blue links in my breadcrumbs (above the information boxes on the
                >> right-hand side) - do not show their declared 1px dashed bottom border on
                >> "hover"?
                >>
                >> http://www.avenuedesigners.com/weblog_mess.php
                >>
                >> (this is just a test page)
                >>
                >> Thanks,
                >>
                >> --
                >> Shane H
                >> shane@NOSPAMavenuedesigners.com
                >> http://www.avenuedesigners.com
                >>
                >> =============================================
                >> Proud GAWDS Member
                >> http://www.gawds.org/showmember.php?memberid=1495
                >>
                >> Delivering accessible websites to all ...
                >> =============================================
                >>
                >>
                >> "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                >> news:ebq2m8$mrd$1@forums.macromedia.com...
                >>> Yes, but unnecessarily verbose - you don't need two identical color
                >>> styles. And in fact, you can shorten it to this -
                >>>
                >>> a.main {
                >>> color: #069;
                >>> text-decoration: underline;
                >>> }
                >>> a.main:hover {
                >>> text-decoration:none;
                >>> border-bottom:1px dashed #069;
                >>> }
                >>>
                >>>
                >>> --
                >>> Murray --- ICQ 71997575
                >>> Adobe Community Expert
                >>> (If you *MUST* email me, don't LAUGH when you do so!)
                >>> ==================
                >>> http://www.dreamweavermx-templates.com - Template Triage!
                >>> http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                >>> http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                >>> http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                >>> ==================
                >>>
                >>>
                >>> "Shane H" <shane@NOSPAMavenuedesigners.com> wrote in message
                >>> news:ebq217$m2i$1@forums.macromedia.com...
                >>>> W3C automated CSS validator says this is okay:
                >>>>
                >>>> a.main:link, a.main:visited, a.main:active {
                >>>> color: #006699;
                >>>> text-decoration: underline;
                >>>> }
                >>>> a.main:hover {
                >>>> color: #006699;
                >>>> text-decoration: none;
                >>>> border-bottom: 1px dashed #006699;
                >>>> }
                >>>>
                >>>> I just need another check to make sure this is a legit grouping for
                >>>> link styles.
                >>>>
                >>>> Thanks,
                >>>>
                >>>> --
                >>>> Shane H
                >>>> shane@NOSPAMavenuedesigners.com
                >>>> http://www.avenuedesigners.com
                >>>>
                >>>> =============================================
                >>>> Proud GAWDS Member
                >>>> http://www.gawds.org/showmember.php?memberid=1495
                >>>>
                >>>> Delivering accessible websites to all ...
                >>>> =============================================
                >>>>
                >>>>
                >>>>
                >>>
                >>>
                >>
                >>
                >
                >


                • 5. Re: Valid CSS?
                  Level 7
                  That's very curious. Try making it -

                  #footer a { zoom:100%; }

                  The reason you have the problem is that the <a> tag is not getting "layout"
                  due to an obscure IE bug (I believe). This causes the <a> tag not to be
                  'tall' enough to reveal the dashed underline.

                  One solution is to give IE something to remind it to give that tag layout,
                  and zoom does that - it's IE proprietary, so your CSS won't validate, but it
                  works (it's functionally equivalent to the Holly hack, I think). If you are
                  bothered by the invalid CSS, then put it into an IE conditional comment.
                  Alternatively, you could use -

                  #footer a { height:1%; }

                  which does the same sorta thing.


                  --
                  Murray --- ICQ 71997575
                  Adobe Community Expert
                  (If you *MUST* email me, don't LAUGH when you do so!)
                  ==================
                  http://www.dreamweavermx-templates.com - Template Triage!
                  http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                  http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                  http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                  ==================


                  "Shane H" <shane@NOSPAMavenuedesigners.com> wrote in message
                  news:ebr9f8$8bs$1@forums.macromedia.com...
                  > It shifts everything on hover - what is this doing? This can't be the only
                  > way to get around it?
                  >
                  > --
                  > Shane H
                  > shane@NOSPAMavenuedesigners.com
                  > http://www.avenuedesigners.com
                  >
                  > =============================================
                  > Proud GAWDS Member
                  > http://www.gawds.org/showmember.php?memberid=1495
                  >
                  > Delivering accessible websites to all ...
                  > =============================================
                  >
                  >
                  > "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                  > news:ebqgs4$akp$1@forums.macromedia.com...
                  >> Try adding this to your stylesheet -
                  >>
                  >> #footer a:hover { zoom:100%; }
                  >>
                  >> --
                  >> Murray --- ICQ 71997575
                  >> Adobe Community Expert
                  >> (If you *MUST* email me, don't LAUGH when you do so!)
                  >> ==================
                  >> http://www.dreamweavermx-templates.com - Template Triage!
                  >> http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                  >> http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                  >> http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                  >> ==================
                  >>
                  >>
                  >> "Shane H" <shane@NOSPAMavenuedesigners.com> wrote in message
                  >> news:ebq4it$p41$1@forums.macromedia.com...
                  >>> Neat, thanks Murray. Now another question, if you don't mind.
                  >>>
                  >>> Why in IE, the black links in my footer and the
                  >>> bold blue links in my breadcrumbs (above the information boxes on the
                  >>> right-hand side) - do not show their declared 1px dashed bottom border
                  >>> on "hover"?
                  >>>
                  >>> http://www.avenuedesigners.com/weblog_mess.php
                  >>>
                  >>> (this is just a test page)
                  >>>
                  >>> Thanks,
                  >>>
                  >>> --
                  >>> Shane H
                  >>> shane@NOSPAMavenuedesigners.com
                  >>> http://www.avenuedesigners.com
                  >>>
                  >>> =============================================
                  >>> Proud GAWDS Member
                  >>> http://www.gawds.org/showmember.php?memberid=1495
                  >>>
                  >>> Delivering accessible websites to all ...
                  >>> =============================================
                  >>>
                  >>>
                  >>> "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                  >>> news:ebq2m8$mrd$1@forums.macromedia.com...
                  >>>> Yes, but unnecessarily verbose - you don't need two identical color
                  >>>> styles. And in fact, you can shorten it to this -
                  >>>>
                  >>>> a.main {
                  >>>> color: #069;
                  >>>> text-decoration: underline;
                  >>>> }
                  >>>> a.main:hover {
                  >>>> text-decoration:none;
                  >>>> border-bottom:1px dashed #069;
                  >>>> }
                  >>>>
                  >>>>
                  >>>> --
                  >>>> Murray --- ICQ 71997575
                  >>>> Adobe Community Expert
                  >>>> (If you *MUST* email me, don't LAUGH when you do so!)
                  >>>> ==================
                  >>>> http://www.dreamweavermx-templates.com - Template Triage!
                  >>>> http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                  >>>> http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                  >>>> http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                  >>>> ==================
                  >>>>
                  >>>>
                  >>>> "Shane H" <shane@NOSPAMavenuedesigners.com> wrote in message
                  >>>> news:ebq217$m2i$1@forums.macromedia.com...
                  >>>>> W3C automated CSS validator says this is okay:
                  >>>>>
                  >>>>> a.main:link, a.main:visited, a.main:active {
                  >>>>> color: #006699;
                  >>>>> text-decoration: underline;
                  >>>>> }
                  >>>>> a.main:hover {
                  >>>>> color: #006699;
                  >>>>> text-decoration: none;
                  >>>>> border-bottom: 1px dashed #006699;
                  >>>>> }
                  >>>>>
                  >>>>> I just need another check to make sure this is a legit grouping for
                  >>>>> link styles.
                  >>>>>
                  >>>>> Thanks,
                  >>>>>
                  >>>>> --
                  >>>>> Shane H
                  >>>>> shane@NOSPAMavenuedesigners.com
                  >>>>> http://www.avenuedesigners.com
                  >>>>>
                  >>>>> =============================================
                  >>>>> Proud GAWDS Member
                  >>>>> http://www.gawds.org/showmember.php?memberid=1495
                  >>>>>
                  >>>>> Delivering accessible websites to all ...
                  >>>>> =============================================
                  >>>>>
                  >>>>>
                  >>>>>
                  >>>>
                  >>>>
                  >>>
                  >>>
                  >>
                  >>
                  >
                  >