HTML and CSS input color text trouble

Discussion in 'Web Design and Development' started by tnsmart, Aug 12, 2009.

  1. macrumors 6502

    Joined:
    Aug 23, 2008
    #1
    I'm trying to change the color of input text on an HTML page, using CSS. This code works fine together:

    Code:
    <style type="text/css"> 
    
    input#pass, input#name
      {
      font-family: 'LCARS', 'LCARS Nav Link', sans-serif;
      font-size: 30px;
      letter-spacing: 2px;
      border: 5px solid;
      border-color: 0000C7;
      color: 0000C7;
      }
      
    </style>
    
    <td><div id="table"><input type="text" size="12" id="name"/></div></td>
    <td><div id="table"><input type="password" size="12" id="pass"/></div></td>
    
    But when I have the exact same code on separate pages, both with a lot of other stuff, the "color: 0000C7" does not do anything. I can change everything else both with the code on separate pages (a CSS page and an HTML page) and on the same page (like the code above) but can only change the color when they are on the same page. The color for all the other stuff works fine on separate pages. Anybody know why this is and how I can fix it? Thanks for the help.
     
  2. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Colors in hex value need the # in front of them.

    Code:
    color: #0000C7;
     
  3. thread starter macrumors 6502

    Joined:
    Aug 23, 2008
    #3
    Thanks for the reply. I tried that, unfortunately it still doesn't work. The code in my first post does work fine without the #. I've realized that along with the "color" the "border-color" does not work either.
     
  4. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Other than the missing # on the two color lines I don't see anything wrong with the CSS. Can you elaborate on how you have your files organized, how they are separated on different pages? Do you have a link to see this? Maybe provide a larger snippet of code if necessary. It could be something obvious (for us) if we saw more.
     
  5. thread starter macrumors 6502

    Joined:
    Aug 23, 2008
    #5
    You'll probably recognize this as it's the same code I had questions about earlier.

    I have this HTML which is actually in a PHP file.
    Code:
    <?php
    
    echo '<html>
      <head>
        <script src="verify.js"></script>
        <title>Page</title>
        <link rel="stylesheet" type="text/css" href="/ref/main.css" />
        <link rel="stylesheet" type="text/css" href="/ref/maincolor.css" />
      </head>
     
    <center>
    
    <img src="/ref/Logo.jpg" class="logo" />
    
    <table width="500px" id="text">
    <tr>
    <td><div id="table">
    		<label for="name">User Name</label>
    	</div></td>
    <td><div id="table">
    		<label for="pass">Password</label>
    		</div></td>
    </tr>
    <tr>
    <td><div id="table"><input type="text" size="12" id="name"/></div></td>
    <td><div id="table"><input type="password" size="12" id="pass"/></div></td>
    </tr>
    </table>
    
    <div id="submit">
    <input type="button" value="Login" onclick="verify()" /></div>
          <span id="message"></span>
        </div>
      </body>
    </html>';
    
    ?>
    
    That PHP file references this CSS file.

    Code:
    /*LOGIN PAGE*/
    
    img.logo
      {
      position: relative;
      top: -20px;
      height: 675px;
      width: 812px;
      left: 20px;
      margin-left auto;
      margin-right auto;
      }
    div#form
      {
      position: relative;
      top: -80px;
      width: 600px;
      margin-left auto;
      margin-right auto;
      display: block;
      }
    div#form label
      {
      position: relative;
      top: -100px;
      width: 800px;
      text-align: center;
      margin-right: auto;
      margin-left: auto;
      display: block;
      letter-spacing:2px
      }
    input#pass, input#name
      {
      font-family: 'LCARS', 'LCARS Nav Link', sans-serif;
      font-size: 30px;
      letter-spacing: 2px;
      border: 5px solid;
      border-color: #0000C7;
      background-color: #000000;
      color: #0000C7;
      }
    div#text
      {
      position: relative;
      top: -20px;
      }
    div#table
      {
      text-align: center;
      font-size: 30px;
      letter-spacing: 3px;
      }
    div#right
      {
      position: relative;
      top: -30px
      width: 250px;
      text-align: center;
      left-margin: auto;
      font-margin: auto;
      font-size: 30px;
      letter-spacing: 2px;
      }
    input#submit
      {
      position: relative;
      top: 40px;
      left-margin: auto;
      right-margin: auto;
      }
    span#message
      {
      position: relative;
      top: 0px;
      left-margin: auto;
      right-margin: auto;
      color: red;
      font-size: 30px;
      letter-spacing: 2px;
      text-decoration: blink;
      }
    /*END LOGIN PAGE*/
    
    And that's what I mean by separate pages.

    By the way, "background-color: #000000;" works fine, but "border-color: #0000C7;" and "color: #0000C7;" still don't.

    I'm running these off of an Apache server on Ubuntu. I don't think that's the problem though because if I replace the first code in this post with the code in my first post, it displays fine.
     
  6. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    In the first 2 CSS blocks you're missing a : after the margin properties.

    Code:
      margin-left auto;
      margin-right auto;
    This could be causing some validation issues. Won't necessarily fix the problem, but still worth fixing.

    One this line,
    Code:
    input#pass, input#name
    you don't need that level of specificity. The following will do,
    Code:
    #pass, #name
    Your border declaration could be simplified to,
    Code:
    border: 5px solid #0000C7;
    Again, these won't necessarily fix the problem, but worth changing. I'm not seeing anything obviously wrong at the moment. I may take a further look later.
     
  7. thread starter macrumors 6502

    Joined:
    Aug 23, 2008
    #7
    Thank you for the corrections/suggestions. Unfortunatley, still no luck with the input or border color.
     
  8. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    Looks like you're also missing an opening body tag. I'm also not sure why everything is inside a echo statement when you aren't doing any PHP in there. You have pure HTML.

    You also have 4 div tags with the same id attribute. They're surrounding your input tags that you're having issues with. An id should only be used per page by definition. You'll use a class if it's something you want in multiple places.

    When I copy and paste the HTML/CSS into new files (removing the PHP tags) the page shows fine with the CSS effecting the input tags.
     
  9. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    I took the code and created a new document and cleaned up the HTML and CSS as I kept finding validation issues. As I didn't see any PHP being used, that part is not present. I also put the CSS in a style tag rather than an external file simply for simplification, but you can cut and paste it into your external document. HTML/CSS both validate.

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <script type="text/javascript" src="verify.js"></script>
      <title>Page</title>
      <link rel="stylesheet" type="text/css" href="/ref/main.css" />
      <link rel="stylesheet" type="text/css" href="/ref/maincolor.css" />
    <style type="text/css">
    #logo
      {
      position: relative;
      top: -20px;
      height: 675px;
      width: 812px;
      left: 20px;
      margin: 0 auto;
      }
    table
      {
      margin: 0 auto;
      }
    #pass, #name
      {
      font-family: "LCARS", "LCARS Nav Link", sans-serif;
      font-size: 30px;
      letter-spacing: 2px;
      border: 5px solid #0000C7;
      background-color: #000000;
      color: #0000C7;
      }
    #text
      {
      position: relative;
      top: -20px;
      }
    td
      {
      text-align: center;
      font-size: 30px;
      letter-spacing: 3px;
      }
    #submit
      {
      position: relative;
      top: 40px;
      text-align: center;
      margin: 0 auto;
      }
    #message
      {
      position: relative;
      margin: 0 auto;
      color: red;
      font-size: 30px;
      letter-spacing: 2px;
      }
    </style>
    </head>
    <body>
    
    <div id="logo"><img src="/ref/Logo.jpg" alt="" /></div>
    
    <table width="500px" id="text">
    <tbody>
      <tr>
        <td><label for="name">User Name</label></td>
        <td><label for="pass">Password</label></td>
      </tr>
      <tr>
        <td><input type="text" size="12" name="name" id="name"/></td>
        <td><input type="password" size="12" name="pass" id="pass"/></td>
      </tr>
    </tbody>
    </table>
    
    <div id="submit"><input type="button" value="Login" onclick="verify()" /></div>
    <div id="message"></div>
    
    </body>
    </html>
     
  10. thread starter macrumors 6502

    Joined:
    Aug 23, 2008
    #10
    Wow. Thanks for that.

    I went ahead and put the code into the two separate files. For the most part it displays just like before, except that you fixed a position problem I had with the "#submit" button. Unfortunately, the colors still don't work. I noticed that you left out the "text-decoration: blink;" and am wondering why that is. I noticed that that does not work in Safari, however it does work in Firefox. And also what is this for at the top of your page?:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    Again, thanks for the help.
     
  11. macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #11
    I would imagine that Angelwatt left out decoration blink as it is not supported by all browsers (Not by Safari IE, or Chrome)

    At the top of the page, thats the Document Type Definition (DTD). This is what tells the browser to enter either "quirks" mode, or "strict" mode, and how elements, attributes, basically everything on your sheet, should be interpretated.

    DTD
    A DTD, or document type definition, is a collection of XML markup declarations that, as a collection, defines the legal structure, elements, and attributes that are available for use in a document that complies to the DTD.

    Here is the page on it.
     
  12. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #12
    Yup, its been deprecated, plus it's annoying as hell.

    As mentioned, the top part is the DOCTYPE, which every HTML page should have. The extra attributes on the html tag are just items XHTML likes to have in order to be valid.

    Since the colors worked for me and not you there's something else going on. Do you have this hosted live somewhere where we can view it? Maybe the CSS file isn't getting reference right, or maybe the browser is using a cached version of the CSS file. Have you tried other browsers? I'm attaching what I see for the input fields.
     

    Attached Files:

  13. thread starter macrumors 6502

    Joined:
    Aug 23, 2008
    #13
    I solved it. I forgot to check the /ref/maincolor.css file that is referenced. That's where the problem was. The colors for #pass and #name where set to white in that file. How does it choose which file to follow, if they each give it different colors for the same thing?

    The image you provided, is the exact same thing I got when I put the CSS and HTML into the same file, like in my first post.

    Anyways, I got rid of the #pass and #name properties in the maincolor.css file because I don't need them. Like I said in my previous thread a few days ago, I'm just editing someone else's code. That's why I didn't know that was in the other file.

    About the text-decoration, any idea why it's not supported in Safari and the others? Although it can often be annoying, it can sometimes be useful.

    Glad we solved it, even though it was a simple problem. Thanks for the help.
     
  14. macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #14
     
  15. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #15
    Correct, the browser should use the last reference for a style if the CSS selectors have the same specificity, otherwise the more specific selector wins.

    Blink likely wasn't supported in those browsers due to a choice. I was thinking it was deprecated, but that was for the blink tag, not the CSS. You can use JavaScript to create the same effect though if truly desired.

    I had wondered if the other CSS file might have something more, but forgot to ask. If you install the Firebug addon for Firefox it would have discovered that more quickly as you can see what styles are being applied to a tag and what CSS file it is coming from. Something you should look into. Glad it's working now.
     

Share This Page