Quote:
Originally Posted by Black1
Mey man.. Thanks for the help. I made it work but I had 2 problems.
1) With firefox & chrome everything was good but with IE and Opera was not working good
2) When I was using it everyone had to try to login 2 times and I dont know why. With the first login attemp I was getting an error, an with the second login attemp everything was ok
|
Not sure why you getting an error during login, will have a look you can try and use my globle.php from my other login page.
It will not work with IE. I will add some java script that will redirect to a basic login.php for any IE users .
I had a look and see that some of the css is not playing nice in Opera...Will fix it. I know that it works Chrome,Firefox and Safari.
I fixed the Opera css problem...
loginfoot.php
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style>
body {
background: -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-weight: bolder;
color: #CCCCCC;
background-attachment: fixed;
background-image: url(http://www.flicksandbits.com/wp-content/uploads/2012/03/mb3.jpg);
background-repeat: no-repeat;
background-position: center 1px;
}
.footerbar {
height: 30px;
width: 100%;
position: fixed;
bottom: 0px;
background: -moz-linear-gradient(top, #1B0BEC, #000); /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1B0BEC', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#1B0BEC), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #1B0BEC, #000); /* for firefox 3.6+ */
background-image: -o-linear-gradient(top,rgb(27,11,236),rgb(0,0,0));
left: 0px;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.7;
/* Safari 1.x */
-khtml-opacity: 0.7;
/* Good browsers */
opacity: 0.7;
}
.footerbar .hovermenu {
position: relative;
bottom: 13px;
}
.footerbar .hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 18px;
}
.footerbar .hovermenu ul li{
list-style: none;
display: inline;
}
.footerbar .hovermenu ul li a{
text-decoration: none;
float: left;
color: #FFFFFF;
background-color: #FFF2BF;
height: 30px;
padding-top: 2px;
padding-right: 0.5em;
padding-bottom: 2px;
padding-left: 0.5em;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1B0BEC', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#1B0BEC), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #1B0BEC, #000); /* for firefox 3.6+ */
background-image: -o-linear-gradient(top,rgb(27,11,236),rgb(0,0,0));
font-weight: bolder;
}
.footerbar .hovermenu ul li a:hover{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #333, #000); /* for firefox 3.6+ */
background-image: -o-linear-gradient(top,rgb(27,11,236),rgb(0,0,00));
}
-->
</style>
<body>
<div class="footerbar">
<div class="hovermenu">
<ul>
<li><a href="login.php">Home!</a></li>
<li><a href="signup.php">Signup!</a></li>
<li><a href="recover.php">Recover!</a></li>
<li><a href="contactus.php">Contact us!</a></li>
<li><a href="javascript:animatedcollapse.toggle('kelly')"></a><a href="javascript:animatedcollapse.toggle('kelly')">Login!</a></li>
</ul>
</div>
</div>
</body>
</html>
</html>
loginfoot1.php
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style>
body {
background: -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-weight: bolder;
color: #CCCCCC;
background-attachment: fixed;
background-image: url(http://www.flicksandbits.com/wp-content/uploads/2012/03/mb3.jpg);
background-repeat: no-repeat;
background-position: center 1px;
}
.footerbar {
height: 30px;
width: 100%;
position: fixed;
bottom: 0px;
background: -moz-linear-gradient(top, #1B0BEC, #000); /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1B0BEC', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#1B0BEC), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #1B0BEC, #000); /* for firefox 3.6+ */
background-image: -o-linear-gradient(top,rgb(27,11,236),rgb(0,0,0));
left: 0px;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.7;
/* Safari 1.x */
-khtml-opacity: 0.7;
/* Good browsers */
opacity: 0.7;
}
.footerbar .hovermenu {
position: relative;
bottom: 0px;
}
.footerbar .hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 18px;
}
.footerbar .hovermenu ul li{
list-style: none;
display: inline;
}
.footerbar .hovermenu ul li a{
text-decoration: none;
float: left;
color: #FFFFFF;
background-color: #FFF2BF;
height: 30px;
padding-top: 2px;
padding-right: 0.5em;
padding-bottom: 2px;
padding-left: 0.5em;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1B0BEC', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#1B0BEC), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #1B0BEC, #000); /* for firefox 3.6+ */
background-image: -o-linear-gradient(top,rgb(27,11,236),rgb(0,0,0));
font-weight: bolder;
}
.footerbar .hovermenu ul li a:hover{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #333, #000); /* for firefox 3.6+ */
background-image: -o-linear-gradient(top,rgb(27,11,236),rgb(0,0,00));
}
-->
</style>
<body>
<div class="footerbar">
<div class="hovermenu">
<ul>
<li><a href="login.php">Home!</a></li>
<li><a href="signup.php">Signup!</a></li>
<li><a href="recover.php">Recover!</a></li>
<li><a href="contactus.php">Contact us!</a></li>
</ul>
</div>
</div>
</body>
</html>
Im going to do away with having css on the page and rather include it into login.css