CSS - Content Overlapping Scrollbars

Hi,

Before I was using this code for scrollbars for various Style Sheets on FORUMS:
Code:

.body
{
scrollbar-3dlight-color: #ffff00;
scrollbar-base-color: #0000ff;
scrollbar-arrow-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-highlight-color: #ff0000;
}

Now I've started to work on WEBSITES and this doesn't work with 'em. So. My question is, how can I get a scrollbar effect, I heard it has something to do with div/layer, but I dunno. Can someone plz explain.

JamesRP.

Hi, I'm having two different issues in Firefox 3 which occur only when pages have a scrollbar.


1) Whenever a page has enough content to be scrollable, the width of the scrollbar throws off the centering of the page. For some reason FF3 treats background image centering differently than centering a div using margin: auto;. This creates a minor 1px difference in centering, but there are image rollovers within the div structure which are meant to align perfectly with the background image and look awful otherwise.

2) I have a footer with a link to the website's site map. When pages have no scrollbar, the link to the site map does not work (no cursor change, hover effects, or page change). The same link works perfectly however on a page that does have a scrollbar (and actually, if you go to a page that doesnt have a scrollbar and then make the browser windows smaller in order to force scrolling, the link works fine).


The website I'm working on is: http://sespaintball.com

I have a page set up with a div overflow set to auto. Works great, until I add a flash file.

In firefox etc get no problems, but msie 6 adds a horizontal scrollbar, which seems to scroll just a few pixels.

Can anyone help? URL is: http://fostersdev.allit-services.com/test.html

Is it possible? The classic Windows bar is so boring....

Hi,

I have a div that I've styled with CSS so that it will have an horizontal scrollbar. The CSS for it is:

Code:

#thumbs {
position: relative;
width: 100%;
height: 130px;
overflow-x: scroll;
overflow-y: hidden;
text-align: center;
}

For some reason, this works on all browsers except Safari for Mac. Any help will be greatly appreciated.

Thanks,
Ralph

Hi everyone

I'm not sure weather this is a CSS issue. For that sake I'm not even sure if it's possible, but I'll take a try Is there any way I can totally remove the scrollbars from a textarea?
I've noticed that firefox doesn't show them at all times, but IE seems to show them even when they're not necessary.

hi,

i worked pretty hard yesterday and finally my website works in firefox and internet explorer.


for some reason, though, in internet explorer, the scrollbars on the index page are not showing up as coloured, even though it's specified in style.css and newsstyle.css . can anyone tell why i'm getting grey scrollbars, even in IE ?

http://www.formone.net .

Thanks.

I hate it when browsers jump when the scrollbar appears on a longer page. Is there any way to force scrollbars to stay on the page on all browsers?

I am working on a site with some simple CSS, and working with Firefox as a testing browser for the first time.

The site layout has the main content in a 640px DIV that is centered in the browser. I had been driven crazy by what I thought was a bug in my coding, where certain pages would "shift" several pixels to the left. The problem only occurred in FF, not IE6.

It wasn't until several possibilities were exhausted that I realized the problem was the scrollbars in FF. The CSS has the following:


Code:

div {position:relative;margin:auto;width:640px;background-color:orange;text-align:center;clear:both}

Because the margin is set to AUTO, it is centered within 100% of the browser window. When there is no vertical scrollbar, there's no problem. But when that vert scrollbar appears it takes up real estate in the FF window, pushing the centered DIV to the left.

Is there a solution for this? I know most of the world uses IE, but I use FF and my sincere hope is that the rest of the world follows.

Hi all,

I'm working on a "toolbar" in a site, which users can populate with links and notices as they desire. Since it's possible that they'll put so much into the bar that it wont fit on the screen, I want to make it scroll horizontally - but without scrollbars.

I'm hoping to have an area to the left and right of the toolbar that they can mouseover to scroll it in that direction.

Here's a pictu


I'm not having much luck getting it working, despite trying a few things google turned up...

Apparently I can get rid of the scrollbars by having a div with overflow:auto inside one with overflow:hidden... (link)
The same site also shows how to only a horizontal scrollbar... (link)

I experimented a bit with white-space:nowrap to get the content to stay all on one line, which seems to work in FF (stays on one line inside the horizontally scrolling div) but not IE (stays on one line but stretches the div size)...

Any ideas?

Hi!

I am trying to insert a nice footer menu into a CSS layout. If I set overflow to auto, I get double vertical scrollbars and a horizontal scrollbar I don't want. If I set it to hidden, I can't scroll to see content.

If anyone would help me out of this scrolly mess (probably not complicated, but after a day's battling, I can't figure it out) I'd be very grateful.

Just noticed that if I do allow scrolling, the footer menu doesn't scroll with the user. D'oh. Any ideas on that as well??

Code:

*{border:0px solid #eee;margin:0;padding:0;list-style:none}
html,body,#bg,#bg table,#bg td,#cont{width:100%;height:100%;overflow:auto}

body{font-family:Arial,Helvetica,sans-serif;font-size:10px;cursor:default;color:#000}
h1,h2,{font-family:"Century Gothic","Lucida Grande",Arial,sans-serif;font-size:40px}

a{text-decoration:none;color:#000;outline:0}

#menu{position:absolute;bottom:20px;left:141px;z-index:80;width:100%;line-height:12px;}
#menu div{height:66px;background:#808000;filter:alpha(opacity=60);padding:7px 0 0 7px;}

h1 {position:relative;left:-141px;margin-bottom:-73px;width:140px;opacity:0.99}
h1 a{padding:51px 10px 10px 0;color:white;background:#808000 url(go.gif) 0 -30px repeat-x;font-size:11px;text-align:right;display:block}
h1 a:hover{background:#808000 url(go.gif) 0 43px repeat-x;;color:red}
li.grass {height:12px;padding:0 5px;font-weight:bold;color:#999;display:block}
li.grass a {height:12px;padding:0 5px;font-weight:bold;color:white;display:block}
li.grass a:hover {height:12px;padding:0 5px;font-weight:bold;color:red;display:block}

#atlogoL {position:absolute;top:3px;left:10px;z-index:100}
#atlogo {position:absolute;top:3px;right:10px;z-index:100}
#lena {position:absolute;top:10%;right:20%}
#lena2 {position:absolute;top:2%;left:38%; z-index:100}
* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 62.5%;
	background: url(images/stripe.png) repeat;
}

p  {
	font: 1.2em/1.8em Tahoma, sans-serif;
	margin-bottom: 10px;
}

h2 {
	font: 1.8em Tahoma, sans-serif;
	color: green;
	margin-bottom: 10px;
}

ul {
	margin-left: 25px;
}

img {
	border: none;
}

#page-wrap {
	background: white;
	min-width: 780px;
	max-width: 1260px;
	margin: 10px auto;
	}
	#page-wrap #inside {
		margin: 10px 10px 0px 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
#main-content {
	background: url(images/left-sidebar.gif) repeat-y white;
	padding-left: 230px;
	padding-top: 20px;
}
	
#header {
	background: #267f23;
	text-align: center;
}
	
#left-sidebar {
	width: 150px;
	float: left;
	padding-left: 15px;
	padding-top: 20px;
}

#footer {
	background: #267f23;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	color: white;
}

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>The Perfect Fluid Width Layout</title>
	
	<link rel="stylesheet" type="text/css" href="style.css" />
	<link rel="stylesheet" media="screen" type="text/css" href="slimmed.css" />

	<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" href="style-ie.css" />
	<![endif]-->
</head>

<body>

	<div id="page-wrap">
		<div id="inside">
			
			<div id="header">
				<a href="http://css-tricks.com"><img src="images/perfectfluidwidthheader.gif" alt="header" /></a>
			</div>
		
			<div id="left-sidebar">
				<p>Ii </p>

			</div>
	
			<div id="main-content">
						
				<h2>Why is this layout "perfect"?</h2>
				<ul>
					<li>Works in all major browsers</li>
				</ul>
				
				<br /><br />
				
				<p>
				Litterarum 
				</p>
				
				<p>
				Hendrerit 
				</p>
				
				<p>
				In 
				</p>
				
				<p>
				Ut 
				</p>
				
				<p>
				Videntur
				</p>
			
			</div>
			
			<div style="clear: both;"></div>
			
			<div id="footer">
				<p>Footer stuff.</p>
			</div>
		
		</div>
		
		<div style="clear: both;"></div>
	
	</div>
<div id="menu">
    <h1><a href="index.html">BOB</a></h1>
    <div>
      <ul>
        <li class="grass"><a href="bob.html">BOB</a></li>
        <li class="grass"><a href="bob.html">BOB</a></li>
        <li class="grass"><a href="bob.html">BOB</a></li>
        <li class="grass"><a href="bob.html">BOB</a></li>
        <li class="grass"><a href="bob.html">BOB</a></li>
      </ul>
    </div>
</body>

</html>

Hi,

I have a div that I've styled with CSS so that it will have an horizontal scrollbar. The CSS for it is:

Code:

#thumbs {
position: relative;
width: 100%;
height: 130px;
overflow-x: scroll;
overflow-y: hidden;
text-align: center;
}

For some reason, this works on all browsers except Safari for Mac. Any help will be greatly appreciated.

Thanks,
Ralph

*edit*

Hi,

Please use Firefox and look at:
https://67.18.220.222/~duoboots/secure/test_start.php

Only on Firefox do I see scrollbars on the right white box. The white box is fixed width, and is supposed to expand vertically with the content.

However, the white box does not expand as much as I'd like to. Eventually, as the content gets bigger, Firefox displays unwanted scroll bars.

Then, if I simply press 'Refresh'... the scroll bars disappear, and Firefox displays the page exactly how I want it!

Its really wierd because I can't test this properly. Once the page is refreshed, there are no scroll bars. But, a general user won't press Refresh..and will end up at that page eventually, to find unwanted scroll bars.

I've tried it on Opera, and a friend said its definitely a Firefox bug. I am sure the <table> is causing the problem - because all other pages display fine. The scroll bars are only appearing on this particular page, with a <table>.

Note : if you do not see scrollbars... then thats not a surprise, because Firefox is acting strange on this one.... I mainly see the scroll bars after signing in and accessing the actual PHP page that is dynamically generated. The above link is just a static version whose code I copied and pasted.

Anyway, if anyone has had any similar problems with tables and overflow-scrollbars.. please could you let me know what you did about it?

Some CSS:

Code:

	table.oa_results {
		border: 1px solid #C9AA90;
		border-collapse: collapse;
		width: 310px;
	}

	table.oa_results td {	
		border: 1px inset #C9AA90;
		padding: 2px 2px 2px 4px;
	}

	table.oa_results th {	
		border: 1px inset #C9AA90;
		padding: 2px 4px;
		font-weight: bold;
		text-align: left;
	}

	.whitebox_general_oa {
		width: 387px;
		background: #FFFFFF;
		line-height: 18px;
		overflow:visible;
		display: block;
		clear: both;
	}

Thanks very much!

Is there a way I can have a div on my page that does not expand the window area (creating scrollbars) when the browser window is too small?

I ask because I have a three-column layout, but the left and right columns are merely aesthetic-- they hold no content. The center column is 1000px, which is my limit. So if a user has a screen resolution of 1024 pixels wide, I don't want the left and right columns to cause there to be scrollbars.

If my far-left and far-right column divs weren't a set width, that would solve my problem-- but then I need multiple background-images, which is only compatible with Safari.

I could also make the <body> have "overflow:hidden", getting rid of scrollbars altogether... but then the valuable content on the middle column would be hidden if the browser window is too small-- plus you wouldn't be able to scroll down!

Any ideas?