Some CSS not working in PHP

hans_cellc · 10-02-2012, 04:33 PM

I have an index.php file with a

Code:

<link rel="stylesheet" type="text/css" href="exam.css"/>

Most of the CSS code works but the following is my major problem and seems so similar:
This works:

Code:

input[type="text"] {
	background-image: url('site_graphics/seamless_green.jpg'); 
	color: #000000; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	text-align: left;
	}

and the the very next line the following does not work, I swopped the order around and then the first one works and second one not:

Code:

input[type="password"] {
	background-image: url('site_graphics/seamless_green.jpg'); 
	color: #000000; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	text-align: left;
	}

I even tried changing the background-image to just background but still no joy.
Please help and maybe if someone could maybe explain why this is a problem.

Keleth · 10-02-2012, 04:41 PM

This has nothing to do with PHP... PHP is a server side technology, while CSS is client side. They don't ever interact directly.

So what you're saying is that if you put your input[type="text"] definition first, it works, if you put your input[type="password"] definition first, it works, but neither works when it comes after the other?

What browser are you using/testing on? Can you show an example of the HTML you're testing it on? Any other conflicting definitions later on?

From this information alone, I don't see any issue with your CSS and have insufficient information to find an answer.

Given they have the same attributes, why not make them one definition?

DanInMa · 10-02-2012, 04:45 PM

most likely the browsers you are testing in don't support that type of selector.

Any reason you cannot assign a class to the inputs instead?

hans_cellc · 10-02-2012, 05:20 PM

Ok suddenly works but don't know why?
The following still don't work though:

Code:

<!-- onfocus it displays a border and diffirent text color -->	
input[type="text"]:focus {
	border: 3px solid #ff0000 !important; 
	color: #000000 !important;
	}
	
input[type="password"]:focus {
	border: 3px solid #ff0000 !important; 
	color: #000000 !important;
	}

I have attached all the files, this is still the beginning stages and don't even need to worry about such rills but I tried it and if something should work but does not I want to know why and the persue it to find out why.

Bellow all my coding thus far. (I am not wanting complete code, just explanations and suggestions)
Thanks

hans_cellc · 10-02-2012, 05:22 PM

You are say a class: would that be the same as my .home in my CSS code.

Keleth · 10-02-2012, 05:35 PM

Avoid !important... the more you use it, the more habitual it becomes, and the worse your code gets. Avoid it at all costs. Most uses of !important are because you didn't write your CSS properly.

Also, again, what browser are you using?

And yes, .{name of class} is how you definite a class in your CSS, but you also have to give your element a class tag with that name in it.

DanInMa · 10-02-2012, 05:36 PM

Quote:

Originally Posted by hans_cellc

You are say a class: would that be the same as my .home in my CSS code.

yes, thats correct

hans_cellc · 10-02-2012, 05:39 PM

Sorry, using:
IE9
Firefox - updated today
Chrome

I tried the !important to try and force it to work but nothing.

Like I said don't need it but if the code is correct why does it not work.

hans_cellc · 10-02-2012, 06:23 PM

I have also now tried classes in the input tag as well as adding a div with class outside the input tag. Still not working.

Sammy12 · 10-02-2012, 08:49 PM

On line 32 of my_css.css:

Code:

<!-- Change background colors and text alignment and colors on text and password boxes -->
input[type="text"] {
	background-image: url('site_graphics/seamless_green.jpg'); 
	color: #000000; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	text-align: left;
}

The red part is causing the problems, you need to delete it. That is an HTML comment, CSS comments are like this:

Code:

/* Change background colors and text alignment and colors on text and password boxes */

Quote:

Originally Posted by DanInMa

most likely the browsers you are testing in don't support that type of selector.
Any reason you cannot assign a class to the inputs instead?

The attribute selector works in all browsers including IE7. http://reference.sitepoint.com/css/c...ibuteselectors

I would suggest sticking with the selectors, they are more semantic. Instead of copy and pasting the same code use:

Code:

input[type="text"], input[type="password"] {
    background-image: url('site_graphics/seamless_green.jpg'); 
    color: #000000; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    text-align: left;
}

You can use classes like stated above if you like, just know that it won't change anything. I would however recommend removing any !important's.

hans_cellc · 10-02-2012, 10:15 PM

Thanks a lot, tested this feature and works on: Google Chrome,Firefox and IE8 and below but not on IE9

Code:

/* Onfocus it displays a border and diffirent text color */	
input[type="text"]:focus, input[type="password"]:focus {
	border: 2px solid #ff0000; 
	color: #000000;
	}

hans_cellc · 10-03-2012, 07:31 AM

Problem resolved for now, the focus seems to be a problem with IE9 only.

Keleth · 10-03-2012, 04:32 PM

Shouldn't... :focus is supposed to work work in IE8+