I'm trying to get the admin login to center in the middle so that it looks better, here's the code.
<?php
session_start();
$username="user";
$password="123";
if(isset($_POST['username']) && $_POST['password'] == $password)
{
header("Location: mainpage.php");
}
else
{
?>
<html>
<head>
</head>
<body>
<div style='text-align:center'>
<h3>Welcome To Kontak</h3>
</div>
<hr /><br />
<form id='login' action="" method='post' accept-charset='UTF-8'>
<fieldset style="width:550px">
<legend>Admin Login</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<label for='username' >UserName:</label>
<input type='text' name='username' id='username' maxlength="50" />
<label for='password' >Password:</label>
<input type='password' name='password' id='password' maxlength="50" />
<input type='submit' name='submit' value='Submit' />
</fieldset>
</form>
</body>
</html>
<?php
}
?>
The admin login and the box is not centered and I'm sure the solution is pretty easy, but I'm not the best at php.
use style="margin: 0px auto; width: 550px;" for form like as below
or
you can use <fieldset style="margin: 0px auto;width:550px"> this also
<html>
<head>
</head>
<body>
<div style='text-align:center'>
<h3>Welcome To Kontak</h3>
</div>
<hr /><br />
<form id='login' action="" method='post' accept-charset='UTF-8' style="margin: 0px auto; width: 550px;">
<fieldset style="width:550px">
<legend>Admin Login</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<label for='username' >UserName:</label>
<input type='text' name='username' id='username' maxlength="50" />
<label for='password' >Password:</label>
<input type='password' name='password' id='password' maxlength="50" />
<input type='submit' name='submit' value='Submit' />
</fieldset>
</form>
</body>
</html>
This is not a php issue, You can do this with HTML and CSS.
I have created login form...
HTML
<form id="login" class="login">
<h2>Please log in</h2>
<label for="user" class="icon-user">User:</label>
<input class="user" id="user" />
<label for="password" class="icon-lock">Password:</label>
<input type="password" class="password" id="password" />
<input type="submit" value="Go" />
<ul class="extra">
<li>Forgot Password</li>
</ul>
</form>
<div class="blur"></div>
CSS
* {
user-select: none;
#include box-sizing(border-box);
}
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
body {
font-family:"Roboto", Arial, sans-serif;
font-weight: 400;
color: white;
}
.blur {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: url('http://www.wallgc.com/images/2013/05/abstract-wallpaper-abstract-wallpapers.jpg') no-repeat;
background-position: center bottom;
z-index: -1;
}
.login {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
width: 300px;
height: 300px;
color: rgba(#fff, .85);
display: inline-block;
font-size: 16px;
padding: 8px 12px;
text-decoration: none;
border-radius: 10px;
#include background-clip(padding-box);
#include box-shadow(inset -1px 1px 0px rgba(255, 255, 255, 0.3),
inset 1px 1px 0px rgba(255, 255, 255, 0.3)
);
border: 1px solid #000;
background-color: rgba(#000, .1);
#include background-image(linear-gradient(top, rgba(#000, .1), rgba(#000, .3)));
h2 {
margin: .5em;
text-align: center;
//#include background-image(linear-gradient(#fff, #eee));
//#include background-clip(text);
//-webkit-text-fill-color: transparent;
text-shadow: 0 1px 2px rgba(#000,.5);
font-weight: 900;
}
input,
label,
.extra {
outline: none;
position: absolute;
}
}
.user,
.password {
font-size: 150%;
color: #fff;
#include box-sizing(border-box);
height: 45px;
padding: .3em 20px .3em 40px;
width: 270px;
background: rgba(#000, .3);
border: 0;
border-radius: 25px;
box-shadow: 0 -1px 1px rgba(#fff, .8) inset;
}
.password {
padding: .3em 70px .3em 40px;
}
[for="user"],
.user {
top: 70px;
}
[for="password"],
.password,
input[type="submit"] {
top: 150px;
}
[for="password"],
[for="user"] {
text-indent: -9999px;
&:before {
text-indent: 0;
position: absolute;
top: 12px;
left: 15px;
font-size: 120%;
z-index: 1;
}
}
input[type="submit"] {
right: 17px;
height: 43px;
width: 60px;
background-color: #6bac14;
#include background-image(linear-gradient(to bottom, #8ff704, #1c8700));
border: 0;
border-radius: 0 25px 25px 0;
box-shadow: 0 5px 2px #a6ee40 inset, 1px 1px 0 rgba(#000, .5);
color: #fff;
text-transform: uppercase;
font-size: 110%;
text-shadow: 1px 1px 0 rgba(#000, .5);
text-align: center;
}
label[for="remember"] {
top: 210px;
left: 40%;
cursor: pointer;
white-space: nowrap;
}
#remember { visibility: hidden;}
.remember {
&:before,
&:after {
visibility: visible;
content: '';
position: absolute;
left:-35px;
top: 4px;
}
&:before {
right: -2px;
width: 30px;
height: 15px;
border-radius: 10px;
box-shadow: inset 0 1px 2px rgba(#000, .8);
#include background-image(linear-gradient(top, rgba(#000, .1) 0%, rgba(#000,.2) 100%));
}
&:after {
top: 2px;
width: 16px;
height: 16px;
background-color: #fff;
#include background-image(linear-gradient(top, #E5E5E5 0%, #878787 100%));
border: 1px solid rgba(#000,.5);
border-radius: 50%;
box-shadow: inset 0px 1px 1px white, 0 1px 1px rgba(0,0,0,.8);
right:11px;
}
}
#remember:checked + .remember {
&:before {
#include background-image(linear-gradient(top, #C25830 0%, #F69C3C 100%));
}
&:after {
left: -21px;
font-family: FontAwesome;
content: '\f00c';
color: rgba(#000, .4);
}
}
.extra {
margin: 0;
padding: 0;
list-style: none;
bottom: 0;
width: 100%;
height: 50px;
background: rgba(#000,.3);
left: 0;
border-radius: 0 0 10px 10px;
#include box-shadow(inset -1px 1px 0px rgba(255, 255, 255, 0.3),
inset 1px 0 0px rgba(255, 255, 255, 0.3)
);
border-top: 1px solid #000;
word-spacing: -1;
a {
display: inline-block;
text-decoration: none;
height: 100%;
&.facebook,
&.googlePlus {
top: 0;
background-position: left top;
background-repeat: no-repeat;
width: 49px;
text-indent: 9999px;
position: absolute;
top: 0;
right: 0;
&:before {
position: absolute;
top: 7px;
left: 12px;
text-indent: 0;
color: rgba(#fff, .8);
font-size: 180%;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}
}
&.forgetPassword {
width: 200px;
color: #fff;
line-height: 45px;
text-align: center;
text-shadow: 0 1px 1px rgba(black, 0.5);
&:before {
font-family: FontAwesome;
content: '\f0e2';
padding-right: 5px;
}
}
}
}
<form id='login' action="" method='post' accept-charset='UTF-8'>
to
<form id='login' action="" method='post' accept-charset='UTF-8' style='text-align: center'>
What I did here is add CSS Text-Align
PHP is the back-end stuff, it has nothing to do with what the browser interprets
Related
I am trying to make a way that I can decide in what table the name and the hour goes, by selecting it from one or both checkboxes.
For example, if I have a new name and hour, I can choose whether it is going in the table of "standard" or "advanced" or both by selecting it through the checkboxes.
#myform .plus, .minus {
text-decoration: none;
color: #fff;
background-color: #fdd818;
text-align: center;
letter-spacing: .5px;
-webkit-transition: .2s ease-out;
transition: .2s ease-out;
cursor: pointer;
}
.collapsible-header{
color: #ffffff;
}
.row{
margin: 0;
width: 100%;
}
.uren{
display: -webkit-inline-box;
padding-left: 10px;
padding-right: 10px;
}
.btn {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
background: #ffcc00;
padding: 5px 10px 5px 10px;
text-decoration: none;
}
.btn:hover {
background: #dbaf00;
text-decoration: none;
}
/* Pop up */
.letspop{
background-color: #fff;
width: 120px;
display: block;
margin: 5% auto;
padding: 20px;
position: relative;
text-align: center;
float: right;
margin-right: 20px;
margin-top: 0px;
}
.letspop:hover{
cursor: pointer;
}
.overlay{
display: none; /* Default Hidden */
position: fixed;
left: 0;
top: 0;
z-index: 1;
background-color: rgba(0,0,0,0.6);
height: 100%;
width: 100%;
}
.popup{
display: none; /* Default Hidden */
position: fixed;
left: 50%;
top: 5%;
z-index: 2;
background-color: #fff;
height: 450px;
width: 300px;
overflow: hidden;
padding: 40px;
transform: translate(-50%, 0);
}
#new_module{
width: 195px;
}
h1, h2{
color: steelblue ;
font-family: sans-serif;
text-align: center;
text-transform: uppercase;
line-height: 1;
}
h2{
color: dodgerblue ;
}
small{
color: #444 ;
font-size:0.4em;
display: block;
margin: 0.2rem auto 0;
}
.close{
position: absolute;
top: 8px;
right: 8px;
display: block;
color: #666666;
font-family: sans-serif;
}
.close:hover{
cursor: pointer;
color: #444444;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<form action="#" method="POST">
<div class="row">
<div class="input-field col s6">
<input id="new_module" type="text" class="validate">
<label class="active" for="new_module">Name</label>
</div>
</div>
<form action="#">
<p class="range-field">
<input type="range" id="test" min="0" max="20" />
</p>
</form>
<p>
<input type="checkbox" class="filled-in" id="standard"/>
<label for="standard">Standard</label>
</p>
<p>
<input type="checkbox" class="filled-in" id="advanced"/>
<label for="advanced">Advanced</label>
</p>
<hr>
<button class="btn waves-effect waves-light" type="submit" name="action">
<i class="material-icons right">send</i>
</button>
<div class="close">X</div>
</form>
You need to set name for html elements to submit to server.
try the following changes:
<form action="checkbox.php" method="post">
<p>
<input type="checkbox" class="filled-in" id="standard" name="chk[]" value="standard"/>
<label for="standard">Standard</label>
</p>
<p>
<input type="checkbox" class="filled-in" id="advanced" name="chk[]" value="advanced"/>
<label for="advanced">Advanced</label>
</p>
<input type="submit" />
</form>
and try the following php code to find selected checkbox
foreach($_POST['chk'] as $key => $chk){
if($chk == 'standard'){
// do some code
}
if($chk == 'advanced'){
// do some code
}
}
quick answer to begin to help you.
Do a "indatabase.php" where there is your SQL actions in. After, do something like :
<form action="/indatabase.php" method="POST">
See this :
https://stackoverflow.com/a/22836074/8695939
If you want a bit more security, use PHP PDO instead.
You can have sqli and PDO exemples here :
https://www.w3schools.com/php/php_mysql_insert.asp
I am using a plugin in wordpress to display a newsletter form and I try to style it using css. Above the newsletter signup I got a search form and I try to get the same style.
That's the html output and my css:
#sidebar {
font-size: 1em;
font-family: sans-serif, Arial;
color: #2A2A2A;
}
.screen-reader-text {
display: none;
}
#s {
width: 67%;
height: 22px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.247059);
outline: 0 none;
}
#searchsubmit {
width: 25%;
height: 26px;
margin-left: 3px;
background: #fff;
border: 1px solid #000;
transition: all 0.2s ease 0s;
font-size: 0.8em;
font-family: sans-serif, Arial;
float: right;
padding: 0;
}
#searchsubmit:hover {
background: #63B75D;
color: #fff;
border: 1px solid #63B75D;
}
#s:focus {
border: 1px solid #63B75D;
}
#haet-cleverreach-cleverreach_email {
width: 67%;
height: 22px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.247059);
outline: 0 none;
}
#haet-cleverreach-cleverreach_email:focus {
border: 1px solid #63B75D;
}
#haet-cleverreach-submit {
width: 25%;
height: 26px;
margin-left: 3px;
background: #fff;
border: 1px solid #000;
transition: all 0.2s ease 0s;
font-size: 0.8em;
font-family: sans-serif, Arial;
float: right;
padding: 0;
}
#haet-cleverreach-submit:hover {
background: #63B75D;
color: #fff;
border: 1px solid #63B75D;
}
<h3>Suche</h3>
<form role="search" method="get" id="searchform" class="searchform" action="http://backpackfamily.de/">
<div>
<label class="screen-reader-text" for="s">Suche nach:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Suchen" />
</div>
</form>
<h3>Newsletter</h3>
<div class="haet-cleverreach">
<form method="post" class="haet-cleverreach-form">
<input type="hidden" name="haet-cleverreach-is-widget" value="1">
<input type="hidden" name="haet-cleverreach-form-id" value="122548">
<input type="hidden" name="haet-cleverreach-list-id" value="891928">
<div class="haet-cleverreach-field-wrap label-inside type-description ">
<p>Melde dich zu unserem Newsletter an!</p>
</div>
<div class="haet-cleverreach-field-wrap label-inside type-email ">
<input type="email" id="haet-cleverreach-cleverreach_email" name="haet-cleverreach-cleverreach_email" value="" placeholder="E-Mail">
</div>
<div class="haet-cleverreach-field-wrap label-inside type-submit ">
<button type="submit" class="button" id="haet-cleverreach-submit">
→</button>
</div>
</form>
</div>
I don't know what to do, tried various things but nothing worked for me!
Thank you!!
add those styles to yours and it will work fine :
.haet-cleverreach-field-wrap.label-inside.type-email {
width: 67%;
float: left;
}
#haet-cleverreach-cleverreach_email{
width:100% !important;
}
You could add the following CSS:
#haet-cleverreach-cleverreach_email {
float: left;
}
I am having issue with this form. It emails me all the data it collects, but I do not get any images. To the genius amongst us, I didn't write any php to attempt to get the because I do not know which coding to use. Any assistance is deeply appreciated. Thank you
<?php
$accounttype = $_POST['accounttype'];
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$middlename = $_POST['middlename'];
$email = $_POST['email'];
$location = $_POST['location'];
$year = $_POST['year'];
$gender = $_POST['gender'];
$formcontent = "Status: $accounttype \r\n First: $firstname \r\n Last:$lastname \r\n Middle:$middlename \r\n Where:$location \r\n Grad:$year \r\n Gender:$gender";
$recipient = "john.doe#gmail.com";
$subject = "Registration Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!" . " -" . "<a href='../../index.html' style='text-decoration:none;color:#ff0099;'> Return Home</a>";
?>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding:0;
margin:0;
}
fieldset, img {
border: 0;
}
ol, ul, li {
list-style: none;
}
:focus {
outline: none;
}
body, input, textarea, select {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #4c4c4c;
}
p {
font-size: 12px;
width: 150px;
display: inline-block;
margin-left: 18px;
}
h1 {
font-size: 32px;
font-weight: 300;
color: #4c4c4c;
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
}
html{
background-color: #ffffff;
}
.testbox {
margin: 20px auto;
width: 343px;
-webkit-border-radius: 8px/7px;
-moz-border-radius: 8px/7px;
border-radius: 8px/7px;
background-color: #ebebeb;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
box-shadow: 1px 2px 5px rgba(0,0,0,.31);
border: solid 1px #cbc9c9;
}
input[type=radio] {
visibility: hidden;
}
form {
height:auto;
margin: 0 30px;
}
label.radio {
cursor: pointer;
text-indent: 35px;
overflow: visible;
display: inline-block;
position: relative;
margin-bottom: 15px;
}
label.radio:before {
background: #3a57af;
content:'';
position: absolute;
top:2px;
left: 0;
width: 20px;
height: 20px;
border-radius: 100%;
}
label.radio:after {
opacity: 0;
content: '';
position: absolute;
width: 0.5em;
height: 0.25em;
background: transparent;
top: 7.5px;
left: 4.5px;
border: 3px solid #ffffff;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
input[type=radio]:checked + label:after {
opacity: 1;
}
hr {
color: #a9a9a9;
opacity: 0.3;
}
input[type=text],input[type=email],input[type=number] {
width: 200px;
height: 39px;
-webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
-moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
background-color: #fff;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
box-shadow: 1px 2px 5px rgba(0,0,0,.09);
border: solid 1px #cbc9c9;
margin-left: -5px;
margin-top: 13px;
padding-left: 10px;
}
input[type=password] {
margin-bottom: 25px;
}
#icon {
display: inline-block;
width: 30px;
background-color: #3a57af;
padding: 8px 0px 8px 15px;
margin-left: 15px;
-webkit-border-radius: 4px 0px 0px 4px;
-moz-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
color: white;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
box-shadow: 1px 2px 5px rgba(0,0,0,.09);
border: solid 0px #cbc9c9;
}
.gender {
margin-left: 30px;
margin-bottom: 30px;
}
.accounttype {
margin-left: 8px;
margin-top: 20px;
}
.button {
font-size: 14px;
font-weight: 600;
color: white;
padding: 6px 25px 0px 20px;
margin: 10px 8px 20px 0px;
display: inline-block;
float: right;
text-decoration: none;
width: auto; height: 27px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #3a57af;
-webkit-box-shadow: 0 3px rgba(58,87,175,.75);
-moz-box-shadow: 0 3px rgba(58,87,175,.75);
box-shadow: 0 3px rgba(58,87,175,.75);
transition: all 0.1s linear 0s;
top: 0px;
position: relative;
}
.button:hover {
top: 3px;
background-color:#2e458b;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
<html>
<body>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
<?php echo $output; ?>
<div class="testbox">
<h1>Registration</h1>
<form action="assets/php/mail.php" method="post">
<hr>
<div class="accounttype">
<input type="radio" value="student" id="student" name="accounttype" checked/>
<label for="student" class="radio" chec>Student</label>
<input type="radio" value="faculty" id="faculty" name="accounttype" />
<label for="faculty" class="radio">Faculty</label>
</div>
<hr>
<label id="icon" for="name"><i class="icon-user "></i></label>
<input type="text" name="firstname" id="firstname" placeholder="First Name" required/>
<label id="icon" for="name"><i class="icon-user"></i></label>
<input type="text" name="lastname" id="lastname" placeholder="Last Name" required/>
<label id="icon" for="name"><i class="icon-shield"></i></label>
<input type="text" name="middlename" id="middlename" placeholder="Middle Name"/>
<hr>
<label id="icon" for="name"><i class="icon-envelope "></i></label>
<input type="email" name="email" id="email" placeholder="Email Address" required/>
<label id="icon" for="name"><i class="icon-map-marker "></i></label>
<input type="text" name="location" id="location" placeholder="City, State" required/>
<label id="icon" for="name"><i class="icon-shield"></i></label>
<input type="number" name="year" id="year" placeholder="Graduation Year" required/>
<hr>
<div class="gender">
<input type="radio" value="male" id="male" name="gender" checked/>
<label for="male" class="radio" chec>Male</label>
<input type="radio" value="female" id="female" name="gender" />
<label for="female" class="radio">Female</label>
<hr>
<p>Upload full body image</p>
<input type="file" accept="image/*;capture=camera">
</div>
<p>By clicking Register, you agree on our terms and condition.</p>
<input type="submit" class="button" value="Send" />
</form>
</div>
</body>
</html>
It is because you do not upload the images therefore sending the location of file does not help.
I am not going to provide the implementation as it depends on the abstract solution you choose:
a) upload the image to your server and send the image to you
b) upload the image to a file sharing website and send the image to you
First, You need to upload image to your server, then create a link http://abcd.com/directory/uploaded-image.jpg and send it in email. For this you could use very simple php function
move_uploaded_files
see example here
In the below code i have placed the controller.the actual result is ligin is in center position but it is in the bottom.My expected result is login should come in center of the page.pls help me to do this.
Controller:
<html>
<head>
</head>
<title>login_form</title>
<BODY onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload=""><div class="container">
<div class="row">
<div class="span4 logo">
<img src="<?php echo base_url('img/logosl.png'); ?>" style="margin-bottom:7px; margin-top:7px;"/>
</div>
<center ><div id="login_form" >
<h1>Login!</h1>
<form action="<?php echo base_url(); ?>index.php/login/validate_credentials" method="post" >
<input type="text" name="username" required placeholder="username" style="height: 25px;" value="" />
<input type="text" name="password" required placeholder="password" style="height: 25px;" value="" />
<input type="text" name="college_name" required placeholder="college_name" style="height: 25px;" value="" />
<input type="submit" name="submit" value="Login" class="btn-success btn" />
Create Account
</form>
</div></center><!-- end login_form-->
<?php $this->load->view('includes/header'); ?>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/style1.css" />
<?php $this->load->view('includes/footer'); ?>
</body>
</html>
css
body {
background:#FFFFFF;
margin: 0;
padding: 0;
font-family: arial;
}
#login_form {
width: 300px;
background: #f0f0f0 url(../img/login_bg.jpg) repeat-x 0 0;
border: 1px solid white;
margin: 250px auto 0;
padding: 1em;
-moz-border-radius: 3px;
}
h1,h2,h3,h4,h5 {
margin-top: 0;
font-family: arial black, arial;
text-align: center;
}
input[type=text], input[type=password] {
display: block;
margin: 0 0 1em 0;
width: 280px;
border: 5px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
padding: 1em;
}
input[type=submit], form a {
border: none;
margin-right: 1em;
padding: 6px;
text-decoration: none;
font-size: 12px;
-moz-border-radius: 4px;
background: #348075;
color: white;
box-shadow: 0 1px 0 white;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
}
input[type=submit]:hover, form a:hover {
background: #287368;
cursor: pointer;
}
/* Validation error messages */
.error {
color: #393939;
font-size: 15px;
}
fieldset {
width: 300px;
margin: auto;
margin-bottom: 2em;
display: block;
}
/* FOR FUN */
h1 {
text-shadow: 0 1px 0 white;
}
/* Not necessary. Just the "tutorial created by" stuff at the bottom */
#tutInfo {
background: #e3e3e3;
border-top: 1px solid white;
position: absolute;
bottom: 0;
width: 100%;
padding: .7em .7em .7em 2em;
}
You are missing < / div>
<div class="row">
<div class="span4 logo">
<img src="<?php echo base_url('img/logosl.png'); ?>" style="margin-bottom:7px; margin-top:7px;"/>
</div>
**</div>**
My webpage that I am working on works fine in other browsers except IE. I am using IE 10 (the preview version) so I can use shadows, and the <br /> isn't working so I made an IE-specific css so that if the browser is IE, it loads the IE css. Well, when I go to change the margins for the .homepagetable, it also applies the css to the other browsers. The difference between main.css and all-ie-only.css is the .homepagetable.
Index.php
<? include("inc/incfiles/header.inc.php"); ?>
<?
$reg = #$_POST['reg'];
//declaring variables to prevent errors
$fn = ""; //First Name
$ln = ""; //Last Name
$un = ""; //Username
$em = ""; //Email
$em2 = ""; //Email 2
$pswd = ""; //Password
$pswd2 = ""; //Password 2
$d = ""; //Sign up Date
$u_check = ""; //Check if username exists
//registration form
$fn = strip_tags(#$_POST['fname']);
$ln = strip_tags(#$_POST['lname']);
$un = strip_tags(#$_POST['username']);
$em = strip_tags(#$_POST['email']);
$em2 = strip_tags(#$_POST['email2']);
$pswd = strip_tags(#$_POST['password']);
$pswd2 = strip_tags(#$_POST['password2']);
$d = date("y-m-d"); // Year - Month - Day
if ($reg) {
if ($em==$em2) {
// Check if user already exists
$u_check = mysql_query("SELECT username FROM users WHERE username='$un'");
// Count the amount of rows where username = $un
$check = mysql_num_rows($u_check);
if ($check == 0) {
//check all of the fields have been filled in
if ($fn&&$ln&&$un&&$em&&$em2&&$pswd&&$pswd2) {
// check that passwords match
if ($pswd==$pswd2) {
// check the maximum length of username/first name/last name does not exceed 25 characters
if (strlen($un)>25||strlen($fn)>25||strlen($ln)>25) {
echo "The maximum limit for username/first name/last name is 25 characters!";
}
else
{
// check the length of the password is between 5 and 30 characters long
if (strlen($pswd)>30||strlen($pswd)<5) {
echo "Your password must be between 5 and 30 characters long!";
}
else
{
//encrypt password and password 2 using md5 before sending to database
$pswd = md5($pswd);
$pswd2 = md5($pswd2);
$query = mysql_query("INSERT INTO users VALUES ('','$un','$fn','$ln','$em','$pswd','d','0')");
die("<h2>Welcome to Rebel Connect</h2>Login to your account to get started.");
}
}
}
else {
echo "Your passwords don't match!";
}
}
else
{
echo "Please fill in all fields";
}
}
else
{
echo "Username already taken.";
}
}
else {
echo "Your e-mails don't match!";
}
}
?>
<?
//Login Script
if (isset($_POST["user_login"]) && isset($_POST["password_login"])) {
$user_login = preg_replace('#[^A-Za-z0-9]#i', '', $_POST["user_login"]); // filter everything but numbers and letters
$password_login = preg_replace('#[^A-Za-z0-9]#i', '', $_POST["password_login"]); // filter everything but numbers and letters
$password_login=md5($password_login);
$sql = mysql_query("SELECT id FROM users WHERE username='$user_login' AND password='$password_login' LIMIT 1"); // query the person
//Check for their existance
$userCount = mysql_num_rows($sql); //Count the number of rows returned
if ($userCount == 1) {
while($row = mysql_fetch_array($sql)){
$id = $row["id"];
}
$_SESSION["id"] = $id;
$_SESSION["user_login"] = $user_login;
$_Session["password_login"] = $password_login;
exit("<meta http-equiv=\"refresh\" content=\"0\">");
} else {
echo 'That information is incorrect, try again';
exit();
}
}
?>
<table class="homepageTable">
<tr>
<td width="60%" valign="top">
<h2>Already a member? Login below.</h2>
<form action="index.php" method="post" name="form1" id="form1">
<input type="text" size="25" name="user_login" id="user_login" placeholder="username" />
<br />
<input type="password" size="25" name="password_login" id="password_login" placeholder="password" />
<br />
<input type="submit" name="button" id="button" value="Login to your account!">
</form>
</td>
<td width="40%" valign="top">
<h2>Sign up below...</h2>
<form action="#" method="post">
<input type="text" size="25" name="fname" placeholder="First Name" value="<? echo $fn; ?>">
<input type="text" size="25" name="lname" placeholder="Last Name" value="<? echo $ln; ?>">
<input type="text" size="25" name="username" placeholder="Username" value="<? echo $un; ?>">
<input type="text" size="25" name="email" placeholder="Email" value="<? echo $em; ?>">
<input type="text" size="25" name="email2" placeholder="Re-enter Email" value="<? echo $em2; ?>">
<input type="password" size="25" name="password" placeholder="password" value="<? echo $pswd; ?>">
<input type="password" size="25" name="password2" placeholder="Re-enter Password" value="<? echo $pswd2; ?>"><br />
<input type="submit" name="reg" value="Sign Up!">
</form>
</td>
</tr>
</table>
</body>
</html>
header.inc.php
<?
include ("inc/scripts/mysql_connect.inc.php");
session_start();
if (!isset($_SESSION["user_login"])) {
}
else
{
header("location: home.php");
}
?>
<html>
<head>
<if !IE>
<link href="css/main.css" rel="stylesheet" type="text/css">
<if IE>
<link rel="stylesheet" type="text/css" href="css/all-ie-only.css" />
<title>Rebel Reach - PHS Student Social Network</title>
</head>
<body>
<div class="headerMenu">
<div id="wrapper">
<div class="logo">
<img src="img/find_friends_logo.png">
</div>
<div class="search_box">
<form method="get" action="search.php" id="search">
<input name="q" type="text" size="60" placeholder="Search..." />
</form>
</div>
<div id="menu">
Home
About
Sign Up
Login
</div>
</div>
</div>
<br />
<br />
<br />
<br />
main.css
* {
margin: 0px;
padding: 0px;
font-family: Arial;
font-size: 12px;
background-color: #eff5f9
}
.headerMenu {
background-image:url(../img/menu_bg.png);
height: 56px;
border-bottom: 0px;
width: 100%;
position:fixed;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
background-image:url(../img/menu_bg.png);
}
.logo {
margin-left: 0px;
width: 125px;
}
.logo img {
padding-top: 7px;
width: 150px;
height: 38px;
background-image:url(../img/menu_bg.png);
}
.search_box {
background-image: url(../img/menu_bg.png);
position: absolute;
top: 13px;
margin-left: 150px;
border:inset 2px
}
#search input[type="text"] {
background: url(../img/search-white.png) no-repeat 10px 6px #666;
outline: none;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
width: 350px;
padding: 6px 15px 6px 35px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
margin-bottom: 0px;
margin-top: 0px;
}
#search input[type="text"]:focus {
background: url(../img/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 350px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
#media screen and (max-width:1280px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 16px;
margin-right: 4%;
}
}
#media screen and (min-width:1280px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 16px;
margin-right: 6%;
}
}
#media screen and (min-width:1400px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 19px;
margin-right: 10%;
}
}
#media screen and (min-width:1920px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 19px;
margin-right: 25%;
}
}
#menu a {
color: #ffffff;
text-decoration: none;
font-size: 14px;
background-image:url(../img/menu_bg.png);
background-repeat: no-repeat;
padding-top: 16px;
padding-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
#menu a:hover {
color: #ffffff;
text-decoration: none;
font-size: 14px;
background-image:url(../img/menu_bg_hover_mouse_over.png);
background-repeat: no-repeat;
padding-top: 16px;
padding-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
h2 {
font-family: Arial;
font-size: 18px;
padding: 5px;
color: #0084C6;
}
input[type="text"] {
background-color: #FFFFFF;
border: 1px solid #E2E2E2;
font-size: 15px;
padding: 5px;
width: 300px;
margin-bottom: 3px;
margin-top: 3px;
outline:none;
}
input[type="text"]:hover {
border: 1px solid #0084C6;
}
input[type="password"] {
background-color: #FFFFFF;
border: 1px solid #E2E2E2;
font-size: 15px;
padding: 5px;
width: 300px;
margin-bottom: 3px;
margin-top: 3px;
outline:none;
}
input[type="password"]:hover {
border: 1px solid #0084C6;
}
input[type="submit"] {
background-color: #006fc4;
border: 1px solid #00508d;
font-size: 15px;
color: #FFFFFF;
padding: 5px;
margin-bottom: 3px;
margin-top: 3px;
border-radius: 7px;
}
.homepageTable {
padding: 10px;
}
all-ie-only.css
* {
margin: 0px;
padding: 0px;
font-family: Arial;
font-size: 12px;
background-color: #eff5f9
}
.headerMenu {
background-image:url(../img/menu_bg.png);
height: 56px;
border-bottom: 0px;
width: 100%;
position:fixed;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
background-image:url(../img/menu_bg.png);
}
.logo {
margin-left: 0px;
width: 125px;
}
.logo img {
padding-top: 7px;
width: 150px;
height: 38px;
background-image:url(../img/menu_bg.png);
}
.search_box {
background-image: url(../img/menu_bg.png);
position: absolute;
top: 13px;
margin-left: 150px;
border:inset 2px
}
#search input[type="text"] {
background: url(../img/search-white.png) no-repeat 10px 6px #666;
outline: none;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
width: 350px;
padding: 6px 15px 6px 35px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
margin-bottom: 0px;
margin-top: 0px;
}
#search input[type="text"]:focus {
background: url(../img/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 350px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
}
#media screen and (max-width:1280px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 16px;
margin-right: 4%;
}
}
#media screen and (min-width:1280px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 16px;
margin-right: 6%;
}
}
#media screen and (min-width:1400px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 19px;
margin-right: 10%;
}
}
#media screen and (min-width:1920px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 19px;
margin-right: 25%;
}
}
#menu a {
color: #ffffff;
text-decoration: none;
font-size: 14px;
background-image:url(../img/menu_bg.png);
background-repeat: no-repeat;
padding-top: 16px;
padding-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
#menu a:hover {
color: #ffffff;
text-decoration: none;
font-size: 14px;
background-image:url(../img/menu_bg_hover_mouse_over.png);
background-repeat: no-repeat;
padding-top: 16px;
padding-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
h2 {
font-family: Arial;
font-size: 18px;
padding: 5px;
color: #0084C6;
clear: both;
}
input[type="text"] {
background-color: #FFFFFF;
border: 1px solid #E2E2E2;
font-size: 15px;
padding: 5px;
width: 300px;
margin-bottom: 3px;
margin-top: 3px;
outline:none;
}
input[type="text"]:hover {
border: 1px solid #0084C6;
}
input[type="password"] {
background-color: #FFFFFF;
border: 1px solid #E2E2E2;
font-size: 15px;
padding: 5px;
width: 300px;
margin-bottom: 3px;
margin-top: 3px;
outline:none;
}
input[type="password"]:hover {
border: 1px solid #0084C6;
}
input[type="submit"] {
background-color: #006fc4;
border: 1px solid #00508d;
font-size: 15px;
color: #FFFFFF;
padding: 5px;
margin-bottom: 3px;
margin-top: 3px;
border-radius: 7px;
}
.homepageTable {
padding: 10px;
}
You should definitely listen to #SDC's comment regarding security flaws. That's a far more significant issue than cross-browser compatibility.
Aside from that, your code isn't working because this:
<if !IE>
<link href="css/main.css" rel="stylesheet" type="text/css">
<if IE>
<link rel="stylesheet" type="text/css" href="css/all-ie-only.css" />
isn't valid.
IE10 should be compliant with the same standards as other browsers. It sounds like IE10 is running in quirks mode at the moment. Dropping a <!DOCTYPE> in immediately before your <html> should fix the problem. Then, you don't need to use your conditionals.
If you're still stuck on the idea of using conditionals, try something like:
<link href="css/main.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/all-ie-only.css" />
<![endif]-->
But, this includes both main.css and all-ie-only.css.