HTML and CSS input color text trouble

tnsmart · Aug 12, 2009

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.

angelwatt · Aug 12, 2009

Colors in hex value need the # in front of them.

Code:

color: #0000C7;

tnsmart · Aug 12, 2009

angelwatt said:
Colors in hex value need the # in front of them.

Code:

color: #0000C7;

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.

angelwatt · Aug 12, 2009

tnsmart said:
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.

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.

tnsmart · Aug 12, 2009

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.

angelwatt · Aug 12, 2009

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.

tnsmart · Aug 12, 2009

Thank you for the corrections/suggestions. Unfortunatley, still no luck with the input or border color.

angelwatt · Aug 12, 2009

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.

angelwatt · Aug 12, 2009

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>

tnsmart · Aug 12, 2009

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.

Cerebrus' Maw · Aug 12, 2009

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.

angelwatt · Aug 12, 2009

Cerebrus' Maw said:
I would imagine that Angelwatt left out decoration blink as it is not supported by all browsers (Not by Safari IE, or Chrome)

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.

tnsmart · Aug 12, 2009

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.

Cerebrus' Maw · Aug 12, 2009

tnsmart said:
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?

I think that if you reference an element in two seperate .css files, it will use the .css that is last defined.
So if you have #example defined in both:

Code:

<link ref="stylesheet" HREF="sitestyle1.css" type="text/css"> <link ref="stylesheet" HREF="sitestyle2.css" type="text/css">

It will use the CSS for #example in sitestyle2.css. At least this would keep inline with "cascading". Or course if you have totally seperate styles for #example that dont have anything in common, it will apply both.

tnsmart said:

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.

Click to expand...

Welcome to the world of HTML development.

Click to expand...

angelwatt · Aug 13, 2009

Cerebrus' Maw said:
I think that if you reference an element in two seperate .css files, it will use the .css that is last defined.

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.

Search

Search

HTML and CSS input color text trouble

tnsmart

macrumors 6502

angelwatt

Moderator emeritus

tnsmart

macrumors 6502

angelwatt

Moderator emeritus

tnsmart

macrumors 6502

angelwatt

Moderator emeritus

tnsmart

macrumors 6502

angelwatt

Moderator emeritus

angelwatt

Moderator emeritus

tnsmart

macrumors 6502

Cerebrus' Maw

macrumors 6502

angelwatt

Moderator emeritus

Attachments

tnsmart

macrumors 6502

Cerebrus' Maw

macrumors 6502

angelwatt

Moderator emeritus

Our Staff