3 Replies Latest reply on Aug 14, 2007 8:53 AM by Newsgroup_User

    A:HOVER problems using D'Weaver CS3 Built-In Templates

    ccaptainsubzero Level 1
      This is probably my bad, but I just started using CS3 CSS templates to do a site -- in this case side bar left, fixed center, header and footer. All is well and good, but I went in and started adding my own CSS to change the look of links. Works fine, but A:HOVER absolutely won't change anything. I attach CSS -- but is there something in particular I should be aware of? Is there something in the D'Weaver template CSS that's overriding my own? Or is it simply that if you set up complex contextual rules for A (i.e..twoColFixLtHdr #container #header h1 a), then A:HOVER isn't going to work so simply?

        • 1. Re: A:HOVER problems using D'Weaver CS3 Built-In Templates
          Level 7
          In CSS, there is a rule of greater specificity that determines which styles
          apply when two rules come into conflict.

          This rule's selector -

          a:hover {}

          has a specificity of 1.

          This rule's selector -

          .twoColFixLtHdr #container #header h1 a {

          has a specificity of 212 (100 for each ID, 10 for each class, 1 for each
          tag).

          That's why you aren't seeing any change - the second rule is *SO* much more
          specific that the first rule never applies. To fix this, make the first
          rule have equivalent specificity, either by adding the same selector to it,
          e.g.,

          .twoColFixLtHdr #container #header h1 a:hover {

          or by adding !important after the style, e.g.,

          a:hover { color:blue!important; }

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


          "ccaptainsubzero" <webforumsuser@macromedia.com> wrote in message
          news:f9pngu$929$1@forums.macromedia.com...
          > This is probably my bad, but I just started using CS3 CSS templates to do
          > a
          > site -- in this case side bar left, fixed center, header and footer. All
          > is
          > well and good, but I went in and started adding my own CSS to change the
          > look
          > of links. Works fine, but A:HOVER absolutely won't change anything. I
          > attach
          > CSS -- but is there something in particular I should be aware of? Is
          > there
          > something in the D'Weaver template CSS that's overriding my own? Or is it
          > simply that if you set up complex contextual rules for A
          > (i.e..twoColFixLtHdr
          > #container #header h1 a), then A:HOVER isn't going to work so simply?
          >
          >
          >
          > @charset "UTF-8";
          > .twoColFixLtHdr #container #header h1 a {
          > color: #037E12;
          > text-decoration: none;
          > }
          > .twoColFixLtHdr #container {
          > width: 800px; /* using 20px less than a full 800px width allows for
          > browser
          > chrome and avoids a horizontal scroll bar */
          > background: #FFFFFF; /* the auto margins (in conjunction with a width)
          > center
          > the page */
          > border: 1px solid #000000;
          > text-align: left; /* this overrides the text-align: center on the body
          > element. */
          > margin-top: 20;
          > margin-right: auto;
          > margin-bottom: 0;
          > margin-left: auto;
          > }
          > .twoColFixLtHdr #header {
          > background: #DDDDDD;
          > padding: 0; /* this padding matches the left alignment of the elements
          > in
          > the divs that appear beneath it. If an image is used in the #header
          > instead of
          > text, you may want to remove the padding. */
          > }
          > .twoColFixLtHdr #header h1 {
          > font-family: Arial, Helvetica, sans-serif;
          > font-size: 14px;
          > color: #007F19;
          > padding: 10px;
          > margin: 0;
          > }
          > .twoColFixLtHdr #sidebar1 {
          > float: left; /* since this element is floated, a width must be given */
          > width: 200px; /* the actual width of this div, in standards-compliant
          > browsers, or standards mode in Internet Explorer will include the padding
          > and
          > border in addition to the width */
          > background: #EBEBEB; /* the background color will be displayed for the
          > length
          > of the content in the column, but no further */
          > padding: 15px 10px 15px 20px;
          > }
          > .twoColFixLtHdr #mainContent {
          > margin: 0 0 0 250px; /* the left margin on this div element creates the
          > column down the left side of the page - no matter how much content the
          > sidebar1
          > div contains, the column space will remain. You can remove this margin if
          > you
          > want the #mainContent div's text to fill the #sidebar1 space when the
          > content
          > in #sidebar1 ends. */
          > padding: 0 20px; /* remember that padding is the space inside the div box
          > and
          > margin is the space outside the div box */
          > }
          > .twoColFixLtHdr #footer {
          > padding: 0 10px 0 20px; /* this padding matches the left alignment of the
          > elements in the divs that appear above it. */
          > background:#DDDDDD;
          > }
          > a:hover {
          > color: #005C9B;
          > text-decoration: underline;
          > }
          > .twoColFixLtHdr #footer p {
          > margin: 0; /* zeroing the margins of the first element in the footer will
          > avoid the possibility of margin collapse - a space between divs */
          > padding: 10px 0; /* padding on this element will create space, just as
          > the
          > the margin would have, without the margin collapse issue */
          > }
          > .fltrt { /* this class can be used to float an element right in your page.
          > The
          > floated element must precede the element it should be next to on the page.
          > */
          > float: right;
          > margin-left: 8px;
          > }
          > .fltlft { /* this class can be used to float an element left in your page
          > */
          > float: left;
          > margin-right: 8px;
          > }
          > .twoColFixLtHdr #container #sidebar1 p {
          > margin-bottom: -10px;
          > }
          > .clearfloat { /* this class should be placed on a div or break element and
          > should be the final element before the close of a container that should
          > fully
          > contain a float */
          > clear:both;
          > height:0;
          > font-size: 1px;
          > line-height: 0px;
          > }
          > .twoColFixLtHdr #container #sidebar1 a {
          > font-family: Arial, Helvetica, sans-serif;
          > font-size: 14px;
          > color: #047F0A;
          > padding-bottom: 10px;
          > margin-bottom: 5px;
          > }
          >


          • 3. Re: A:HOVER problems using D'Weaver CS3 Built-In Templates
            Level 7
            You're welcome.

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


            "ccaptainsubzero" <webforumsuser@macromedia.com> wrote in message
            news:f9sj07$lb7$1@forums.macromedia.com...
            > Thanks very much!