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!

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

CSS Problems

Status
Not open for further replies.
Jimuniguy

Jimuniguy

Technical User
Mar 6, 2002
363
GB
Hi,

Curious one this, I am designing a page which is mostly CSS controlled. You can see the code below.

If you load it up in a 800x600 or 1020x800 (or whatever thoose resolutions are) you will see that I.E. "Clips" the bottom off. The entire page is still generated but you are unable to scroll down any futher and see it. It shouldnt't do this

Questions are:

A) Why is it clipped?
B) Why will it not scroll even though there is more to see? I've tried telling it not to clip etc but it still does.

Any thoughts or clues?

Code: 
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>
<html>
<head><title>Blah</title>
<style type=&quot;text/css&quot;>
.textlink {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #999999;
}
.maintext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
.maintexttitle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	text-decoration: underline;
	color: #000000;
}
body {
	margin:50px 0px; padding:0px;
	text-align:center;
	}
#Content {
	width:750px;
	margin:0px auto;
	text-align:left;
	padding:25px;
	border:1px dashed #333;
	background-color:#FFFFFF;
	}
.majortext {
	font-family: &quot;Lucida Console&quot;, Verdana, Arial, Helvetica, sans-serif;
	font-size:35px;
	font-weight: Bold;
	color:#CCCCCC;
	text-align: justify;
	font-weight: lighter;
}
</style>
</head>
<body>
<!-- Starting top banner -->
<div id=&quot;banner&quot;  style=&quot;position: absolute; top: 0px; left: 0px; width: 100%; background-color: #005F8B; layer-background-color: #005F8B; border: 1px none #000000;&quot;>
<img src=&quot;../Images/Blah.gif&quot; style=&quot;position:relative; top: 30px; right: 20px;&quot; align=&quot;right&quot;>
<div align=&quot;left&quot;><img src=&quot;../Images/Blah.jpg&quot; width=&quot;312&quot; height=&quot;80&quot;>
</div>
<div style=&quot;width: 100%;&quot;><img src=&quot;../Images/Blah.gif&quot; width=&quot;100%&quot; height=&quot;20&quot; ></div>
</div>
<!-- Ending top banner -->
<div id=&quot;content&quot; class=&quot;maintext&quot;  style=&quot;position: relative; top: 18%;&quot;> 
  <p class=&quot;maintexttitle&quot;>BLAH BLAH</p>
1. Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah . 
  <br>
  <br>
  2. Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br>
  <br>
  3. Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br>
  <br>
  4. Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br>
  <br>
  5.. Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah </div> 
<!-- Starting Insert for Text Link Banner -->
<div class=&quot;textlink&quot; style=&quot;position:relative; width:100%; z-index:3; top: 125px; left: 0px;&quot;> 
<div align=&quot;center&quot;>
[ 
<a href=&quot;Blah&quot; title=&quot;Blah&quot;>Blah</a> | 
<a href=&quot;Blah&quot; title=&quot;Blah&quot;>Blah</a> | 
<a href=&quot;Blah&quot; title=&quot;Blah&quot;>Blah</a> | 
<a href=&quot;Blahp&quot; title=&quot;Blah&quot;>Blah</a> | 
<a href=&quot;Blah&quot; title=&quot;Blah&quot;>Blah</a> | 
<a href=&quot;Blah&quot; title=&quot;Blah&quot;>Blah</a> 
]</div>
</div>
<!-- Ending Insert for Text Link Banner -->
</body>
</html>

Please someone help me before my brain melts!

James
 
Sort by date Sort by votes
JamesUniguy, here ya go...
The problem was with the body CSS stle, you had 50px. defined, but it needed to be more...
Take a look at this...I checked it on an IE6 and it worked good...:)

Code: 
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>
<html>
<head><title>Blah</title>
<style type=&quot;text/css&quot;>
.textlink {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #999999;
}
.maintext {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
}
.maintexttitle {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-decoration: underline;
    color: #000000;
}
body {
    margin:110px 0px; padding:0px;
    text-align:center;
    }
#Content {
    width:750px;
    margin:0px;
    text-align:left;
    padding:25px;
    border:1px dashed #333;
    background-color:#FFFFFF;
    }
.majortext {
    font-family: &quot;Lucida Console&quot;, Verdana, Arial, Helvetica, sans-serif;
    font-size:35px;
    font-weight: Bold;
    color:#CCCCCC;
    text-align: justify;
    font-weight: lighter;
}
</style>
</head>
<body>
<!-- Starting top banner -->
<div id=&quot;banner&quot;  style=&quot;position: absolute; top: 0px; left: 0px; width: 100%; background-color: #005F8B; layer-background-color: #005F8B; border: 1px none #000000;&quot;>
<img src=&quot;../Images/Blah.gif&quot; style=&quot;position:relative; top: 30px; right: 20px;&quot; align=&quot;right&quot;>
<div align=&quot;left&quot;><img src=&quot;../Images/Blah.jpg&quot; width=&quot;312&quot; height=&quot;80&quot;>
</div>
<div style=&quot;width: 100%;&quot;><img src=&quot;../Images/Blah.gif&quot; width=&quot;100%&quot; height=&quot;20&quot; ></div>
</div>
<!-- Ending top banner -->
<div id=&quot;content&quot; class=&quot;maintext&quot;  style=&quot;relative: top: 18%;&quot;> 
  <p class=&quot;maintexttitle&quot;>BLAH BLAH</p>
1. Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah . 
  <br>
  <br>
  2. Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br>
  <br>
  3. Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br>
  <br>
  4. Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br>
  <br>
  5.. Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
  Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah </div> 

<div class=&quot;textlink&quot; style=&quot;position:relative; width:100%; top: 100px; left: 0px;&quot;> 
<div align=&quot;center&quot;>
[ 
<a href=&quot;Blah&quot; title=&quot;Blah&quot;>Blah</a> | 
<a href=&quot;Blah&quot; title=&quot;Blah&quot;>Blah</a> | 
<a href=&quot;Blah&quot; title=&quot;Blah&quot;>Blah</a> | 
<a href=&quot;Blahp&quot; title=&quot;Blah&quot;>Blah</a> | 
<a href=&quot;Blah&quot; title=&quot;Blah&quot;>Blah</a> | 
<a href=&quot;Blah&quot; title=&quot;Blah&quot;>Blah</a> 
]</div>
</div>

</body>
</html>
 I have not failed; I have merely found 100,000 different ways of not succeding...
 
Upvote 0 Downvote
Hi,

I solved it too last night at midnight after playing GTA3. Its because the first div tag is set to a % which makes the div &quot;float&quot; on the screen. With it being so far offset (18%), the page draws the original page before it floats it 18% down, if i change it to a static px value, it solves it for me.

Thanks for the tip too though, i might have to use it on some of my other pages

James
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
741
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
593
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
629
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
204
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top