dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: CSS question - help required!

  1. #1
    Join Date
    Dec 2002
    Posts
    23

    CSS question - help required!

    Hello

    I have the following in my <HEAD></HEAD> tags:

    <style>
    .searchbox {
    border:solid 1 D38F50;
    font-family: verdana,arial,helvetica;
    font-size: 8pt;
    background-color: black;
    COLOR: white;
    font-weight: medium;
    }
    </style>

    and further down the page, I have:

    <p><input type="submit" name="submit" class="searchbox" value="Submit" size="6"></input>

    <input type="reset" name="clear" class="searchbox" value="Reset" size="6"></input>
    </p>

    If I change the colour value in the style tag (COLOR: white to say, RED, the colour of the 'Submit', and 'Reset' buttons changes to red, and so does the colour of the text the user types in the form.

    Is it possible to change the colour of the words 'Submit' and 'Reset', while maintaining the colour white as the colour of the text in the form's fields?

    Many thanks for any help.

    laTortuga

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    It's easy. Just make a separate class for the text box:

    <style type="text/css" media="screen">
    .searchbox {
    border:solid 1 D38F50;
    font-family: verdana,arial,helvetica;
    font-size: 8pt;
    background-color: black;
    COLOR: #0f0;
    font-weight: medium;
    }

    .AtextBox {
    border:solid 1 D38F50;
    font-family: verdana,arial,helvetica;
    font-size: 8pt;
    background-color: black;
    COLOR: white;
    font-weight: medium;
    }

    AND IN HTML:

    <p><input type="submit" name="submit" class="searchbox" value="Submit" size="6">

    <input type="reset" name="clear" class="searchbox" value="Reset" size="6">
    </p>

    <p>
    <input type="text" class="AtextBox" size="30">


    The input tag does not have an end tag. If you are coding in xhtml, just add a space and a forward-slash at the end of the input tag:

    <input type="button" value="Stuff" />

  3. #3
    Join Date
    Nov 2002
    Posts
    984

    Re: CSS question - help required!

    Originally posted by laTortuga
    border:solid 1 D38F50;
    I'd like to mention that you have no less then 2 errors in that line.

    #1 You MUST specify a unit with your width. You probably want 1px

    #2 D38F50 is an invalid color. Again you need a unit. If it'a a hexvalue it should be #D38F50

    To sum it up use eg
    border:solid 1px #d38f50;

    Also worth mentioning is that you shold always end a list of fonts with a generic fontfamily eg:
    font-family: verdana,arial,helvetica,sans-serif;

    and the use of points for fontsizes should only be used for media PRINT, not media SCREEN.
    For stuff that is supposed to be displayed on a monitor, use pixel or preferably % eg
    font-size: 80%;

  4. #4
    celebguy_dv Guest

  5. #5
    Join Date
    Dec 2002
    Posts
    23

    Many thanks

    Hello Stefan and Greg

    Many thanks for both your postings - I'm grateful.

    I didn't know I had to use:

    border:solid 1px #d38f50;

    so thanks for tidying up the existing code and offering more good stuff!

    Cheers!

    laTortuga

  6. #6
    Join Date
    Nov 2002
    Posts
    984
    You are welcome

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles