CSS - Image Scrollbars?

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?

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,

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

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

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?

Is there a method or property which will tell me if the above div has visable scrollbars?

I need to resize some elements based on whether the scroll bars are visable or not. I don't want to have them visable all the time, only if needed.

Hi,

I had this working but somehow it's not working again. The problem I am having is that scroll bars are showing up in my iframe in Firefox, Opera, and Safari, but not IE7 and IE6.

Here is the link: http://www.caillouette.com/NewCatsMeow/

I know I need to tighten up my style sheet, but if someone could tell me how to solve this, I would be very happy.

Here's the iframe code in the index page: Code:

<div id="bodyInfo"> 
<iframe name="mainBody" width="770" height="602" src ="body.html"  scrollbars="NO" border="0"> </iframe> 
<!-- end #bodyInfo --></div> 

Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!)

Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text.

What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at:
www.markmcm.co.uk/test/test.html

The CSS is as as follows:

Code:

/*
 *  Page Stylesheet 
 */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eaeaea;
  border:0; margin:0; padding:0;
  height: 100%;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#container {
	margin-left: auto;
	margin-right: auto;
   	min-height: 100%;
	width: 936px;
}
* html #container {
	height: 100%;
}
#content {
	float:left;
	position: relative;
	height: 528px;
	width: 936px;
	z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
	position: absolute;
	float: left;
	display: block;
	width: 312px;
	height: 176px;
}
.miniscreen1 {
	top: 0;
	left: 0;
}
.miniscreen2 {
	top:0;
	left: 312px;
}
.miniscreen3 {
	top: 0;
	left: 624px;
}
.miniscreen4 {
	left: 0;
	top:176px;
}
.miniscreen5 {
	left: 312px;
	top:176px;
}
.miniscreen6 {
	left: 624px;
	top:176px;
}
.miniscreen7 {
	left: 0;
	top:352px;
}
.miniscreen8 {
	left: 312px;
	top:352px;
}
.miniscreen9 {
	left: 624px;
	top:352px;
}
.info {
	height: 30px;
	top:3px;
	left: 40px;
	width: 265px;
	float: left;
	position: absolute;
}
.infobar  {
	left:0px;
	position: absolute;
	top: 140px;
	width: 312px;
	height: 36px;
	outline: none;
	color:#000;
	background: url("data/infobar.png") no-repeat 0 0;
	z-index: 650;
}
.infobar:hover  { 
	background-position: 0 -36px;
	outline: none;
	color:#fff;
}
#infobar span {
	display: none;
	outline: none;
}
.clip_title {
	outline: none;
	font-size: 85%;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}
.clip_sub {
	outline: none;
	height: 13px;
	font-size: 80%;
	line-height: 13px;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}

And the HTML is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test Page</title>
		<meta name="description" content=" " />
		<meta name="keywords" content=" " />
		<meta name="generator" content=" " />
		<link rel="stylesheet" type="text/css" href="page.css" media="screen" />
	</head>
<body>

<div id="container">

	<div id="content">
		<span class="miniscreen1">			
		<a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
					
		<span class="miniscreen2">
		<a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
		
		<span class="miniscreen3">
		<a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
			
		<span class="miniscreen4">
		<a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen5">
		<a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen6">
		<a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen7">
		<a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen8">
		<a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen9">
		<a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
				
	</div>
</div>
	
</body>
</html>

There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!)

Hi,

I have a question about setting up the Body background-image via a linked external stylesheet.

I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG.

When I embed the following in my index.html, I see the background show up:

** inside index.html file **
<BODY STYLE="background-image: url(test.JPG);"> blah </BODY>

BUT, when I define my background in the externally linked myStyle.css file, the background does not load:

** inside myStyle.css file **
BODY { background-image: url(test.JPG); }

** inside index.html file **
<LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css">
<BODY>
blah
</BODY>
</LINK>

Please help.

thanks!