Reputation:

CSS not working on my page

Here's my NEW PHP

    <?php

    /**
    * Make sure you started your'e sessions!
    * You need to include su.inc.php to make SimpleUsers Work
    * After that, create an instance of SimpleUsers and your'e all set!
    */

    session_start();
    require_once(dirname(__FILE__)."/simpleusers/su.inc.php");

    $SimpleUsers = new SimpleUsers();

    // Login from post data
    if( isset($_POST["username"]) )
    {

        // Attempt to login the user - if credentials are valid, it returns the users id, otherwise (bool)false.
        $res = $SimpleUsers->loginUser($_POST["username"], $_POST["password"]);
        if(!$res)
            $error = "You supplied the wrong credentials.";
        else
        {
                header("Location: users.php");
                exit;
        }

    } // Validation end

echo '<link href="css/style.css" rel="stylesheet">';


?>
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>CSS3 Button Demo</title>

  <link rel="stylesheet" href="css/style.css">

</head>
<body>

    <?php if( isset($error) ): ?>
        <p>
            <?php echo $error; ?>
        </p>
        <?php endif; ?>

        <form method="post" action="">


                <input type="username" name="username" id="username" placeholder="Username" />

                <input type="password" name="password" id="password" placeholder="Password" />

                <input type="submit" name="submit" value="Login" />

</body>
</html>

        <?php if( isset($error) ): ?>
        <p>
            <?php echo $error; ?>
        </p>
        <?php endif; ?>

        <form method="post" action="">

and here's my NEW CSS:

    input[type=password] {
  background: url(../img/keyIcon.png) 12px 11px no-repeat, -moz-linear-gradient(top, #f7f7f8 0%, #ffffff 100%);
  background: url(../img/keyIcon.png) 12px 11px no-repeat, -webkit-linear-gradient(top, #f7f7f8 0%, #ffffff 100%);
  background: url(../img/keyIcon.png) 12px 11px no-repeat, -o-linear-gradient(top, #f7f7f8 0%, #ffffff 100%);
  background: url(../img/keyIcon.png) 12px 11px no-repeat, -ms-linear-gradient(top, #f7f7f8 0%, #ffffff 100%);
  background: url(../img/keyIcon.png) 12px 11px no-repeat, linear-gradient(to bottom, #f7f7f8 0%, #ffffff 100%);
  border-radius: 3px;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.05) inset;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 13px;
  color: #222222;
  position: relative;
  height: 36px;
  width: 300px;
  padding-left: 30px;
}
input[type=password]::-webkit-input-placeholder {
  color: #999999;
}
input[type=password]:-moz-placeholder {
  color: #999999;
}
input[type=password]:focus {
  box-shadow: 0 1px 0 #2392f3 inset, 0 -1px 0 #2392f3 inset, 1px 0 0 #2392f3 inset, -1px 0 0 #2392f3 inset, 0 0 4px rgba(35, 146, 243, 0.5);
  outline: none;
  background: url(../img/keyIcon.png) 12px 11px no-repeat, #ffffff;
}

input[type=username] {
  background: url() 12px 11px no-repeat, -moz-linear-gradient(top, #f7f7f8 0%, #ffffff 100%);
  background: url() 12px 11px no-repeat, -webkit-linear-gradient(top, #f7f7f8 0%, #ffffff 100%);
  background: url() 12px 11px no-repeat, -o-linear-gradient(top, #f7f7f8 0%, #ffffff 100%);
  background: url() 12px 11px no-repeat, -ms-linear-gradient(top, #f7f7f8 0%, #ffffff 100%);
  background: url() 12px 11px no-repeat, linear-gradient(to bottom, #f7f7f8 0%, #ffffff 100%);
  border-radius: 3px;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.05) inset;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 13px;
  color: #222222;
  position: relative;
  height: 36px;
  width: 300px;
  padding-left: 30px;
}
input[type=username]::-webkit-input-placeholder {
  color: #999999;
}
input[type=username]:-moz-placeholder {
  color: #999999;
}
input[type=username]:focus {
  box-shadow: 0 1px 0 #2392f3 inset, 0 -1px 0 #2392f3 inset, 1px 0 0 #2392f3 inset, -1px 0 0 #2392f3 inset, 0 0 4px rgba(35, 146, 243, 0.5);
  outline: none;
  background: url() 12px 11px no-repeat, #ffffff;
}

The input boxes (password, username) are not themed with the CSS, they just go to the default ones. The same code (minus the PHP) works fine in HTML, any ideas on what's causing the CSS to be invalid in PHP? I have checked over some other questions and re-formatted the code 2 times now. Also once I get this working how would I center the login box with CSS?

EDIT: Now only the username box is not themed - check over the changes I made.

Thanks!

Upvotes: 0

Answers (4)

airi

Reputation: 585

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

<style type="text/css">

        h1
        {
            color: #000000;
            border-bottom: 2px solid #000000;
            margin-bottom: 15px;
        }

        p { margin: 10px 0px; }
        p.faded { color: #A0A0A0; }

</style>

i think like this is much more better

Upvotes: 0

matcartmill

Reputation: 1593

Your head element is very messy. Paste this in it's place and let me know if that fixes anything.

<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <style type="text/css">

    h1
    {
        color: #000000;
        border-bottom: 2px solid #000000;
        margin-bottom: 15px;
    }

    p { margin: 10px 0px; }
    p.faded { color: #A0A0A0; }
  </style>
</head>

Your style.css was being called inside of your tag.

Upvotes: 2

Alex A.

Reputation: 2603

You've mixed a bit. link tag is for external css files. style is for direct css code. It is not even valid HTML to put link tag inside style. Link is simply ignored. Just put link outside of style. Given that the path to css is correct everything should function. Also, inside style is not valid.

Upvotes: 0

Philip

Reputation: 1078

<link rel="stylesheet" type="text/css" href="css/style.css /> you forgot the " and you have a typo in your first input in css.

Upvotes: 0

CSS not working on my page

Answers (4)

Related Questions