HTML - need to have a scrollbar even when the text stays within the alotted area

defenstration · 24-03-2007 6:32pm #1

I have 6 or 7 different pages on my site and all but one of them have vertical scrollbars because they contain too much text to be viewed without one. But because I have the text aligned as center in each page, the text on that one page that doesn't have a scrollbar, is slightly more to the right than on all the other pages. So what I want to do is to be able to program it so that even when a scrollbar is not required, a greyed out scrollbar will appear anyway. Is there a way of doing this?

Goodshape · 24-03-2007 6:40pm

Try using some CSS.

I'm actually not too sure if this works (in a net cafe, can't test at the moment) but try adding style="overflow : yes" to your <body> tag.

If that doesn't work, try style="min-height : 101%". This one's not perfect but it might be better than nothing.

Also, IE will ignore the 'min-height' property - but AFAIR IE includes the grayed-out scrollbar anyway.

defenstration · 24-03-2007 7:36pm

Cheers but I'm already using CSS, and setting overflow to yes makes no difference. Here is what I currently have (before I used to have overflow set to auto):
#CONTENT {
position:absolute;
top:154px;
left:50%;
margin-left:-367px;
width:749px;
height:71%;
text-align:left;
text-indent:40px;
background:#FFFFFF;
overflow:yes;
}

If I set the overflow to yes in my BODY, then it will show a greyed out scrollbar, but I only want the scrollbar on one of the style sheets and not the whole way down the full page.

defenstration · 24-03-2007 7:57pm

Here are the contents of my full STYLE tag. The CONTEN style sheet is the one that I want the greyed out scrollbar to appear in. What I thought might be the problem was that the CONTENT style sheet is contained in the CONTENTCONTAINER stylesheet, so I thought maybe that the overflow settings in CONTENTCONTAINER might be overwriting those in CONTENT, but no matter what I tried, I still could not get a greyed out scrollbar in CONTENT:

<STYLE type="text/css">

BODY {
margin:0px;
border:0;
margin:0px;
padding:0px;
text:align:center;
font-family:arial, verdana, sans-serif;
font-size:0.8em;
background:#000099;
overflow:auto;
}

#HEADER {
position:absolute;
top:13px;
left:0px;
width:100%;
height:90px;
text-align:center;
background:#FFFFFF;
overflow:hidden;
}

#MENU {
position:absolute;
top:116px;
left:50%;
margin-left:-382px;
width:764px;
height:25px;
text-align:center;
background:#000099;
overflow:hidden;
}

#CONTENTCONTAINER {
position:absolute;
top:154px;
left:50%;
margin-left:-382px;
width:764px;
height:71%;
text-align:center;
background:#FFFFFF;
overflow:hidden;
}

#CONTENT {
position:absolute;
top:154px;
left:50%;
margin-left:-367px;
width:749px;
height:71%;
text-align:left;
text-indent:40px;
background:#FFFFFF;
overflow:yes;
}

</STYLE>

Malice · 29-03-2007 2:01pm

This is a solution that I use. The only problem is that you swap the horizontal scrolling for a 1 pixel vertical scroll instead. You may find it annoying

In your .css file, add:

height: 100%;
	margin: 0px 0px 1px 0px;
	padding: 0px;

to both your HTML and BODY references. You can also take a shortcut by defining them both at once e.g.

html, body
{
   height: 100%;
   margin: 0px 0px 1px 0px;
   padding: 0px;
}

Malice · 29-03-2007 2:05pm

Sorry, I should have previewed that a bit better. You actually only need to define these lines:

height: 100%;
margin-bottom: 1px;

in the html reference of your .css file.

HTML - need to have a scrollbar even when the text stays within the alotted area

Comments