Website has strange whitespace on right side of the page when the browser is resized to a smaller window
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]
Try
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
and delete rules one by one until you identify which rule removes the whitespace.
This is really only disguising the layout problem, not addressing it. Try inspecting the gap with your browser dev tools and see if it identifies an element other than html or body. It could be some kind of margin applied to an element on the horizontal edge of the layout; CSS margins work "through" parent elements and can offset from the page edge itself, in some cases.
Idea from here.
Update (2017/9/20)
This solution now available as a Chrome extension: GhostPage.
Add this line at the end of your CSS file:
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
Then you will found out exactly which element causes the problem, instead of using overflow-x: hidden to hide the bug. The idea comes from here.
This worked for me. I still don't know why this happens, but fixed for now.
html, body {
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
#linkarea ul has position: relative; left: 50% so it sticks out to the right quite a ways.
I got this problem too just a while ago. I fixed it by adding a value for min-width under the CSS of the body element. I wish I knew what was causing the problem though as I noticed it in every major browser I used.
Hope this helps.
Edit: By the way, I haven't tested this on your code so I can't really say if this can fix your problem. It fixed mine though.
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.
to find the element causing this problem try running this in your browsers console (assuming you have jquery available):
var all = document.body.getElementsByTagName("*");
for (var i = 0; i < all.length; i++) {
if (jQuery('body').outerWidth() < jQuery(all[i]).outerWidth()) {
console.log(all[i]);
}
}
It'll loop through all the elements in your DOM and log the element if it's width is bigger than the body's. From here you can have a better idea at what's causing the problem (because it's going to be different every time) and you can troubleshoot it accordingly rather than just covering up the problem with overflow-x: hidden. Hope this helps!
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
The lesson to take from this is that any element having a width of 100% should not have any left or right padding. If it does, iOS will add that and display a blank area to the right equal to that extra padding.
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:
body { width:100%;}* {box-sizing: border-box}learn more on mozzila's site- Look up CSS reset file, might be useful in future
I had the same problem with my Wordpress site. I tried the overflow-x: hidden solution but it didn't work. Then I tried the "ghost page" to try to debug it, but I still couldn't find what caused the problem.
After that I tried running the page in incognito mode in Chrome. Then I noticed that the gap was gone. It was the Wordpress header that caused the problem.
Somehow a string had appeared next to my avatar in the header bar that was not visible.
I hope this helps anyone else that uses Wordpress.
This worked for me...Really happy to solve that bug
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
加载中,请稍侯......
精彩评论