Website has strange whitespace on right side of th

2019-01-31 02:30发布

站内问答 / HTML/CSS
1345 10 6

I've tried everything I can think of, yet nothing seems to fix the issue. When I view the website at full-screen (on my computer), it appears fine, however when I resize the browser to a smaller window, a very strange white space appears to the right of all the website content. Since some elements are set to 100% width, I can't seem to figure out why this white space is overriding those elements.

HTML:

<body> 
<div id="bar"> 
 <div id="linkarea"> 
     <ul> 
         <li><a href="index.php">Home</a></li> 
      <li><a href="register.php">Register</a></li> 
               <li><a href="explore.php">Explore</a></li> 
            <li><a href="newtopic.php">New Debate</a></li> 
            <li><a href="contact.php">Contact</a></li> 

    </div> 
</div><div id="sky"> 
 <div id="cloud"></div> 
 <div id="cloud2"></div> 
 <div id="cloud3"></div> 
 <div id="cloud4"></div> 
    <div id="cloud5"></div> 
 <div id="cloud6"></div> 
 <div id="cloud7"></div> 
 <div id="cloud8"></div> 
</div> 
<div id="contenttop"></div><div id="container"> 
  <img src="images/cloud0.png" id="cloud0" alt="TelUsY"  /> 
  <img src="images/logo1.png" id="logo" /> 
  <img src="images/plane.png" id="plane" alt="TelUsY"  /> 

               <div id="userinfob"> 
   <span id="logintext"> 
   <form name="loginform" id="loginform" method="POST" action="/beta/index.php"> 
   <input type="text" class="styled_login" name="access_login" id="loginface" value="username..."> 
   <input type="password" class="styled_login" name="access_password" id="pwface"> 
   <a class="button" id="loginbutton" href="#"><span>Login!</span></a></span> 
   </form> 
   <br> 
   <a href="password_recovery.php" class=>Forgot your password?</a> 
            </div> 
         <div id="content"> 
 <div id="container_top"> 
  <!-- Include Top Container Content --> 
     <center> 
   <form action="search.php" method="get" id="thesearch"> 
   <table id="search" cellpadding=0 cellspacing=5 border=0> 
    <tr> 
     <td class="searchbar"> 
      <!-- Search Box --> 
      <input type="text" name="query" size="20" value="Search..." class="search_field_out" id="searchbg" onFocus="changeOnFocus();" onBlur="changeOnBlur();"> 
     </td> 
     <td class="searchbar" align="left"> 
      <!-- Submit Button --> 
      <input type="image" src="images/search_icon2.gif" name="submit_search" id="submitbutton" onMouseOver="hoverButton();" onMouseOut="outButton();"> 
     </td> 
    </tr> 
          </td> 
     </tr> 
   </table> 
   </form> 
   </center> </div> 
<div id="leftcontent"> 
         <a href="register.php"><img class="imgleft" src="images/1reg.png" /></a> 
            <div class="txtright">Registration is simple, and takes less than 5 minutes. Without an account, you will be able to view current debate topics, however you won't be able to share your opinion. <a href="register.php">Click here to sign up</a>, and begin using all the features of the TelUsY service now. </div> 
            <a href="explore.php"><img class="imgleft" src="images/2explore.png" /></a> 
            <div class="txtright">Once you have an account, you can begin browsing through current debates by choosing a category, or searching for a more specific word or phrase with the search bar. You can also find recent popular topics on the Explore page.</div> 
            <a href="newtopic.php"><img class="imgleft" src="images/3debate.png" /></a> 
            <div class="txtright">Once you've found a topic that you find interesting, feel free to post your opinion by clicking on either the red or green box. If you agree or disagree with an opinion, but don't want to post a counter-argument simply click on either the red or green icon to cast your vote on that topic.</div> 
        </div> 
        <div id="rightcontent"> 

  <h2>Popular Debates</h2> 
        <ol> 
     <a href="view.php?topic=zIG1294266765NV"><li>Arsenal should have defeated Mancheste...</li></a> 
      <a href="view.php?topic=iRr1294268603PF"><li>The Ricky Gervais show is absolutely h...</li></a> 
      <a href="view.php?topic=hed1294268314uo"><li>Starcraft 2 is one of the best online ...</li></a> 
      <a href="view.php?topic=eGX1294268407ow"><li>President Barack Obama should be doing...</li></a> 
      <a href="view.php?topic=vLA1294268494sG"><li>Macaroni Grill is one of the best Ital...</li></a> 
           </ol> 
        <h2>Recent Debates</h2> 
        <ol> 
     <a href="view.php?topic="><li>dsnfkldsj fklsdf j sdlkfjdsfklj sdfkld...</li></a> 
      <a href="view.php?topic="><li>The Miami heat shouldn't be hated on f...</li></a> 
      <a href="view.php?topic="><li>More Americans should limit their fast...</li></a> 
      <a href="view.php?topic="><li>The Ricky Gervais show is absolutely h...</li></a> 
      <a href="view.php?topic="><li>Macaroni Grill is one of the best Ital...</li></a> 
           </ol> 
        <h2>Categories</h2> 
        <ul> 
    <a href="search.php?category=1"><li>Sports</li></a> 
    <a href="search.php?category=2"><li>Food</li></a> 
    <a href="search.php?category=3"><li>Games</li></a> 
    <a href="search.php?category=4"><li>Business</li></a> 
    <a href="search.php?category=5"><li>Politics</li></a> 
    <a href="search.php?category=6"><li>Technology</li></a> 
    <a href="search.php?category=7"><li>Television</li></a> 
    <a href="search.php?category=8"><li>Music</li></a> 
    <a href="search.php?category=9"><li>Health</li></a> 
    <a href="search.php?category=10"><li>Home & Garden</li></a> 
          </ul>        </div>        <div id="footer"><div id="footerarea"> 
Copyright 2010 TelUsY. All rights reserved.<br /> 
<a href="index.php">Home</a> |
<a href="register.php">Register</a> |
<a href="explore">Explore</a> |
<a href="newtopic.php">New Debate</a> | 
<a href="contact.php">Contact</a> 
</div></div>    </div> 
</div> 
<div id="bad_login" title="Login Unsuccessful" class="dialog" style="display:none"><center> 
The username and password you entered did not match our records.<br><a href="#" onclick="closeME('bad_login');">Close this box and try again</a>.
<br><br> 
If you don't have an account yet, register today! It's fast, easy, and free.<br> 
<a href="register.php">Create an account now!</a> 
</div></body>

CSS:

@charset "utf-8";
/* CSS Document */

@font-face {
 font-family: 'CoolveticaRegular';
 src: url('../fonts/coolvetica_rg_0-webfont.eot');
 src: local('☺'), url('../fonts/coolvetica_rg_0-webfont.woff') format('woff'), url('../fonts/coolvetica_rg_0-webfont.ttf') format('truetype'), url('../fonts/coolvetica_rg_0-webfont.svg#webfonthn4Mp3Kg') format('svg');
 font-weight: normal;
 font-style: normal;
}

html, body, div, h1, h2, h3, ul, ol, li, form, fieldset, input, textarea {margin: 0; padding: 0; font-size: 100%;}
img {border:none;}
a {border:none;}
html {width:100%;}
body {background-color:#FFF; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; font-size:12px; width:100%;}
#container {width:1024px; margin:0pt auto; text-align:center; position:relative; clear:both; z-index:10;}
#logo {position:absolute; z-index:10; top:20px; left:35px;}
#userinfoa {width:270px; height:45px; position:absolute; top:40px; right:20px; z-index:10; color:#FFF; line-height:20px;}
#userinfoa a {border:none; color:#FFF;}
#userinfoa a:hover {border:none; text-decoration:none; color:#CCC;}
#userinfoa a:active {border:none; color:#FFF;}
#userinfob {width:270px; height:45px; position:absolute; top:40px; right:20px; z-index:10; color:#FFF; line-height:15px;}
#userinfob a {border:none; color:#FFF;}
#userinfob a:hover {border:none; text-decoration:none; color:#CCC;}
#userinfob a:active {border:none; color:#FFF;}
#bar {height:42px; width:100%; background-image:url(../images/bar.png); background-repeat:repeat-x; z-index:2; overflow:visible; min-width:100%;}
#sky {height:312px; width:100%; position:absolute; background-color:#5ba2ca; z-index:1; clear:both; overflow:visible; min-width:100%;}
#contenttop {height:166px; width:100%; position:absolute; top:271px; background-image:url(../images/cloudt.png); background-position:top left; background-repeat:repeat-x; z-index:2; overflow:hidden;}
#cloud0 {position:absolute; left:0px; top:0px; z-index:5;}
#cloud {position:absolute; top:110px; left:0%; z-index:2; width:159px; height:113px; background-image:url(../images/cloud1.png); background-repeat:no-repeat;}
#cloud2 {position:absolute; top:170px; left:15%; z-index:1; width:44px; height:45px; background-image:url(../images/cloud2.png); background-repeat:no-repeat;}
#cloud3 {position:absolute; top:100px; left:30%; z-index:3; width:77px; height:60px; background-image:url(../images/cloud3.png); background-repeat:no-repeat;}
#cloud4 {position:absolute; top:50px; left:45%; z-index:4; width:138px; height:97px; background-image:url(../images/cloud4.png); background-repeat:no-repeat;}
#cloud5 {position:absolute; top:20px; left:60%; z-index:2; width:159px; height:113px; background-image:url(../images/cloud1.png); background-repeat:no-repeat;}
#cloud6 {position:absolute; top:70px; left:90%; z-index:1; width:44px; height:45px; background-image:url(../images/cloud2.png); background-repeat:no-repeat;}
#cloud7 {position:absolute; top:130px; left:75%; z-index:3; width:77px; height:60px; background-image:url(../images/cloud3.png); background-repeat:no-repeat;}
#cloud8 {position:absolute; top:115px; left:85%; z-index:4; width:138px; height:97px; background-image:url(../images/cloud4.png); background-repeat:no-repeat;}
#content {position:absolute; top:325px; left:0px; background-color:#FFF; clear:both; width:100%; padding:20px 20px 0 20px; z-index:100;}
#mainnode {position:relative; width:578px; height:168px; background-color:#e7f5fe; border:1px solid #2979a5; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; text-align:center; margin:0 auto; clear:both;}
#maincontent {position:absolute; width:538px; left:20px; top:35px; height:110px; font-size:14px; text-align:left; color:#04436a; overflow:auto;}
#parentnode {position:relative; text-decoration:none; width:350px; height:125px; background-color:#e7f5fe; color:#04436a; border:1px solid #2979a5; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; text-align:center; margin:0 auto; clear:both; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=33)"; filter: alpha(opacity=33); opacity:.33;}
.nodecontent {position:absolute; width:310px; left:20px; top:35px; height:80px; font-size:14px; text-align:left; overflow:hidden;}
#childnodel {position:relative; width:350px; height:125px; background-color:#b6df8e; color:#3b781d; border:1px solid #25520f; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; text-align:center; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=33)"; filter: alpha(opacity=33); opacity:.33;}
#childnoder {position:relative; width:350px; height:125px; background-color:#f08d97; color:#902217; border:1px solid #521711; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; text-align:center; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=33)"; filter: alpha(opacity=33); opacity:.33;}
#agreebtn {position:absolute; bottom:-27px; left:-27px;}
#disagreebtn {position:absolute; bottom:-27px; right:-27px;}
#percents {width:100%; position: absolute; bottom:2px; color:#04436a; text-align:center; margin:0 auto; font-size:16px;}
.red {color:#a61c28;}
.green {color:#72b332;}
#postinfomain {width:538px; position: absolute; left:20px; top:5px; color:#04436a; text-align:center; margin:0 auto; font-size:14px; }
#postinfomain hr {border:0px solid #04436a; height:1px; background-color:#04436a;}
.postinfo {width:310px; position: absolute; left:20px; top:5px; text-align:center; margin:0 auto; font-size:14px; }
#parentnode hr {border:0px solid #04436a; height:1px; background-color:#04436a}
#parentnode a {text-decoration:none; color:#04436a;}
#childnodel hr {border:0px solid #04436a; height:1px; background-color:#3b781d;}
#childnodel a {color:#3b781d; text-decoration:none;}
#childnoder a {color:#902217; text-decoration:none;}
#childnoder hr {border:0px solid #04436a; height:1px; background-color:#902217;}
.rightpost {float:right; font-style:italic;}
.rightpost_votes {float:right; font-weight:bold; padding-right:25px; color:red;}
.leftpost {float:left; font-weight:bold; }
.leftpost_votes {float:left; font-weight:bold; padding-left:25px; color:green;}
#plane {position:absolute; top:35px; right:0px; z-index:3;}
#linkarea {height:40px; width:100%; margin:0 auto; min-width:1024px; position:relative; float:left;}
#linkarea a {font-family:CoolveticaRegular, Georgia, serif; color:#FFF; font-size:18px; text-decoration:none;}
#linkarea a:hover {font-family:CoolveticaRegular, Georgia, serif; color:#FC3;}
#linkarea a:active {font-family:CoolveticaRegular, Georgia, serif; color:#FFF;}
#linkarea ul {list-style-type:none; text-align:center; padding-top:14px; text-align:center; float:left; position:relative; left:50%;}
#linkarea ul li {float:left; display:block; right:50%; position:relative; padding:0 60px 0 60px;}
#footer {height:100px; width:1024px; margin:0 auto; background-image:url(../images/footer.png); color:#FFF; clear:both; text-align:center;}
#footer a {color:#FFF;}
#footerarea {padding-top:40px;}
#leftcontent {width:593px; padding:20px 0 20px 20px; float:left; text-align:left; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; color:#000; font-size:14px; text-decoration:none; line-height:18px;}
#rightcontent ul li {margin-left:35px; line-height:18px; margin-bottom:10px;}
#rightcontent ol li {margin-left:35px; line-height:18px; margin-bottom:10px;}
#rightcontent a:hover {color:#999;}
#rightcontent a {color:#04436a;}
#leftcontent a:hover {color:#999;}
#leftcontent a {color:#04436a;}
#rightcontent {width:371px; padding:20px; float:right; text-align:left; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; color:#000; font-size:14px; text-decoration:none; line-height:18px;}
#rightcontent h2 {font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; color:#04436a; font-size:24px; line-height:18px; padding-bottom:15px; padding-top:15px;}
#searchbg {width:300px; height:48px; display:block; border: 0;}
.imgleft {float:left; clear:both; width:212px; height:190px;}
.txtright {float:left; padding:12px 0 20px 20px; width:356px; font-size:18px; height:190px;} 
.txtright a {color:#999; text-decoration:none;}
.txtright a:hover {color:#ccc;}
a.button {margin-top:3px; margin-left:2px; background: transparent url('../images/button_a.png') no-repeat scroll top right; color: #FFF; display: block; float: left; font: normal 14px Georgia, serif; height: 25px; 
padding-right: 5px; /* sliding doors padding */ text-decoration: none;}
a.button span {color: #FFF; background: transparent url('../images/button.png') no-repeat; display: block; line-height: 16px; padding: 0 5px 5px 9px;}
.pusher {padding-bottom:105px;}

The website: link text

I understand the positioning may be unconventional and some styles haven't been used, I'm still in the process of working out the unused code. But for the life of me, I can't figure this one out. Screenshots below: ![alt text][2]

![alt text][3]

标签： css xhtml
举报
10条回答
我想做一个坏孩纸
2楼-- · 2019-01-31 02:47

Hello everyone I had the same problem and I used this code:

html, body {

 width: 100%;
height: auto;
margin: 0px;
padding: 0px;
overflow-x: hidden; }

I hope it can be useful

查看更多
0人赞 添加讨论(0) 举报
何必那么认真
3楼-- · 2019-01-31 02:48

#linkarea ul has position: relative; left: 50% so it sticks out to the right quite a ways.

查看更多
0人赞 添加讨论(0) 举报
Rolldiameter
4楼-- · 2019-01-31 02:51

I just fixed a similar problem. The only way I could track down the problem, which turned out to be a hidden input[type="submit"] from my WordPress theme, was to open up Chrome Dev Tools and start deleting chunks of HTML from the page until I finally made the weird whitespace go away. That way I was able to efficiently drill down to this tiny little element by process of elimination.

查看更多
0人赞 添加讨论(0) 举报
做自己的国王
5楼-- · 2019-01-31 02:58

I had the same issue, turned out that html automatically added margin: 8 to body. My solution: 

body {
    margin: 0;
}

Nothing extra was needed to solve this for me.

[Edit] Also, try:

  1. body { width:100%;}
  2. * {box-sizing: border-box} learn more on mozzila's site
  3. Look up CSS reset file, might be useful in future
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)