Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Overscrolling Issue

Status
Not open for further replies.

AcidReignX

Programmer
Feb 28, 2005
32
0
0
US
I've got an issue with what I presume may be a Strict CSS issue. However, that could be wrong, because I've tried removing the DTD and it did the same thing. However, on some browsers, everything looks right.

The site that I'm working on is and if you look on the first page, *SOME* of you will notice that if you scroll down there is a bunch of overlapping text that scrolls after the footer. Some of you won't though. When I was working on my other computer (an older browser with IE) it worked fine... on my new computer with Mozilla, it has the problem. Other people have sent emails saying that it's problematic, too.

What confuses me mostly is why the problem occurs on newer browsers... it also happens on IE 7.0, or at least on the computer of somebody who has mentioned it.

I don't really know what other information I can give that would be useful. I've noticed that if the sides stretch downwards, it will scroll at least to that level, but after that, it just overlaps the bottom.

I don't forsee posting the source code as useful since you'll probably need to see the problem yourselves anyways. It's really hard to describe. But here it is anyway:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL] 

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
<title>Act Always In Love - Home Page of Dr. Nicholas Knoth</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Act Always In Love - Home Page of Dr. Nicholas Knoth" />
<meta name="keywords" content="Nicholas Knoth, intuitive, psychic, meta-intuitive healer" />
<meta name="author" content="ActAlwaysInLove.com" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen,projection" />
<link rel="shortcut icon" href="favicon.ico">

</head>

<body>
<div id="container">

<a id="top"></a>

<div id="sitename">
<table border='0' cellpadding='0' cellspacing='0' height='339' width='1000'>
<tr>
<td width='400' height='339'>&nbsp;</td>
<td width='600' height='339' align='left' valign='bottom'>
&nbsp;&nbsp;&nbsp;&nbsp; <a class='sharp' href='joinlist.php'>Mailing List</a> &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <a class='sharp' href='[URL unfurl="true"]http://www.nightwatchmanchronicles.com/MP3/NightwatchMP3.htm'>NW[/URL] Interview</a> &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <a class='sharp' href='news.php'>Latest News</a> &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <a class='sharp' href='pointers.php'>Links To Here</a> &nbsp; </td>

</tr>
</table>
</div>

<div id="wrap1">
<div id="wrap2">
<div id="leftside">
<p class="menublock">
<a class="nav" href="index.php">Home</a><br class="hide" />

<a class='nav sub' href='joinlist.php'>&nbsp;&nbsp;&nbsp;&nbsp;  Mailing List</a><br class='hide' />
<a class="nav" href="whatis.php">What is AAIL?</a><br class="hide" />

<a class='nav' href='donation.php'>Help Us Out</a><br class='hide' />
<a class="nav" href="whoami.php">Dr. Nicholas</a><br class="hide" />
<a class="nav" href="theshift.php">&quot;The Shift&quot;</a><br class="hide" />
<a class="nav" href="yourwalk.php">Your &quot;Walk&quot;</a><br class="hide" />


<a class="nav" href="thoughts.php">Thoughts</a><br class="hide" />


<a class="nav" href="privatereading.php">Private Reading</a><br class="hide" />

<a class="nav" href="seminars.php">Seminars</a><br class="hide" />
<a class="nav" href="links.php">Links</a><br class="hide" />


<a class="nav" href="contact.php">Contact Me</a><br class="hide" />
</p>
</div>

<div id='rightside'>
		<div class='box'><p>"All that we do now must be done in a sacred manner, and with celebration, because <b>WE are the ones we have been waiting for.</b>"</p><div align='right'><b>The Hopi Elders</b></div></div>

		<div class='picture' style='padding-left:28px;'>
		<table border='0' cellpadding='0' cellspacing='0'>
		    <tr>
		        <td width='220' height='220'><img width='220' height='220' src='[URL unfurl="true"]http://www.actalwaysinlove.com/images/nk08_sized.jpg'[/URL] /></td>
		    </tr>
		</table>
		</div>
		<div class='box'><p>"Maybe that is what most people think living is.  They have these superficial interactions with everybody, and then somebody like you comes along and connects with them on a much deeper level in just a few moments, and they feel a fullness where there was emptiness before.  Only, they did not realize that there was..."</p><div align='right'><b>A. in California</b></div></div>

		<div class='box'><p>"It's not about what you <b>know</b>, but what you <b>feel</b>."</p><div align='right'><b>nk</b></div></div>
<div style='padding-left:55px;'>
<h1 style='margin-top:25px;padding-left:3px;'>Important Reminders:</h1>
	<p><strong>Site Preparation</strong>: AAIL is almost ready!</p>
	<p><strong>Mailing List</strong>: Remember to join our <a href="[URL unfurl="true"]http://www.actalwaysinlove.com/joinlist.php">mailing[/URL] list</a> for all of Dr. Nicholas's latest thoughts and information on when he will next be in your neck of the woods.</p>

	<p><strong>April 10th, 2007</strong>: Giving talk on national radio program. Check out <a href="[URL unfurl="true"]http://www.nightwatchmanchronicles.com/MP3/NightwatchMP3.htm">the[/URL] Night Watchman Chronicles.</a></p>
	<p><strong>August 3rd, 2007</strong>: Preparing a Seminar on "The Shift" in California. More info <a href='#'>here</a>.</p>
</div>
</div>
<div id="content">
<h1>Welcome to... Act Always In Love</h1>
<img src="images/hand_flower.jpg" height="90" width="120" />

<p class="intro">Now is the most significant time in the history of humankind! Now is the time to pay very close attention to the world around you... and to be <u>excited</u> about what you find there. When you do, you will see: It is truly both intriguing and beautiful.<br />
</p>
<p><br />
<a href="[URL unfurl="true"]http://www.nightwatchmanchronicles.com/MP3/NightwatchMP3.htm">Recent[/URL] news: online radio interview available here.</a><br />
<a href="[URL unfurl="true"]http://actalwaysinlove.com/news.php">Recent[/URL] news: Nicholas and Brint from AAIL are in Mesa.</a><br />
<br />
It can be tough to feel excited. There is so much “bad news” out there. There is so much that <b>seems</b> to be going wrong. The whole world seems to be falling apart. It’s not. There is truly nothing to fear. Things are coming together so beautifully and powerfully, and at such a breath-taking pace, that if you could only step back and see it you would be amazed.<br />

<br />
That is the purpose of this website: to remind you how to step back and see and feel clearly.<br />
</p>
<h2>Waking up</h2>
<p>When I was a child in the 1970s, I read a book that said the world was going to end in 1984. At the time, I believed it. I admit to feeling a bit surprised when something dramatic happened in 1984. What was it? The world didn’t end. You probably noticed. In the years since then I have seen the same prediction made countless times. “The end of the world is just around the corner.” It isn’t.<br />
<br />
Ya see, I spent much of the last 20 years traveling around the world, studying with monks, shamans, teachers, healers, mystics and others. I eventually acquired a doctorate degree in religious studies. What I found in all that study is amazing. Since about the year 1 people have been saying, “The end is just around the corner!” “The world is going to end in…” Every single time, some folks believe them. And every single time it doesn’t! It doesn’t matter that the has world failed to end hundreds of thousands of times. Still so many of us live in perpetual fear of that same ancient idea.<br />
<br />
If you have the Gift of discernment, or prophecy, or any of several others, you will already know this. If you have not yet developed your gifts, now is the time to get started! This is the place. In the meantime remember:<br />
<br />

        It’s <u>not</u> the end of the world.<br />
<br />
“But look at all the bad stuff that’s happening!” The news is full of chaos, war, disease, pain, …. Of course it is. It’s <u> supposed</u> to be. <br />
<br />
The world where a handful of powerful people control everything is ending. The time when secrets were everywhere is passing. A new world of truth, honor, honesty, love, joy, and true human potential has been born and is taking over. The folks who have been getting rich for a long time through manipulation and lies… are <u>scared</u>. They are doing everything they possibly can to try to maintain a rapidly failing grip on this beautiful world.<br />

<br />
While the people of the world are afraid—while you are afraid—they still have the illusion of control. Your fear makes you weak. It keeps you from acting. It intimidates you into silence and immobility. it takes away your power to make a difference. Moving beyond that fear into higher emotions will begin to set you free. Joy will return you to you. Trust in yourself lets you relax and begin to breathe again. Love allows you to act, to reach out in the world and get involved. Inner peace arises and you begin to wake up! It’s time for that.<br />
<br />
It’s time for you to wake up.<br />
</p>
<h2>Paying attention</h2>
<p>If you are paying attention, you probably feel a lot of physical and emotional chaos. That craziness and pain can make it tough to stay focused, to pay attention. You may feel there is something huge you need to do, or that you don’t belong and just want to go Home (wherever that is). If you are normal, you probably have no real idea what you want to be “when you grow up” even if you are already in your 70s or 80s. There is a lot of personal upheaval going on. This world too has a lot of things to distract you: Television, work, business, stress, prescription drugs, the ‘net, games, … and all the busy-ness of life. Between your personal chaos and the world chaos, life can be just overwhelming. <br />
<br />
Even if you want to pay attention it can be so difficult. And you may have no idea what to pay attention to, or even how to do it… That’s ok. You can find those answers here.<br />
<br />
In my travels and my studies I’ve come across a lot of simple exercises—easy to learn and easy to do—that will make all the difference for you. I’ve been using them for years. I’ve taught them to so many people one-on-one and in small groups. Now I’d like to share them with a larger audience.<br />

<br />
Lots of different folks will be happy to tell you “what’s going on” and exactly “what you need to do about it.” Believe this. Go there. Pay this much money. Give up that… You won’t find any of that silliness here. The very first exercise will show you <u>how</u> to pay attention to your own inner awareness, how to develop it, and how to learn to trust it. The other exercises go from there. All of it is offered, as true guidance should be, at no cost. The more <u>you</u> learn to listen to <u>you</u>, the more you can love and trust and heal… the more the world will heal. Getting to live in that world, to be part of that Shift, is what I get out of this—and it’s more than enough.<br />
<br />
It’s not hard work! Strange as it might sound… Remember this: you are already exactly where you need to be. There is nothing that you <b>have</b> to do. Slow down for a moment. Breathe! Take a look at something beautiful around you (There is always something) and really appreciate it. Think, right now, of some time in your life when you had fun… Remember that feeling now. Relax…. Breathe… Feel appreciation and joy… fun. Just do that for a moment. Was that difficult? Maybe a little… but only because you haven’t done it in a while. It gets easier and easier to smile, to remember joy, to breathe… And that’s <u>all</u> you have to do. You’ve already started. You’re on the path. Remember to do this anytime you feel tense or afraid. That’s it. :) You’re already on the way. <br />

<br />
All the ideas on this site are that simple. Why? <u>If it’s not simple, you haven’t understood it.</u> All true things are simple. Anything you study, anything you know, only seems complicated until you “get it.” Once you do, you realize, it’s not that hard. The same is true of Life. Once you really understand it, it’s simple. Even the complicated inner growth exercises are simple once you understand them. And I seem to have a gift for that: for taking complicated ideas and expressing them in simple words, for taking complicated processes and spelling them out in simple steps. <br />
<br />
Everything you need to make your next steps is here on the site. You don’t need me or my help – it’s all here. If you want more however, there are some other choices on the site. There is a mailing list where I send out my latest thoughts, ideas, and such. There are some links to other sites with some beautiful information. There is a link to send a message to me. If I can, I’ll reply personally. And if you want to talk to me directly, I do personal readings. Check the “Readings” tab to the left. Remember to pay attention… and to:<br />
<br />
           Have fun!<br />
<br />
For the next several thousand years, the people of this world will look back at this time in history in awe. They will, almost without exception, wish they’d had the chance to be alive during these crucial moments. You are! Remember to pay attention to it. Keep breathing, remember that simple exercise. Try the more advanced ones if you like. Together, we will bring this world back to its own highest destiny.<br />

<br />
peace<br />
Dr. Nicholas Knoth</p></div>
</div>

<div id="footer">
<div style='width:924px;text-align:center;'><br /><br />&copy; 2007 Dr. Nicholas Knoth, ActAlwaysInLove.com
<br /><a href='webmaster.php'>Webmaster</a> &nbsp; &nbsp; &nbsp; <a href='contact.php'>Contact Me</a> &nbsp; &nbsp; &nbsp; <a href='joinlist.php'>Mailing List</a> &nbsp; &nbsp; &nbsp; <a href='sitemap.php'>Site Map</a>

</div>
</div>
</div>
</body>
</html>

Code:
/*
This theme was originally created by andreas06, and has been modified for ActAlwaysInLove.com

To see more of Andreas Viklund's work, visit [URL unfurl="true"]http://andreasviklund.com[/URL]
*/

body{
background:#f19d5d url(img/bodybg.gif) repeat-x;
color:#505050;
font:76% Georgia,Verdana,Tahoma,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
}

p{
line-height:1.5em;
margin:0 0 15px;
}

a{
color:#fa9035;
font-weight:700;
text-decoration:none;
}

a:hover{
color:#d04a10;
}

hr{
height:1px;
margin:10px 0;
width:98%;
}

dt{
font-weight:700;
}

dd{
margin:1px 0 12px 15px;
}

#container{
background:#f19d5d;
margin:0 auto;
text-align:left;
width:1024px;
}

#sitename{
background:url(images/final_banner_top.jpg) top left no-repeat;
color:#f19d5d;
font-weight:400;
height:352px;
margin:0px 0px 0px 0px;
text-align:center;
}

#mainbody{
width:1024px;
height:462px;
}

#nav{
float:left;
width:752px;
}

#nav ul{
list-style:none;
margin:0;
padding:0;
}

#nav a{
background:url(img/tabs.gif) no-repeat 100% 0;
color:#808080;
display:block;
font-size:1.2em;
letter-spacing:-1px;
padding:7px 20px 4px 11px;
text-decoration:none;
}

#nav a:hover{
color:#505050;
}

#nav li{
background:url(img/tabs.gif) no-repeat 0 0;
float:left;
margin:0 4px 0 0;
padding:0 0 0 9px;
}

#nav #current{
background:url(img/tabs.gif) no-repeat 0 -41px;
}

#nav #current a{
background:url(img/tabs.gif) no-repeat 100% -41px;
color:#303030;
padding:7px 20px 5px 11px;
}

#wrap1{
background:url(images/mainstretch.jpg) repeat-y;
clear:both;
padding:0;
width:1024px;
}

#wrap2{
background:url(images/final_banner_middle.jpg) top left no-repeat;
padding:10px;
width:1004px;
}

#header{
height:30px;
position:relative;
width:730px;
}

#header h1{
float:left;
font-size:1.4em;
margin:0;
width:180px;
}

#leftside{
float:left;
margin:-5px 0px 0px;
width:160px;
}

#leftside h1{
font-size:1.4em;
font-weight:400;
}

#rightside{
float:right;
margin:0px 15px 120px 10px;
width:280px;
}

#rightside a{
color:#505050;
}

#rightside h1{
font-size:1.4em;
font-weight:400;
margin:0 0 12px;
}

#rightside p{
font-size:1.0em;
margin:2px 0px 12px 10px;
}

#content{
margin:-25px 260px 0px 130px;
height:450px;
min-height:450px;
vertical-align:text-top;
font-size:1.1em;
}

#contentalt{
margin:45px 15px 0 180px;
}

#content p,#contentalt p{
margin:8px 0 0 10px;
}

#content h1,#contentalt h1{
color:#505050;
font-size:2em;
font-weight:400;
margin:15px 0 10px;
padding:0;
}

#content h2,#contentalt h2{
color:#505050;
font-size:1.5em;
font-weight:400;
margin:20px 0 10px;
padding:0;
}

#content img,#contentalt img{
border:1px solid #fa9035;
float:left;
margin:5px 15px 6px;
}

#footer{
background:#f19d5d url(images/final_banner_bottom.jpg) top left no-repeat;
clear:both;
color:#505050;
font-size:0.9em;
height:60px;
margin:0px 0px 0px 0px;
padding:0px;
text-align:left;
width:1024px;
}

#footer a{
color:#0000FF;
font-weight:400;
}

#footer a:hover{
color:#6666FF;
text-decoration:underline;
}

.menublock{
margin-bottom:10px;
}

.nav{
background:url(images/buttons.gif) no-repeat 0 0;
color:#303030;
width:137px;
float:left;
margin:15px 4px 0px 0px;
padding:2px 0px 6px 9px;
}

.nav:hover{
background:url(images/buttons.gif) no-repeat 0 -29px;
width:137px;
color:#505050;
padding:2px 0px 6px 9px;
}

.sub{
background:url(images/tabs.gif) no-repeat 0 0;
color:#505050;
font-size:0.9em;
margin-top:4px;
margin-left:13px;
padding:2px 0px 6px 9px;
width:137px;
}

.sub:hover{
background:url(images/tabs.gif) no-repeat 0 -29px;
width:137px;
color:#505050;
padding:2px 0px 6px 9px;
}


.intro{
font-weight:700;
}

.active{
border:1px solid #fa9035;
padding:1px 1px 1px 9px;
}

.box{
background:#f8f8f8 url(img/boxbg.gif) top left repeat-y;
border:1px solid #d0d4d4;
color:#505050;
font-size:1.1em;
margin:10px auto;
padding:10px 10px 10px 10px;
width:85%;
}

.photo{
margin:5px auto;
padding:2px;
}

.smallcaps{
font-variant:small-caps;
}

.mini{
color:#a0a0a0;
font-size:0.75em;
font-weight:400;
line-height:1.2em;
margin:20px 0 10px 8px;
}

.small{
font-size:0.85em;
}

.large{
font-size:1.4em;
}

.soft{
color:#808080;
}

.normal{
font-weight:400;
}

.sharp{
color:#101010;
}

.center{
text-align:center;
}

.hide{
display:none;
}
 
I had a bit of a root around, but nothing's jumping out at me. I suggest you start by getting the page to validate - there are 95 errors reported at , and whilst most of them shouldn't affect the layout it won't hurt to eliminate the possibility.

After that, try simplifying the layout - removing elements and their associated CSS rules one by one till the problem goes away. That'll help you pick out the cause of the problem.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Code:
#content{
margin:-25px 260px 0px 130px;
[s][!]height:450px;[/!][/s]
min-height:450px;
vertical-align:text-top;
font-size:1.1em;
}
You have a height specified there, which will, in all the modern browsers restrict the height of the element to 450px. In IE6 it will simply mean the same as min-height. If you need the height for IE6, then I suggest you put it in an IE6 only stylesheet or use a hack to incorporate it in your css, but if you do not need it, I would suggest you remove it.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Hi,
the min-height is clever to start with.
Also, rather use margin-bottom or spacers
Code:
<div style='height:10px; clear: both; font-size: 10px'>&nbsp;</div>
instead of <br> which will differ in height per browser.

lol. I must admit that only after looking a second time I can see the overlapping text issue.
use minimum height or get rid of height all together for that div. Also make sure it is closed well before opening another div for the footer.

If you dont want your div with the contents to be so long, why not use the overflow style tag and put it on 'overflow-y: show' to show a scrollbar vertically

JR (IT = Logic (except for a well known OS where it equals luck) -> Back to the Basics!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top