CSS背景和登錄框錯誤

問題1：我的底部有一個空白區域，但我無法弄清楚我的css文件中存在問題。我使用的是Chrome，它在IE上沒有問題。請提供幫助。

問題2：錯誤信息塊的底部不能正確顯示。它應該是一個圓形如圖形。我有組的不同部分的CSS文件。它是在登錄組

Problem2

登錄頁面的CSS樣式表：

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;}

登錄頁面的html代碼：

<!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>

來源

2012-02-15 user782104

好吧，我剛剛發現它是由於bg圖像不夠高。有沒有解決辦法？謝謝 – user782104 2012-02-15 09:40:17

你可以創建jsFiddle嗎？ – 2012-02-15 09:42:22

您可以將多個圖像作爲具有不同分辨率的背景圖像，並根據客戶端分辨率下載相關的圖像。 – 2012-02-15 09:43:31

問題1：正如已經指出的那樣，您的背景圖像不夠高。繼續。

問題2：原因是您使用die()來輸出錯誤消息。

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

調用die()終止PHP腳本，僅此而已被寫入到輸出，甚至不是靜態的HTML。這會導致截斷的HTML文件，並且該塊的底部行根本不存在，頁腳也不存在。

來源

2012-02-15 10:04:37 Feysal

我有使用回聲或？>錯誤<？，但兩者都不起作用 – user782104 2012-02-15 12:34:48

如何停止頁面以顯示錯誤消息？謝謝 – user782104 2012-02-15 12:35:53

謝謝我用navie的方法來解決這個問題，只是複製後面的部分html代碼，按照錯誤信息 – user782104 2012-02-15 12:50:00

問題和解決

背景圖像的圖像少於屏幕分辨率。 解決方案：您可以將多個圖像作爲具有不同分辨率的背景圖像，並根據客戶端分辨率下載相關的圖像。你可以在javascript的幫助下做到這一點。
圓形底部：檢查圖像的URL是否正確，它正在正確下載。根據你的CSS，圖像應該比你的CSS高一級。你的CSS看起來正確。

還要檢查這個（背景圖像的未設置）

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; 
}

希望這有助於你。

來源

2012-02-15 09:51:22

對於背景圖像既可以在背景顏色設置爲相同的顏色作爲背景圖像的底部或使用重複-γ在CSS重複無限背景：

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

或

background-color: white;

來源

2012-02-15 09:52:30 JackalopeZero

CSS背景和登錄框錯誤

回答

相關問題