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 13 of 13
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    92
    Thanks
    38
    Thanked 0 Times in 0 Posts

    Some CSS not working in PHP

    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.

  • #2
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts
    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?

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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?

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    92
    Thanks
    38
    Thanked 0 Times in 0 Posts
    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
    Attached Files Attached Files

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    92
    Thanks
    38
    Thanked 0 Times in 0 Posts
    You are say a class: would that be the same as my .home in my CSS code.

  • #6
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts
    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.

  • Users who have thanked Keleth for this post:

    hans_cellc (10-03-2012)

  • #7
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Quote Originally Posted by hans_cellc View Post
    You are say a class: would that be the same as my .home in my CSS code.
    yes, thats correct

  • #8
    New Coder
    Join Date
    Oct 2011
    Posts
    92
    Thanks
    38
    Thanked 0 Times in 0 Posts
    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.

  • #9
    New Coder
    Join Date
    Oct 2011
    Posts
    92
    Thanks
    38
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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 View Post
    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.
    Last edited by Sammy12; 10-02-2012 at 09:01 PM.

  • Users who have thanked Sammy12 for this post:

    hans_cellc (10-02-2012)

  • #11
    New Coder
    Join Date
    Oct 2011
    Posts
    92
    Thanks
    38
    Thanked 0 Times in 0 Posts
    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;
    	}

  • #12
    New Coder
    Join Date
    Oct 2011
    Posts
    92
    Thanks
    38
    Thanked 0 Times in 0 Posts

    Smile Resolved

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

  • #13
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts
    Shouldn't... :focus is supposed to work work in IE8+


  •  

    Posting Permissions

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