1
  • Problem 1: There is a white space at my bottom but i can't figure out the problem in my css file . I am using chrome and it doesn't have problem on IE. Please kindly help .

Problem 1

  • Problem 2: The bottom of the error message block can not display correctly . It should be a round sharp like graph .I have group the different part of css file. It is in login group

Problem2

The login page css stylesheet:

body {
padding: 50px;
margin: 50px;
background: url(../images/bg.jpg) repeat;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
}

div, ul, li, h1, h2, h3, h4, h5 {
margin: 0;
padding: 0;
}

a {
color: #fff;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

h1 {
font-weight: normal;
text-align: center;
}

div.clear {
clear: both;
height: 1px;
line-height: 1px;
font-size: 1px;
}

/* ***************************
       Layout
**************************** */

div#wrapper {
text-align: left;
margin: 0 auto;
width: 960px;
}


/* ***************************
       Header
**************************** */

div#header {
position: relative;
height: 1%;
margin-bottom: 20px;
padding: 30px 30px 0 30px;
}

div#header h1 {
text-align: left;
}
div#header h1 a, div#header h1 span {
background: url(../images/survs_logo_01.gif) bottom left no-repeat;
display: block;
width: 270px;
padding-top: 10px;
text-indent: -9999px;
overflow: hidden;
outline: none;
}

div#header ul {
position: absolute;
right: 30px;
bottom: -5px;
}
div#header ul li {
float: left;
list-style: none;
font-weight: bold;
}
div#header ul li a {
color: #666;
display: block;
padding: 7px 7px 7px 7px;
margin: 0 0.5em;
font-size: 14px;
outline: none;
font-family: Arial, sans-serif; /* fixes ff mac 1px helvetica line height problem > http://archivist.incutio.com/viewlist/css-discuss/96327 */
}
div#header ul li a:hover {
text-decoration: none;
background: #ececde;
}
div#header ul li a:hover span {
border-bottom: 1px dotted #999;
}

div#header ul li.login {
margin-left: 0.85em;
}
div#header ul li.login a {
display: block;
color: #fff;
font-size: 14px;
background: url(../images/login_01.gif) bottom left no-repeat;
margin: 0;
text-align: center;
cursor: pointer;
width: 66px;
padding: 6px 0 6px 0; 
}
div#header ul li.login a:hover {
background: url(../images/login_01.gif) bottom left no-repeat;
}
div#header ul li.login a:hover span {
border: none;
}

div#header ul li.selected a span {
border-bottom: 1px dotted #666;
}





/* ***************************
       Content
**************************** */

div#content {
padding: 20px 30px 20px 30px;
color: #515348;
font-size: 76%;
line-height: 1.6em;
height: 1%;
background: #f5f5ef;
}

body.home div#content {
background: #f5f5ef url(../images/content_grad_01.gif) top left repeat-x;
}


div#content a {
color: #36808e;
border-bottom: 1px solid #d0e8e7;
}
div#content a:hover {
background: #deefee;
text-decoration: none;
}


div#topcorners {
background: #333;
height: 10px;
width: 940px;
margin: 0 auto;
position: relative;
}
div#topcorners div.cleft {
position: absolute;
width: 10px;
height: 10px;
background: #333 url(../images/content_corner_sprite2_01.gif) 0px 0px no-repeat;
top: 0;
left: -10px;
}
div#topcorners div.cright {
position: absolute;
width: 10px;
height: 10px;
background: #333 url(../images/content_corner_sprite2_01.gif) -12px 0px no-repeat;
top: 0;
right: -10px;
}

div#bottomcorners {
background: #f5f5ef;
height: 10px;
width: 940px;
margin: 0 auto;
position: relative;
}
div#bottomcorners div.cleft {
position: absolute;
width: 10px;
height: 10px;
background: url(../images/content_corner_sprite2_01.gif) 0px -12px no-repeat;
top: 0;
left: -10px;
}
div#bottomcorners div.cright {
position: absolute;
width: 10px;
height: 10px;
background: url(../images/content_corner_sprite2_01.gif) -12px -12px no-repeat;
top: 0;
right: -10px;
}





/* ***************************
     Groups
**************************** */

div.groupscontainer {
/*margin: 20px -30px 25px -30px;*/
margin: 20px 0 25px 0;
padding: 0px 5px 0 0;
/* border-bottom: 1px solid #E3E3CF; */
border-top: 3px solid #E3E3CF;
background: #f5f5ef url(../images/content_grad_02.gif) 10px -60px repeat-x;
}

div#content div.groups {
float: left;
width: 208px;
margin-top: 10px;
font-size: 11px;
}

div#content div.groups h4 {
font-size: 14px;
}
div#content div.groups p {
margin: 7px 0 10px 0;
color: #717364;
}
div#content div.groups ul {
padding-left: 15px;
color: #717364;
color: #5e8a33;
}
div#content div.groups ul li span {
color: #717364;
}

div#groups1 {
margin-left: 11px;
/*margin-left: 30px;*/
padding-right: 5px;
border-right: 1px dotted #DADABE;
}
div#groups2 {
margin-left: 11px;
padding-right: 5px;
border-right: 1px dotted #DADABE;
}
div#groups3 {
margin-left: 11px;
padding-right: 5px;
border-right: 1px dotted #DADABE;
}
div#groups4 {
margin-left: 11px;
padding-right: 0px;
border-right: none;
}



/* ***************************
       Footer
**************************** */


div#footer {
color: #808372;
text-align: center;
font-size: 12px;
margin: 25px 0 30px 0;
}
div#footer p {
margin-bottom: 1.5em;
}
div#footer a {
color: #808372;
border-bottom: 1px solid #cca;
padding: 0;
}
div#footer a:hover {
text-decoration: none;
}
div#footer span {
padding: 0 3px;
color: #aa8;
}




/* ***************************
       Login
**************************** */

body.login div#wrapper { width: 420px; }
body.login div#topcorners { width: 400px; }
body.login div#bottomcorners { width: 400px; }
body.login div#header h1 a { width: 360px; /* 420 - 30 - 30 */ }

body.error div#wrapper { width: 480px; }
body.error div#topcorners { width: 460px; }
body.error div#bottomcorners { width: 460px; }
body.error div#header h1 a { width: 420px; /* 480 - 30 - 30 */ }

body.forgot div#wrapper { width: 420px; }
body.forgot div#topcorners { width: 400px; }
body.forgot div#bottomcorners { width: 400px; }
body.forgot div#header h1 a { width: 360px; /* 420 - 30 - 30 */ }

body.optin div#wrapper { width: 420px; }
body.optin div#topcorners { width: 400px; }
body.optin div#bottomcorners { width: 400px; }
body.optin div#header h1 a { width: 360px; /* 420 - 30 - 30 */ }

body.optout div#wrapper { width: 420px; }
body.optout div#topcorners { width: 400px; }
body.optout div#bottomcorners { width: 400px; }
body.optout div#header h1 a { width: 360px; /* 420 - 30 - 30 */ }

body.processing div#wrapper { width: 420px; }
body.processing div#topcorners { width: 400px; }
body.processing div#bottomcorners { width: 400px; }
body.processing div#header h1 span { width: 360px; /* 420 - 30 - 30 */ }

body.activation div#wrapper { width: 420px; }
body.activation div#topcorners { width: 400px; }
body.activation div#bottomcorners { width: 400px; }
body.activation div#header h1 a { width: 360px; /* 420 - 30 - 30 */ }

body.charge div#wrapper { width: 480px; }
body.charge div#topcorners { width: 460px; }
body.charge div#bottomcorners { width: 460px; }
body.charge div#header h1 a { width: 420px; /* 480 - 30 - 30 */ }

body.landing div#wrapper { width: 580px; }
body.landing div#topcorners { width: 560px; }
body.landing div#bottomcorners { width: 560px; }
body.landing div#header h1 a { width: 520px; /* 480 - 30 - 30 */ }

body.google div#wrapper { width: 480px; }
body.google div#topcorners { width: 460px; }
body.google div#bottomcorners { width: 460px; }
body.google div#header h1 a { width: 420px; /* 480 - 30 - 30 */ }


body.small div#wrapper {
text-align: left;
margin: 0 auto;
}
body.small div#header {
margin-bottom: 20px;
padding: 30px 0 0 0;
}
body.small div#header h1 {
margin: 0 30px;
}
body.small div#header h1 a {
background: url(../images/logo.png) bottom center no-repeat;
padding-top: 200px;
}
body.small div#header h1 span {
background: url(../images/logo.png) bottom center no-repeat;
padding-top: 100px;
}
body.small div#content {
padding: 15px 30px 10px 30px;
}


body.small div#content input.inputtext {
width: 240px;
}



body.small div#topcorners {
background: #f5f5ef;
height: 10px;
margin: 0 auto;
position: relative;
}
body.small div#topcorners div.cleft {
position: absolute;
width: 10px;
height: 10px;
background: url(../images/content_corner_sprite1_01.gif) 0px 0px no-repeat;
top: 0;
left: -10px;
}
body.small div#topcorners div.cright {
position: absolute;
width: 10px;
height: 10px;
background: url(../images/content_corner_sprite1_01.gif) -12px 0px no-repeat;
top: 0;
right: -10px;
}

body.small div#bottomcorners {
background: #f5f5ef;
height: 10px;
margin: 0 auto;
position: relative;
}
body.small div#bottomcorners div.cleft {
position: absolute;
width: 10px;
height: 10px;
background: url(../images/content_corner_sprite1_01.gif) 0px -12px no-repeat;
top: 0;
left: -10px;
}
body.small div#bottomcorners div.cright {
position: absolute;
width: 10px;
height: 10px;
background: url(../images/content_corner_sprite1_01.gif) -12px -12px no-repeat;
top: 0;
right: -10px;
}


body.small div#content h2 {
font-size: 18px;
}
body.small div#content a {
color: #36808e;
border-bottom: 1px solid #d0e8e7;
}
body.small div#content a:hover {
background: #deefee;
text-decoration: none;
}


body.error div#content h2 {
margin-bottom: 0.5em;
line-height: 1.5em;
}
body.error div#content p {
margin: 0.25em 0;
}
body.processing div#header {
display: none;
}
body.processing div#container {
margin-top: 80px;
}
body.processing div#content {
text-align: center;
}
body.processing div#content h2 {
margin-bottom: 0.6em;
}
body.processing div#content div.error {
margin-top: 0;
}
body.processing div#content img {
margin: 0 0 0.75em 0;
}
body.processing div#content p {
margin: 0.25em 0 1.25em 0;
}


body.activation h2 img {
margin: 0 !important;
padding: 0 !important;
}

table.login {
margin: 5px 0;
}
table.login th {
padding: 0.5em 1em 0.5em 0;
vertical-align: top;
text-align: right;
}
table.login td {
}
table.login input.inputtext {
width: 250px;
color: #515348;
}
table.login select {
padding: 3px;
color: #515348;
}
table.login tr td.separator {
padding: 10px 0 10px 0;
}
table.login tr td.separator div {
border-top: 1px dotted #bbb;
height: 0;
line-height: 0;
font-size: 0;
}
table.login span.tipinline {
font-size: 0.9em;
color: #777;
}

body.login div.error, body.login div.success {
margin: 0 0 5px 0;
text-align: center;
}




/* ***************************
       General
**************************** */

input.inputtext {
padding: 3px;
/* border: 1px solid #7f9db9; */
}



/* ***************************
       Misc
**************************** */

.mtop3 { margin-top: 3em !important; }
.mtop2 { margin-top: 2em !important; }
.mtop15 { margin-top: 1.5em !important; }
.mtop1 { margin-top: 1em !important; }
.mtop05 { margin-top: 0.5em !important; }
.mtop025 { margin-top: 0.25em !important; }
.mtop0 { margin-top: 0 !important; }
.mbottom3 { margin-bottom: 3em !important; }
.mbottom2 { margin-bottom: 2em !important; }
.mbottom15 { margin-bottom: 1.5em !important; }
.mbottom1 { margin-bottom: 1em !important; }
.mbottom075 { margin-bottom: 0.75em !important; }
.mbottom05 { margin-bottom: 0.5em !important; }
.mbottom025 { margin-bottom: 0.25em !important; }
.mbottom0 { margin-bottom: 0 !important; }
.mvert2 { margin: 2em 0 !important; }
.mvert15 { margin-top: 1.5em !important; margin-bottom: 1.5em !important; }
.mvert1 { margin-top: 1em !important; margin-bottom: 1em !important; }
.mvert075 { margin-top: 0.75em !important; margin-bottom: 0.75em !important; }
.mvert05 { margin-top: 0.5em !important; margin-bottom: 0.5em !important; }
.mvert025 { margin-top: 0.25em !important; margin-bottom: 0.25em !important; }
.mvert0 { margin-top: 0 !important; margin-bottom: 0 !important; }

.aleft { text-align: left !important; }
.acenter { text-align: center !important; }

.highlight1 { background: #ffa;}

The login page html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="author" content="3mail" />
        <meta name="description" content="3mail - an free email tools for non-profit organization and institution" />
        <title>3Mail - Login</title>
        <link rel="stylesheet" type="text/css" href="style/home.css"/>
</script>
</head>

    <body class="small login">
    <div id="wrapper">
    <div id="header"><h1><a href="index.php">3mail - an free email tools for non-profit organization and institution</a></h1></div>
    <div class="container">
        <div id="topcorners"><div class="cleft"></div><div class="cright"></div></div>
        <div id="content">
<?
if(isset($_POST['login'])){
   /* Check that all fields were typed in */
   if(!$_POST['user'] || !$_POST['pass']){
      die('You didn\'t fill in a required field.');
   }


   /* Checks that username is in database and password is correct */
   $md5pass = md5($_POST['pass']);
   $result = confirmUser($_POST['user'], $md5pass);

   /* Check error codes */
   if($result == 1){
      die('Authentication failure, please contact administrator if you forget login information.');
   }

      /* Username and password correct, register session variables */
   $_POST['user'] = stripslashes($_POST['user']);
   $_SESSION['username'] = $_POST['user'];
   $_SESSION['password'] = $md5pass;

    header('Location:main.php');

   /**
    * This is the cool part: the user has requested that we remember that
    * he's logged in, so we set two cookies. One to hold his username,
    * and one to hold his md5 encrypted password. We set them both to
    * expire in 100 days. Now, next time he comes to our site, we will
    * log him in automatically.
    */
   if(isset($_POST['remember'])){
      setcookie("cookname", $_SESSION['username'], time()+60*60*24*100, "/");
      setcookie("cookpass", $_SESSION['password'], time()+60*60*24*100, "/");
   }

   /* Quick self-redirect to avoid resending data on refresh */
   echo "<meta http-equiv=\"Refresh\" content=\"0;url=$HTTP_SERVER_VARS[PHP_SELF]\">";
   return;
}

/* Sets the value of the logged_in variable, which can be used in your code */
$logged_in = checkLogin();
?>
                <form name="signIn" method="post" action="index.php">
                    <table class="login" style="margin-left: auto; margin-right: auto;">
                        <tr>
                            <td><p class="mtop0 mbottom025"><strong><label for="email">Username</label></strong></p><input tabindex="1" class="inputtext" type="text" name="user" id="user" /></td>
                        </tr>
                        <tr>
                            <td><p class="mtop05 mbottom025"><strong><label for="password">Password</label></strong></p><input tabindex="2" class="inputtext" type="password" name="pass" id="pass" /></td>
                        </tr>

                        <tr>
                            <td>
                            <p class="mtop025 mbottom0"><a href="mailto:[email protected]">Forgot password?</a>
                            </p></td> 
                        </tr>
                        <tr>
                            <td><p class="mtop025 mbottom0"><input type="checkbox" name="remember" id="remember" tabindex="3"/> <label for="rememberMe">Remember me</label></p></td>
                        </tr>

                        <tr>
                            <td style="padding-top: 10px;"><input class="bprimarypub80" type="submit" name="login" tabindex="4" value="Login" /></td>
                        </tr>
                    </table>
                </form>


        </div>
        <div id="bottomcorners"><div class="cleft"></div><div class="cright"></div></div>
    </div>
</div>
        <div id="footer">
    <p>Copyright &copy; 2011 <a href="index.php">3Mail</a>. All rights reserved.</p>
</div>


    </body>
</html>
5
  • alright i just found that it is due to the bg image is not tall enough. Are there any solution? thanks
    – user782104
    Feb 15, 2012 at 9:40
  • Can you create jsFiddle of it? Feb 15, 2012 at 9:42
  • 1
    You can have multiple images as background image with different resolution and depending upon the client resolution, download the relevant one. Feb 15, 2012 at 9:43
  • The image are at local drive i will upload it later
    – user782104
    Feb 15, 2012 at 9:46
  • I see. But ie would not have that problem so i just wonder whether there is some code to fix it. Thank you for the answer
    – user782104
    Feb 15, 2012 at 9:48

3 Answers 3

1

Problem 1: As already pointed out, your background image is simply not tall enough. Moving on.

Problem 2: The reason is that you use die() to output the error message.

/* Check that all fields were typed in */
if(!$_POST['user'] || !$_POST['pass']){
    die('You didn\'t fill in a required field.');
}

Calling die() terminates the PHP script, and nothing more gets written to output, not even static HTML. This results in a truncated HTML file, and the bottom line of the block is simply not there, nor is the footer.

2
  • thanks i used a navie way to fix this just copy the later part html code follow the error message
    – user782104
    Feb 15, 2012 at 12:50
  • @user782104: I don't know why echo or ?>Error Message<? would not work, but either would be vastly preferable to duplicating your HTML just because of this. Note that you have another place where die() is used, and triplicating code needlessly is even worse.
    – Feysal
    Feb 15, 2012 at 13:16
0

For the background image you can either set the background-color to the same colour as the bottom of the background image or use repeat-y in the css to repeat the background infinitely:

background: url(../images/login_01.gif) bottom left repeat-y;

or

background-color: white;
0

Issues and Resolution

  1. Image of background image is less for the screen resolution. Solution: You can have multiple images as background image with different resolution and depending upon the client resolution, download the relevant one. You can do this with help of javascript.
  2. Rounded Bottom: Check the url of image is correct and it is getting downloaded correctly. According to your CSS, images should be one level up with respect to your CSS. Your CSS looks correct.

Also check this (background of image is not set)

div#bottomcorners {
    background: #f5f5ef;
    height: 10px;
    width: 940px;
    margin: 0 auto;
    position: relative;
}
div#bottomcorners div.cleft {
    position: absolute;
    width: 10px;
    height: 10px;
    background:#f5f5ef url(../images/content_corner_sprite2_01.gif) 0px -12px no-repeat;
    top: 0;
    left: -10px;
}
div#bottomcorners div.cright {
    position: absolute;
    width: 10px;
    height: 10px;
    background:#f5f5ef url(../images/content_corner_sprite2_01.gif) -12px -12px n0-repeat;
    top: 0;
    right: -10px;
}

Hope this helps you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.