Skip navigation
Currently Being Moderated

Botton behavior with css doesn't always work

Feb 19, 2013 10:32 AM

Tags: #dreamweaver #javascript #button #css

Hi, I have a few websites where I use a class to make buttons.

The class is this one:

 

.ButtonsRightBar {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #033

    background-color: #F90;

    width: auto;

    padding: 3px;

    border: thin solid #063;

    float: none;

    display: block;

    height: auto;

    text-align: center;

    vertical-align: middle;

    color: #033;

    background-color: #F93;

}

 

I use the style below between the <head>tags

 

<style>

 

       

 

a:link {

 

    color: #033;

 

    text-decoration: none;

 

}

 

a:hover {

 

    text-decoration: none;

 

    color: #FFF;

 

    background-color: #063;

 

}

 

a:visited {

 

    text-decoration: none;

 

    color: #033;

 

}

 

a:active {

 

    text-decoration: none;

 

    color: #F00;

 

}

 

 

 

        </style>

 

Unfortunately the result is not always consistent.

Sometimes it is good when you hover over the button (the background becomes green and text white), sometimes the area direct behind the text becomes green and the rest of the field stays orange, sometimes the background becomes green but the text stays black.

 

Is there a way to have a consistent button behaviour? Maybe with Javascript.

And if so how do I do that?

 

The website is: http://www.bibleopen.org

 
Replies
  • Currently Being Moderated
    Feb 19, 2013 11:48 AM   in reply to LaurensHoddenbagh

    Among other things, your pages are missing a valid document type declaration (DTD) which renders in browser Quirks Mode.

     

    Code Errors:

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.hoddenbag h.nl%2Fbibleopen%2Findex.html%23top

     

    To fix the missing DTD in DW, go to Modify > Page properties > Title/Encoding > DTD.  Select a document type that matches your code.  Recommend  HTML 4.0 (Transitional).  Hit Save and repeat with other site pages.

     

    This appears to be an old GoLive site.  Rather than fix all the errors reported above, you might want to rebuild your site in DW with modern HTML & CSS Layouts. 

     

    See Creating your first web site in DW -

    http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.htm l

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2013 1:40 PM   in reply to LaurensHoddenbagh

    Your CSS link pseudoclasses must be listed in this order

    Link

    Visited

    Hover

    Active

     

    Otherwise they are erratic.

    This should help you remember the order love hate

    love-hate.jpg

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2013 5:06 PM   in reply to LaurensHoddenbagh

    I can't find a "css folder" or the script you say contains your link pseudoclasses.

    There are no link pseudoclasses in your remote stylesheet http://www.hoddenbagh.nl/bibleopen/bijbel.css

     

    I don't see any underlined links but to remove them just add this attribute to link pseudoclasses:

    text-decoration:none;

     

    To repair the 2nd and 3rd links on the index page, copy the rollover code from the other pages that work, or remove these underscores in both the name and ID values in the second and third buttons:

     

    <img src="gifs/bt_who-2011_02.gif" alt="Who made this site and why" name="Who_and_Why" width="117" height="22" border="0" id="Who_and_Why"></a><a href="conf_faith.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Confession of Faith','','gifs/bt_conf-2011-Hover_03.gif',1)">

     

    <img src="gifs/bt_conf-2011_03.gif" alt="Confession of Faith" name="Confession_of_Faith" width="160" height="22" border="0" id="Confession_of_Faith"></a><a href="subjects.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Subjects','','gifs/bt_subj-2011-Hover_04.g if',1)">

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 22, 2013 5:19 AM   in reply to LaurensHoddenbagh

    Hello again Lorens -

     

    I see you have added the link pseudoclasses to your stylesheet bijbel.css.

    Please remove these tags which are not necessary:

     

    <STYLE type="text/css">

    <!--

     

    and

     

    -->

    </style>

     

    and to remove the underlines add this to all four link pseudoclasses


    text-decoration:none;


    and to remove the blue border from your image links add this

     

    a img {border:none;

    }

     

    On your index page, the hover rollover on buttons 2 and 3 are not yet correct

    Put the spaces back in the name and ID attributes as you see in all other pages

     

    <img src="gifs/bt_who-2011_02.gif" alt="Who made this site and why" name="Who and Why" width="117" height="22" border="0" id="Who and Why"></a><a href="conf_faith.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Confession of Faith','','gifs/bt_conf-2011-Hover_03.gif',1)">

     

    <img src="gifs/bt_conf-2011_03.gif" alt="Confession of Faith" name="Confession of Faith" width="160" height="22" border="0" id="Confession of Faith"></a><a href="subjects.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Subjects','','gifs/bt_subj-2011-Hover_04.g if',1)">

     


    Do you need all that Javascript in the HEAD section?

     

    It would be easier to rebuild your pages than it will be to sort out the unnecessary code.

     

     

     


     
    |
    Mark as:
  • Currently Being Moderated
    Feb 22, 2013 11:33 AM   in reply to LaurensHoddenbagh

    HINT:  You don't need to apply text-decoration to all links. You can use an "a" selector for that:

     

    a {text-decoration:none}    /**all links**/

    a:link {color: #xxxxxx}        /**unvisited links**/

    a:visited {color: #xxxxxx}  /**visited links**/

    a:hover {color: #xxxxxx}  /**on mouseover**/

    a:active {color: #xxxxxx}  /**on click**/

    a:focus {color:#xxxxxx}  /**on tab focus**/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 22, 2013 12:44 PM   in reply to LaurensHoddenbagh

    Hi Lorens -

    subj.jpg

     

    You may not have seen your Subjects page in Internet Explorer, but it does not seem to like your shorthand background color #F93 or the missing space in front of the width attribute.

     

    Change this (near line  335)

     

    <table border="1" cellpadding="0" cellspacing="0" bordercolor="#f60" bgcolor="#F93"width="580">

    <tr>

    <td><img height="8" width="92" src="gifs/non.gif"><font size="5">Subjects</font></td>

    </tr>

    </table>

     

    to this

     

    <table border="1" cellpadding="0" cellspacing="0" bordercolor="#f60" bgcolor="#FF9933" width="580">

    <tr>

    <td><img height="8" width="92" src="gifs/non.gif"><font size="5">Subjects</font></td>

    </tr>

    </table>

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 4, 2013 2:38 PM   in reply to LaurensHoddenbagh

    Looks good.  I just have one suggestion.  Hit counters scream amatuer.  They don't look nice & the results are meaningless.  Why don't you get Google Analytics?  It's free.  http://www.google.com/analytics/

     

    GA gives you full web statistics.  In short, much more beneficial to you than a hit counter.

     

    Good work!

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points