CSS does not access the button inside if

Question

CSS does not access the button inside if

Navigation

#1 by (0 votes)

1

CSS is working with the button within else but it does not work with the button inside if . The button that is inside the if refers to the page with the user logged in and the else with the logged off user that is usually loading the directives made in the .css file, I would only like to know the reason why it appears that it "does not reads button within if "

?php
    session_start();
?>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="main-wrapper">

                <ul>
                    <li>

                        <a href="index.php">Home</a>
                    </li>
                </ul>
                <div class="nav-login">
                    <?php
                        if (isset($_SESSION['u_id'])) {
                            echo '<form action="includes/logout.inc.php" method="POST">
                        <button type="submit" name="submit">Deslogar</button>
                    </form>';
                        }else{
                            echo '<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
                    <form action="includes/login.inc.php" method="POST">
                        <input type="text" name="uid" placeholder="Apelido/e-mail">
                        <input type="password" name="pwd" placeholder="Senha">
                        <button type="submit" name="submit">Entre</button>

                    </form>
                    <a href="singup.php">Cadastre-se</a>';
                        }
                    ?>



                </div>
            </div>
        </nav>
    </header>

Input and button CSS

header .nav-login form input {
    float: left;
    width: 30%;
    height: 50%;
    padding: 0% 3%;
    margin-right: 2%;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 30px;
    background:#fff;
    border:1px solid #ccc;
    border-top-color:#d9d9d9;
    box-shadow:0 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
    cursor:default;

}
    header .nav-login form input:hover {
    float: left;
    width: 30%;
    height: 50%;
    padding: 0% 3%;
    margin-right: 2%;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 30px;
    background:#fff;
    border:1px solid #ccc;
    border-top-color:#d9d9d9;
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
    -moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
    cursor:default;
 }

header .nav-login form button {
    float: left;
    width: 17%;
    height: 50%;
    padding: 0% 3%;
    margin-right: 5%;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #696969;
    line-height: 30px;
    background:#fff;
    border:1px solid #ccc;
    border-top-color:#d9d9d9;
    box-shadow:0 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
    cursor:pointer;

}

header .nav-login form button:hover {
    float: left;
    width: 17%;
    height: 50%;
    padding: 0% 3%;
    margin-right: 5%;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    color: #000000;
    line-height: 30px;
    background:#fff;
    border:1px solid #ccc;
    border-top-color:#d9d9d9;
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
    -moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
    cursor:pointer;
}

I created the class only for the button and the problem remains, it follows the images

php html css button

asked by anonymous 28.03.2018 / 19:11

1 answer

Send Email Confirmation Display block does not work in Safari

score 0 · Accepted Answer

Dude running the .PHP on the local server ran normal. But only with CSS also to solve, just create a class pro button and not use that way header .nav-login form button

I know it's not the exact answer because it does not take the class, I noticed that if you remove <? CSS already works, but PHP does not. But sometimes this tip already solves your problem if you can create and put a class in <button>

See how you got here by running:

Exampleofmysuggestion.(IleftcommentsinCSS)

NOTE:

.btn-login { /* aqui era: "header .nav-login form button" */
    float: left;
    width: 17%;
    height: 50%;
    padding: 0% 3%;
    margin-right: 5%;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #696969;
    line-height: 30px;
    background:#fff;
    border:1px solid #ccc;
    border-top-color:#d9d9d9;
    box-shadow:0 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
    cursor:pointer;

}
.btn-login:hover { /* aqui era: "header .nav-login form button:hover" */
    float: left;
    width: 17%;
    height: 50%;
    padding: 0% 3%;
    margin-right: 5%;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    color: #000000;
    line-height: 30px;
    background:#fff;
    border:1px solid #ccc;
    border-top-color:#d9d9d9;
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
    -moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
    cursor:pointer;
}

<form action="includes/logout.inc.php" method="POST">
    <button class="btn-login" type="submit" name="submit">Deslogar</button>
</form>