CSS - Horizontal Scrolling Without Scrollbars

Hi folks,

I'm working on a website at the moment and having some issues 'fixing it' for Internet Explorer. The design scrolls horizontally, and using 'position:fixed;' on certain elements keeps them on the page while the rest scrolls - this works fine in Safari / Camino / Firefox etc. but as we know position:fixed; is broken in IE.

I tried applying the fix found at http://web.tampabay.rr.com/bmerkey/...tion-fixed.html but this only seems to work for regular vertical scrolling pages - when scrolled horizontally the "fixed" elements still scroll with the page.

Is there any way possible to get this to work? I really really want to avoid any of those javascript "jumpy" scripts to reposition the element all the time. Thanks all.

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

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

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

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 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.

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?

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 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

Dear all,

I have an iframe, and the page contained has many divs with absolute positioning in various positions (it is a calendar, outlook style). I can scroll up and down the iframe to view the divs, but the divs actually overlap the scrollbars for the iframe which makes it difficult to use.

This happens in IE6 and 7, but not in FF.

has anyone come across this before?

Many thanks, Mark

Hi everyone. I recently redesigned my website and while it looks great in firefox, I'm having huge problems in IE 6.0.

I have several pages with >50 thumbnails, and whenever these pages load in IE, scrollbars appear to the right and bottom of the div and quickly move by themselves to the upper left hand corner of the screen as the thumbnails load, shrinking the content into a little box of nothing in the upper left hand corner.

The link to the site is in my profile, I am not allowed to post a url here since I'm new.

The main page of the site is fine, but any of the links at the left will cause the problem because of all the thumbnails. I have been using "Group Photos" as the page to test.

I am still a newbie at CSS and got this template for free and have tweaked it a bit. It came with an IE hack ("fix.css") that maybe isn't working properly.

This is the IE hack:
Code:

html
{overflow:hidden;}

body
{height:100%; width:100%; overflow:auto;}

Here is the relevant code from my main stylesheet ("eyecandy.css"):

Code:

#sidebar
{position:absolute; top:0; left:0; width:220px; height:100%; overflow:auto; background:#e0e0e0; text-align:right;}

body > #sidebar
{position:fixed;}

#menu a
{display:block; width:202px; padding:2px 18px 3px 0; color:#606060; background:#e0e0e0; font-size:1.1em; font-weight:normal; text-decoration:none; letter-spacing:-1px;}


#content
{width:685px; margin:0 0 0 240px; padding:20px 0; background:#fafafa;}

Can anyone help? I hate I can't even post a link to the site directly or even the css file to make it easier. Both the CSS files I named are in the parent directory if you want to see them.

*edit*