Skip navigation
LaurensHoddenbagh
LaurensHoddenbagh Calculating status...
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

706 Views   12 Replies   Latest reply: Nancy O., Mar 4, 2013 2:38 PM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Feb 19, 2013 11:48 AM   in reply to LaurensHoddenbagh
    Report

    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:
  • Ken Binney
    Currently Being Moderated
    2. Ken Binney,
    Feb 19, 2013 1:40 PM   in reply to LaurensHoddenbagh
    Report

    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:
  • LaurensHoddenbagh
    Currently Being Moderated
    3. LaurensHoddenbagh,
    Feb 21, 2013 1:19 PM   in reply to Nancy O.
    Report

    Thanks Nancy!

     

    Both sites, the Dutch and the English, have now the recommended HTML 4.01 (Transitional) code.

     

    I changed the order of the CSS link pseudo classes like Ken suggested. I removed it from all the pages and I put the script in the css folder to make everything more consisted. I hope that was a right choice.

     

    With that all done all buttons work great now, BUT… now they are underlined which I don’t like.

     

    Hope you will know how to solve that problem.

     

    In the next weeks I will check all the pages for errors. To rebuild the site is way to much work because of the structure. Three columns  where text must align.

     

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

     

    Laurens

     
    |
    Mark as:
  • LaurensHoddenbagh
    Currently Being Moderated
    4. LaurensHoddenbagh,
    Feb 21, 2013 1:20 PM   in reply to Ken Binney
    Report

    Thank you too Ken.

    Laurens

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

    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:
  • LaurensHoddenbagh
    Currently Being Moderated
    6. LaurensHoddenbagh,
    Feb 22, 2013 12:18 AM   in reply to Ken Binney
    Report

    It's my lack of knowledge I called bijbel.css a folder. In that CSS the Link, Visited, Hover and Active have the attribute: text-decoration:none.

    When you go to the subjects page and other pages you will see the underlined links. In the Subjects page under ‘INDEX’ they are even blue.

     

    I used the word ‘pseudoclasses’ because you used it in the same sentence where you were talking about the Hover etc. I thought that what I did in the CSS file was a ‘pseudoclass’.

     

    Yesterday, while validating the index page I got an error for the ID, that’s why I used underscores. But I fixed it. And I copied and pasted the rollover code, so that’s OK again.

     

    Thanks for helping me. I hope you will have an answer to solve the problem of the underlined links.

     

    BTW do I need all that Javascript in the HEAD section, maybe it's old stuff from GoLive?

     
    |
    Mark as:
  • Ken Binney
    Currently Being Moderated
    7. Ken Binney,
    Feb 22, 2013 5:19 AM   in reply to LaurensHoddenbagh
    Report

    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:
  • LaurensHoddenbagh
    Currently Being Moderated
    8. LaurensHoddenbagh,
    Feb 22, 2013 9:47 AM   in reply to Ken Binney
    Report

    Hi Ken,

    Great that you are so helpful.

    The rollover buttons are now working alright.

    While removing the tags in the Stylesheet bijbel.css I noticed that for three tags the text-decoration: none was at the first line and the color at the second line.

    At the a:link it was reversed.

    When I put that text-decoration at the first line the problem was solved!

     

    By trial and error I found out that I could get rid of a lot of old scripts. It had to do with browser problems in the early days. And one script was for buttons which I used before I changed them for the new ones.

     

    Thanks again.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    9. Nancy O.,
    Feb 22, 2013 11:33 AM   in reply to LaurensHoddenbagh
    Report

    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:
  • Ken Binney
    Currently Being Moderated
    10. Ken Binney,
    Feb 22, 2013 12:44 PM   in reply to LaurensHoddenbagh
    Report

    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:
  • LaurensHoddenbagh
    Currently Being Moderated
    11. LaurensHoddenbagh,
    Mar 4, 2013 1:27 PM   in reply to Ken Binney
    Report

    Thanks Guys, I decided to follow your advise to rebuild the website.

    Most pages are done, but still some work to do

    What do you think about it?

     

    Thanks again for all your good advice!

     

    Laurens

     

    http://www.bibleopen.org

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    12. Nancy O.,
    Mar 4, 2013 2:38 PM   in reply to LaurensHoddenbagh
    Report

    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:
Actions

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