Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2002
    Location
    Alabama
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS and Button Problem

    The following code works for everthing else but does nothing to my buttons, they don't change at all. Can someone please tell me what I am doing wrong?


    <style type="text/css">

    body {font-family: Arial, helvetica, sans-serif }

    A:link { color: rgb(0, 0, 0) } /* for unvisited links */
    A:visited { color: rgb(0, 0, 0); text-decoration: none }
    A:hover { color: white; background: #990000 }

    button {font-weight: bold;
    font-size: larger;
    background: #990000;
    color: white;
    }
    p.Note {font-weight: bold;
    font-style: italic;
    font-size: smaller;
    }

    </style>

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Auckland New Zealand
    Posts
    115
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If your button is an image, it wont be affected by a CSS unless yopu set the border (to the image ) to 1px or more.

    CSS is for TEXT.


    Tonz
    Beware, the Cybertooth tiger cometh

  • #3
    Regular Coder
    Join Date
    May 2002
    Location
    Helsinki, Finland
    Posts
    231
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: CSS and Button Problem

    Originally posted by srumphrey
    The following code works for everthing else but does nothing to my buttons, they don't change at all. Can someone please tell me what I am doing wrong?

    ...
    button {font-weight: bold;
    font-size: larger;
    background: #990000;
    color: white;
    }
    ...
    </style>
    Hmm..I suggest making buttons with INPUT element, instead of BUTTON element. And for CSS1 support, apply class attribute to them.

    For instance :
    <input type="button" class="btn" value="Push" />

    and in style definitions :
    .btn {font:bold 1.2em verdana,serif;background-color:#990000;color:#FFFFFF;}
    Zvona
    First Aid for
    Web Design

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i'd make sure your using the <button> tag not <input type="button">...

    there's nothing wrong with the CSS coding...
    redhead

  • #5
    New to the CF scene
    Join Date
    Oct 2002
    Location
    Alabama
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You were right, I am using <INPUT type="BUTTON" and not a button. But, I copied your code straight into it, and still no change. Is input.btn correct? I can find tons of stuff on CSS on how to set your values, but I can't find any list anywhere of how to say WHAT you are making changes to. (I would never be able to guess to use btn instead of button). Does anyone know where that might be?

    <style type="text/css">

    body {font-family: Arial, helvetica, sans-serif }

    A:link { color: rgb(0, 0, 0) } /* for unvisited links */
    A:visited { color: rgb(0, 0, 0); text-decoration: none }
    A:hover { color: white; background: #990000 }

    input.btn {font:bold 1.2em verdana,serif;background-color:#990000;color:#FFFFFF;}

    p.Note {font-weight: bold;
    font-style: italic;
    font-size: smaller;
    }

    </style>

  • #6
    New to the CF scene
    Join Date
    Oct 2002
    Location
    Alabama
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, I missed your statement about setting the class! I got it working, thanks! I was just completely confused.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •