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 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question External Style Sheets

    I'm just wondering if there is a difference in the way that you write an external style sheet as opposed to including the css in the html document?

    The reason that I ask is that my contact form had styled submit buttons:
    Code:
    submit {
    
      font-weight: bold;
      font-size: 12px;
      border: #c0c0c0 inset 2px;
    		
    }
    
    submit.hover {
    
      font-weight: bold;
      font-size: 12px;
      border-bottom: #cc0000 inset 2px;
      border-right: #cc0000 inset 2px;
      border-left: #ff0000 inset 2px;
      border-top:  #ff0000 inset 2px;
    
    }
    Which I use this javascript to make this effect compatible with both 'IE' and 'NN':
    Code:
    <input onfocus="this.className='hover'" onblur="this.className=''" onMouseover="this.className='hover'" onMouseout="this.className=''" type="submit" name="submit" id="submit" value="Submit">
    It works fine on my contact form where the css is in the html document, but when I try to incorporate this into an external style sheet for my site search engine, with the same javascript, this effect doesn't work. Why would this be?

    I do know that the styles that I incorporated into this external sheet are somewhat functional. The text box, when activated gets a red border and in 'NN' when the select field is activated, it gets a red border too, but I can't seem to get this to work for the life of me.

    I even tried:
    Code:
    input[type=submit]
    but this only works in 'NN'.



    My Files

    Search Form:

    http://www.rollersports.ca/cgi-bin/search/search.cgi

    External Style Sheet:

    http://www.rollersports.ca/css/search.css

    Contact form:

    http://www.rollersports.ca/contacts.htm



    Any help would be greatly appreciated.

    Titanic Fanatic

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try taking out the word submit before .hover and lose this input[type=submit] well the [type=submit] part anyways, thats causing it not to work, and you say that it has to be inside of an element that has an id of search but is in an element called box which isn't right either, this should work.
    Code:
    #box submit {
    
      font-weight: bold;
      font-size: 12px;
      border: #c0c0c0 inset 2px;
    	 
    }
    
    /* Submit Button Hover State */
    #box .hover {
    
      font-weight: bold;
      font-size: 12px;
      border-bottom: #cc0000 inset 2px;
      border-right: #cc0000 inset 2px;
      border-left: #ff0000 inset 2px;
      border-top:  #ff0000 inset 2px;
      
    }
    Given that the input submits are inside of an element that has an id of box
    Last edited by _Aerospace_Eng_; 07-09-2005 at 08:02 AM.

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Thanks...

    It worked like a charm. Thanks for your help.

    Titanic Fanatic

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by titanic_fanatic
    Code:
    submit {
    
      …
    		
    }
    
    submit.hover {
    
      …
    
    }
    Quote Originally Posted by _Aerospace_Eng_
    Code:
    #box submit {…
    Fwiw, you are both using submit as though it were an element, which is incorrect.


  •  

    Posting Permissions

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