14 replies [Last post]
Francesco
Offline
Regular
Last seen: 17 years 31 weeks ago
Timezone: GMT+7
Joined: 2004-03-23
Posts: 19
Points: 0

I've made a web site almost entirely out of CSS and whenever the scroll bar on the right side of the screen doesn't appear it messes up the formatting of my page.

Does anyone what code I have to put in CSS style sheet or html so that the scroll bar is always there.

Thanks,

Francesco

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 8 years 23 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Scroll Bars

I beleive this is the default behaviour of mozilla based browesrs. The browser hides the scroll bar when not required. This does not happen on IE browsers.

Maybe give the website page a certain defined height so that scroll bars appear all the time ?

http//melbourne.ug.php.net

Francesco
Offline
Regular
Last seen: 17 years 31 weeks ago
Timezone: GMT+7
Joined: 2004-03-23
Posts: 19
Points: 0

Scroll Bars

I'm actually using IE myself and tried using the overflow command and it appeared on some pages and not others. Dunno why...

I don't mind if I get an html solution or css one I'd just like if the horizontal scroll bar to appeared on the right side of my IE screen and all other browsers so that everything looks right.

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 17 years 52 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

Scroll Bars

To get a vertical scroll, just add a div that is absolute and
has a height of 101%:

<div style="position: absolute; height: 101%;">&nbsp;</div>

You have to have something in the div or Gecko won't
'display' the div, and no scrollbar.

http//www.positioniseverything.net/

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 17 years 52 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

Scroll Bars

Whoops! You had better make the width on that div 1px,
or it will block the proper functioning of links in non-IE
browsers.

http//www.positioniseverything.net/

Francesco
Offline
Regular
Last seen: 17 years 31 weeks ago
Timezone: GMT+7
Joined: 2004-03-23
Posts: 19
Points: 0

Scroll Bars

Thanks for you help John but it's weird... It seems to work when I view my pages offline but when I upload them the scroll bar doesn't get created for some strange reason.

Also there's this one page in particular that I'm using table data that no matter what I do the right scroll bar doesn't appear and the page needs those scroll bars too...

If you or anyone else has any further suggestions or code they think would help that would be greatly appreciated...

Thanks,

Francesco

Francesco
Offline
Regular
Last seen: 17 years 31 weeks ago
Timezone: GMT+7
Joined: 2004-03-23
Posts: 19
Points: 0

Scroll Bars

No one has any ideas how I can fix my little problem.... Sad

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 14 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Scroll Bars

Hi Francesco,
Can you link to an example page.
If it is only happening online it may be a cache issue.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 24 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Scroll Bars

I haven't tested this, but in other instances putting overflow:scroll on an element will make it have scrollbars even when not needed.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Francesco
Offline
Regular
Last seen: 17 years 31 weeks ago
Timezone: GMT+7
Joined: 2004-03-23
Posts: 19
Points: 0

Scroll Bars

OK here's an example

frantech69.com

that first page that comes up is an example of one that has scroll bars when I view it offline but not online...

Thanks,

Francesco

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 17 years 52 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

Scroll Bars

You might try "including" the new AP strut-div, or placing it at
the end of the body, or both. Sometimes it does matter where
the AP div is located even tho it shouldn't.
HTH

http//www.positioniseverything.net/

Francesco
Offline
Regular
Last seen: 17 years 31 weeks ago
Timezone: GMT+7
Joined: 2004-03-23
Posts: 19
Points: 0

Scroll Bars

Hey John,

Thanks for your help but I still can't seem to get it for some reason... No matter where I put it it doesn't seem to want to work.

How does that new AP strut-div work?

If anyone has any other ideas about how I can solve my problem they're welcome too...

Thanks,

Francesco

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 17 years 52 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

Scroll Bars

Well apparently IE6 won't honor the height on
the AP strut, so put a 100% height on the body
and it works fine. If this leads to problems in
other browsers you can feed only to IE/win
via the Tan hack:

/* \*/
* html body {height: 100%;}
/* */

Oddly, pre-IE6 browsers have no problem...

http//www.positioniseverything.net/

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Scroll Bars

Hi all

Doesn't this switch the scrollbars on in Moz:

overflow:-moz-scrollbars-vertical;

But it only puts a scrollbar next to the height of the content, so you would have to make sure the content was 100%

So this will make a balnk page WITH scrollbars:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Your Page Title Here</title>
<style type="text/css">
html,body{
  margin:0;
  padding:0;
  border:0;
/* \*/
  height:100%;
/* Last height declaration hidden from Mac IE 5.x */
}
body{
  overflow:-moz-scrollbars-vertical;
}
#fullheightcontainer{
  width:1px;
  left:-1px;
  position:absolute;
  min-height:100%;
}
</style>
</head>
<body>
<div id="fullheightcontainer"></div>
</body>
</html>

Would that do it? The div is absolutely positioned (out of the flow) off the page to the left and can't be seen.

Trevor

Francesco
Offline
Regular
Last seen: 17 years 31 weeks ago
Timezone: GMT+7
Joined: 2004-03-23
Posts: 19
Points: 0

Scroll Bars

Thanks for all your help guys but no matter what I do the scroll bars just don't want to appear. It works most of the time when I'm offline but when I upload it and try and view my web page there it just won't show the vertical bar... :?

Not sure what else to do...

Thanks anyway and anymore suggestions are more than welcome...

Francesco