CSS - Css Scroll Bottom

I've defined three classes in this page but now I can't scroll down to the end of the page. the vertical scroll bars are missing. why is that?

seems to work in IE but not firefox... how do i get around this and make it work for both?

well ive used this code snippet in a lot of pages and its worked. but this page is giving me trouble.

my problem is the colors on the scroll bar itself not changing to what i tell it to. instead its, 'stock'

heres the site, go to the rumors sections:

www.mikeberlucchi.com

heres the code:

Code:

<td align="right">
			   <DIV 
            style=' 
            color: #000000; 
            background-color: #867878; 
            border: solid 0px black; 
            width: 300px; 
            height: 250px; 
            overflow: auto; 
            scrollbar-face-color: #C3D6DA;
            scrollbar-shadow-color: #3D5054;
            scrollbar-highlight-color: #C3D6DA;
            scrollbar-3dlight-color: #3D5054;
            scrollbar-darkshadow-color: #85989C;
            scrollbar-track-color: #95A6AA;
            scrollbar-arrow-color: #FFD6DA;
            '>

any input would be awesome, thanks

Hi Guys i want to add a scroll bar to my User Tab so that i scroll for more users ,This is the code for the User Tab of the script i am using

Top User Code
<div id="an_box_topmember">
<div class="an_btm_header"><span><strong>Top User</strong></span></div>
<div class="an_btm_content">
<ul>

Scroll Bar Code
<div style="width: 190px; height: 190px; overflow: auto; padding: 5px">
</div>


Where will i add the scroll bar code,Thanks all comments are welcome

I'm trying to ensure the absence of the horizontal scroll bar within a div for all browsers. Is there a solution?

overflow: -moz-scrollbars-vertical !important; only works in FF, but this is the effect I want.
overflow-x and overflow-y only work in IE6 and below (right?), so does anyone know what to do for ie7 and safari and opera?

Hi All

I'm trying to insert a scroll bar in a <div> section of my webpage but I'm having a few problems with it. In this section I have the background set to an image I created in Photoshop. It's just a plain white rectangle with rounded corners. The problem I'm having is the scroll bar is displayed outside of this area also the scroll goes right from the top to the bottom so it cuts off the rounded corners. Is there any way to have the scroll bar on the inside and inset just every so slighty??

I'm using css overflow:scroll.

I hope this makes sense.

Thanks in advance.

If you look at this web site
http://www.mobilvox.com/

you can see when the screen is smaller than what they designed for the scrollbars come into the window and it scrolls.

I've been using the code below, and I can't seem to get the same behavoir.

Code:

 <style type="text/css">
  /*<![CDATA[*/



  html, body {
    margin: 0;
    padding: 0;
	background-color:#000033;
	
    }
    
  body {
    font: 100%/1.25 verdana, arial, sans-serif;
    color: black;
    background-color: #eef;
	overflow: auto;
    }
    
  p {
    font-size: 1em;
    margin-bottom: 0;
    }
    
  p + p {
    text-indent: 1em;
    margin-top: 0;
    }
       
#header {
    color: #000000;
    background-color: #fff;
    overflow: auto; /*encloses float children
                      see http://garyblue.port5.com/webdev/floatdemo.html
                      */
    text-align: center;
    }

#header ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    
#headermenu1 {
    float: left;
    text-align: right;
    margin-left: 2px;
    display: inline;  /*this is a fix for IE's doubled
                        float margin bug*/
    }
    
#headermenu2 {
    float: right;
    text-align: left;
    margin-right: 100px;
    display: inline; /*same as above*/
    }

#global {
	margin:0 auto;
	width:500px;
	text-align: left;
}

can someone point out the problem.

- Thanks -

Kris

I know almost nothing about css, but i was using other codes to try and make something i wanted... .. Yea, well it didn't work out. heh.

I want to have a scroll box within an image. Like in video games where when you read something a scroll pops up, and you can scroll the text but the image doesnt move or anything.


This was the code i was trying to change.. It is for myspace, it puts all of the comments in a scroll box. But i dont need to it for that, i want to put regualr text in it.
Code:

<style type="text/css"> 
td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;} 
td.text td.text table {background-color:transparent!important} 
td.text td.text table td {font-size:13} 
td.text td.text table table br {display:inline;} 
td.text td.text table b, td.text td.text table table td {font-size:8pt} 
td.text td.text table table td {padding:2;} 
td.text td.text {height:0} 
td.text td.text table table table, td.text td.text table br, .rid br, td.text 
td.text table .orangetext15, td.text td.text .redlink, td.text td.text  span.btext {display:none;} 
</style> 

</td></tr></table></td></tr></table><br> 




<table class="rid"> 
<tr><td><table style="display:none"> 
<tr><td><table><tr><td> 

<style type="text/css"> 
td.text td.text table table table, 
td.text td.text table br, 
td.text td.text table .orangetext15, 
td.text td.text .redlink, .rid br, 
td.text td.text span.btext {display:none;} 
table[id*="Friends"] {display:none;} 
td.text td.text table td, td.text td.text table {height:0; padding:0; border:0;} 
td.text td.text table {background-color:transparent!important;} 
td.text td.text table td {font-size:10;} 
td.text td.text {height:0;} 
.r4wr table table table {width:auto!important} 
td.text td.text table b, td.text td.text table table td {font-size:10pt;} 
l{note: comment padding fix;} 
td.text td.text table table td {padding:3px;} 
td.text td.text table table br {display:inline;} 
l{note: scrollable comments;} 
.rid {display:block; width:433px; height:462px; overflow:auto;} 
</style> 
</td></tr></table></td></tr></table> 
</div><br> 
<div class="rid"> 
<table style="display:none"><tr><td><table><tr><td>

The image i want to place it in is 380 by 466 pixels..

Er... any broken rules i apologize for.. Uhm, thanks..


-woe

i have a layout that I am trying to get to work that I need some help with. I am getting records from a database and then displaying them side by side such as:

header record1 record2 record3 record4
column1 column1 column1 column1 column1
column2 column2 column2 column2 column2
column3 column3 column3 column3 column3
column4 column4 column4 column4 column4

what I want is for the page to have to scroll to the right when lots of records are present, what happens now is that say record4 starts a new line and will be under the rest of the records not are their side. I can get it if I set the div container's width to something like 10000px but that wont work as sometimes they may be longer or shorter and I dont want a lot of white space to the right side. I want this accomplised dynamically so no matter how wide it is, it will show them all. I tried overflow: scroll but that didn't seem to work.

Here is the code, its in php but its not big or too hard to figure out.

PHP Code:
echo '<div id="tableheader">';
for ($i=0; $i<count($info); $i++) {
    echo '<p>'.$info[$i][name].'</p>';
}
echo '</div>';

for ($i=0; $i<count($data); $i++) {
    if (!($i & 1)) {
        echo '<div class="even">';
    } else {
        echo '<div class="odd">';
    }
    for ($j=0; $j<count($data[$i]); $j++) {
        if ($j == 0) {
            echo '<p><a href="homedata.php?record='.$data[$i][$j].'">'.$data[$i][$j].'</a></p>';
        } else {
            echo '<p>&nbsp;'.$data[$i][$j].'&nbsp;</p>';    
        }
    }
    echo '</div>';
}
echo '</div>';
?>
</div> 





and my css is:
Code:

#tableData {padding: 0; margin: 0; border: 0; width: 10000px;}
  
#tableheader {background-color: #ACACAC;position: relative; float: left;}
.odd {background-color:#C0D8E1; position: relative; float: left;} 
.even {position: relative; float: left;}

#tableData p {padding: 0 3px; margin: 0; border-right: 1px solid black;  border-bottom: 1px solid black;display: block;}

Any ideas?

Thanks

I am at my wits end! Some of my nested divs cause FF throw up scroll bars...and not all the time. If I hit refresh, they disappear.

Everything validates: Both my css and xhtml. I have tried every allowed value for overflow to no avail. There are no floated images either to vlear; just text. Give it a look in FF and see:

My Site

My css

How do I create div that shows vertical scroll bar if div id="content_area" is too big?
Code:

<div style="padding:10px; height: 100px">
	<div id="content_area">		
	some text here
	</div>
	<div class="clear"></div>
</div>

how can i colour the scroll bars on my page - i.e. the ones when you have to scroll up and down the page, but also, the ones used within form elements such as drop down lists. I have tried using css, but to no avail.

My page consists of two frames - one on the left and one on the right.

Thankyou.

The title is kind of hard to understand. Basically my website is perfectly in line when you have a scroll bar on the side of the screen, but when you don't things come out of line and you can notice breaks in the background.

I'm not really sure whats causing this, any help would be appreciated.

Here is a link to the test site: Link

Thanks for taking the time to read my question.

I FF v.2 and IE v.7

In FF I don't get a horizontal scroll bar, which is what I want, but in IE I do. I can't figure out why. The horizontal scroll bar happens here [id="ListOfItemTitles"].

HTML:
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>For Sale</title>
<link href="Matt.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="Matt.js"></script>	
</head>
<body onload="createArray();createArrayDVD()">
<div class="LeftNavMainOut">
	<div class="LeftNavMainIn">
		<div class="LeftNavContentTitle">
			Select category below to view available inventory
		</div>
		<div class="LeftNavContentHolder">
			<div class="LeftNavContent">
				<!--<a class="Nav" href="#" onClick="ChangeTitle('CD \'s','CD')">CD's</a>-->
				<a class="Nav" href="#" onClick="ChangeTitle('CD \'s','CD')">CD's</a>
			</div>
			<div class="LeftNavContent">
				<a class="Nav" href="#" onClick="ChangeTitle('DVD \'s','DVD')">DVD's</a>
			</div>							  
		</div>
	</div>
</div>

<div class="ItemListMain">
	<div class="ItemListTitle" id="ListOfItemTitles"></div>
	<div class="roundtop"><img class="corner" src="TopLeft3.png" alt="" style="display: none" /></div>
		<div class="ItemListContent" id="ListOfStuff"></div>
	<div class="roundbottom"><img class="corner" src="BottomLeft3.png" alt="" style="display: none" /></div>
</div>
<div>
	<iframe src="CD.txt" id="CDIFrame" style="height:0px;width:0px;border:0;overflow:hidden;"></iframe>
	<iframe src="DVD.txt" id="DVDIFrame" style="height:0px;width:0px;border:0;overflow:hidden;"></iframe>
</div>
<div class="InfoContainer">
	<div class="CoverPicMain"><img id="PicutreID" class="CoverPictures" src="Covers/NoCover.png" /></div>
	<div id="InformationID" class="ItemDetails">CD and DVD Information</div>
</div>
</body>
</html>

CSS:
Code:

html, body {
height: 100%; 
width: 100%;
margin: 0px;
padding: 0px;
background-image: url(background.jpg); 
background-repeat: no-repeat;
background-position: center center;
background-color: #000000;

}

.LeftNavMainOut {
/*background-color: red;*/
float: left;
display: inline;
/*height: 600px;*/
height: 100%;
width: 170px;
margin-right: 100px;
margin-left: 80px;
padding-left:19px; 
background-image: url(LeftNavBorder.png);
background-repeat: repeat-y; 
background-position: top left;
}

.LeftNavMainIn {
/*background-color: pink;*/
float: left;
height: 100%;	
width: 100%;  
background-image: url(LeftNavBorder.png);
background-repeat: repeat-y; 
background-position: top right;
}
 
.LeftNavContentTitle {
text-align: center;
font-size: 20px;
color: white;
width: 150px;
border-bottom: 4px double blue;
margin-top: 10px;
} 
 
.LeftNavContentHolder {
margin-top: 100px;
padding-left: 2px;
}

.LeftNavContent {
background-color: aqua;
width: 140px;
float: left;
border: 2px solid CCCCCC;
text-align: center;
font-size: 20px;
margin-bottom: 10px;
}					  
   
.ItemListTitle{
font-size: 25px;
text-align: center;
width: 100%;
height: 25px;
margin-bottom: 5px;
}

.ItemListMain {
/*background-color: #99FF33;*/
margin-top: 100px;
float: left; 
width: 180px;
}

.ItemListContent {
background-color: #0033CC;
padding-left: 8px;
padding-right: 8px;
height: 300px;
overflow: auto;
display:block;
}

.InfoContainer {
width: 265px;
float: right;
/*background-color: green;*/
margin-right: 100px;
margin-top: 130px; /*100px like ItemListMain, 25px like ItemListTitle, 5px like ItemListTitle*/
padding: 0px;
overflow: hidden;

}

.CoverPicMain {
/*background-color: gray;*/
width: 150px;
height: 150px;
float: right;
margin-right: 45px;
}					  

.CoverPictures {
width: 150px;
height: 150px;
}

.ItemDetails {
/*background-color: orange;*/
width: 260px;
height: 146px;
float: right;
margin: auto;
padding: 2px 2px 2px 3px;
overflow: hidden;
color: white;
}	 

.ItemDetailsArtist {
float: left;
width: 100%;

}

.ItemDetailsTitle {
float: left;
width: 100%;

}			

.ItemDetailsType {
float: left;
width: 100%;

}

.ItemDetailsCost {
float: left;
width: 100%;

}

.ItemDetailsWidescreen {
float: left;
width: 100%;

}			

.ItemDetailsActors {
float: left;
width: 100%;

}

.ItemDetailsRating {
float: left;
width: 100%;

}


img.corner {
height: 20px;
width: 160px;
border: none;
display: block !important;
}	

.roundtop { 
background: url('TopRight.png') no-repeat top right;
/*background-color: #0033CC;*/
}

.roundbottom {
background: url('BottomRight.png') no-repeat top right; 
/*background-color: #0033CC;*/
} 

.Nav {
display: block;
width: 100%;
}
 
.ListStuff {
display: block;
width: 100%;
border-bottom: 1px solid #CCCCCC;
}

a.Nav:link {
    color: #000000;
	text-decoration: none;
}
a.Nav:visited {
    color: #000000;
	text-decoration: none;
}
a.Nav:hover {
    color: #000000;
	text-decoration: underline;
	background-color: #0066FF;
}
a.Nav:active {
    color: #000000;
	text-decoration: none;
}
 
 
a.ListStuff:link {
    color: #ffffff;
	text-decoration: none;
}
a.ListStuff:visited {
    color: #ffffff;
	text-decoration: none;
}
a.ListStuff:hover {
    color: #ffffff;
	text-decoration: underline;
	background-color:#0066FF;
}
a.ListStuff:active {
    color: #ffffff;
	text-decoration: none;
}

JS:
Code:

var TheCDTitles=new Array();
var TheDVDTitles=new Array();
function ChangeTitle(WhichDesc, FrameName) {
	TheCDTitles=''
	TheDVDTitles=''
	document.getElementById("ListOfItemTitles").innerHTML = "<strong><font color=#ffffff>" + WhichDesc + "</font></strong>";
	if (FrameName=='CD') {
		for (x in itemsArray)
		{
			TheCDTitles = TheCDTitles + '<a href="#" class="ListStuff" id="CD" + i + onmouseover="ShowInfoAndPic(' + x + ',' + x + ')">' + itemsArray[x].Artist + '</a>';
		}  
	document.getElementById("ListOfStuff").innerHTML = TheCDTitles;
	}
	if (FrameName=='DVD') {
		for (x in itemsArrayDVD)
		{	
			TheDVDTitles = TheDVDTitles + '<a href="#" class="ListStuff" id="DVD" + i + onmouseover="ShowInfoAndPicDVD(' + x + ',' + x + ')">' + itemsArrayDVD[x].Title + '</a>';
		}  
	document.getElementById("ListOfStuff").innerHTML = TheDVDTitles;
	}
}	   

//*******************CD******************************

var itemsArray=new Array();
var x
function createArray()
{
	x=0
	var data=getCDContents();
	var items=data.split('\n'); //splits the data in retreived from getContents() by line
	var stats;
	for (var i=0; i<items.length; i++)
	{
	x++
		stats=items[i].split(','); //This is the line that determines what separates values in a line
		itemsArray[i]={Artist:stats[0], Title:stats[1], Type:stats[2], Cost:stats[3], Pictu stats[4]}; //This is the line that gives a description to each value in a line. The values in the text file need to be in this order
	}
}

function getCDContents()
{
// gets data from the iFrame which is hidden (height= 0px, width=0px) in PictureScan.html
	var iFrame=document.getElementById('CDIFrame');
	var INdata="";
	if (iFrame.contentDocument) INdata=iFrame.contentDocument.defaultView.document.body.innerHTML;
	if (iFrame.contentWindow) INdata=iFrame.contentWindow.document.body.innerHTML;
	INdata=INdata.replace('<pre>','').replace('</pre>','').replace('<PRE>','').replace('</PRE>','');
	return(INdata);
} 


function ShowInfoAndPic(PicID,InfoID){
var Test
Test = null
document.getElementById("InformationID").innerHTML = '<div class="ItemDetailsArtist">Artist: ' + itemsArray[InfoID].Artist + '</div>' + '<div class="ItemDetailsTitle">Title: ' + itemsArray[InfoID].Title + '</div>' + '<div class="ItemDetailsType">Type: ' + itemsArray[InfoID].Type + '</div>' + '<div class="ItemDetailsCost">Cost: ' + itemsArray[InfoID].Cost + '</div>';
if (Test == itemsArray[PicID].Picture){
document.getElementById('PicutreID').src = 'Covers/NoCover.png';
}
else {
document.getElementById('PicutreID').src = 'Covers/' + itemsArray[PicID].Picture;
}
}

//*******************DVD******************************

var itemsArrayDVD=new Array();
function createArrayDVD()
{
	var dataDVD=getCDContentsDVD();
	var itemsDVD=dataDVD.split('\n'); //splits the data in retreived from getContents() by line
	var statsDVD;
	for (var iDVD=0; iDVD<itemsDVD.length; iDVD++)
	{
		statsDVD=itemsDVD[iDVD].split(','); //This is the line that determines what separates values in a line
		itemsArrayDVD[iDVD]={Title:statsDVD[0], Widescreen:statsDVD[1], Actors:statsDVD[2], Type:statsDVD[3], Rating:statsDVD[4], Cost:statsDVD[5], Pictu statsDVD[6]}; //This is the line that gives a description to each value in a line. The values in the text file need to be in this order
	}
}

function getCDContentsDVD()
{
// gets data from the iFrame which is hidden (height= 0px, width=0px) in PictureScan.html
	var iFrameDVD=document.getElementById('DVDIFrame');
	var INdataDVD="";
	if (iFrameDVD.contentDocument) INdataDVD=iFrameDVD.contentDocument.defaultView.document.body.innerHTML;
	if (iFrameDVD.contentWindow) INdataDVD=iFrameDVD.contentWindow.document.body.innerHTML;
	INdataDVD=INdataDVD.replace('<pre>','').replace('</pre>','').replace('<PRE>','').replace('</PRE>','');
	return(INdataDVD);
} 


function ShowInfoAndPicDVD(PicIDDVD,InfoIDDVD){
var TestDVD
TestDVD = null	
document.getElementById("InformationID").innerHTML = '<div class="ItemDetailsArtist">Title: ' + itemsArrayDVD[InfoIDDVD].Title + '</div>' + '<div class="ItemDetailsWidescreen">Widescreen (x=Yes): ' + itemsArrayDVD[InfoIDDVD].Widescreen + '</div>' + '<div class="ItemDetailsActors">Actors: ' + itemsArrayDVD[InfoIDDVD].Actors + '</div>' + '<div class="ItemDetailsType">Type: ' + itemsArrayDVD[InfoIDDVD].Type + '</div>' + '<div class="ItemDetailsRating">Rating: ' + itemsArrayDVD[InfoIDDVD].Rating + '</div>' + '<div class="ItemDetailsCost">Cost: ' + itemsArrayDVD[InfoIDDVD].Cost + '</div>';
if (TestDVD == itemsArrayDVD[PicIDDVD].Picture){
document.getElementById('PicutreID').src = 'Covers/NoCover.png';
}
else{
document.getElementById('PicutreID').src = 'Covers/' + itemsArrayDVD[PicIDDVD].Picture;	
}
}

text doc for the CD iFrame Save this as CD.txt in the local folder
Quote:
3 Doors Down,Away From The Sun,Rock,$5.00
3 Doors Down,The Better Life,Rock,$5.00
Adema,Insomniac's Dream,Rock,$5.00
Aerosmith,Get A Grip,Rock,$5.00
AFI,Sing The Sorrow,Rock,$5.00
Alice In Chains,self titled,Rock,$5.00
Alice In Chains,Dirt,Rock,$5.00
Alien Ant Farm,ANThology,Rock,$5.00


Thanks so much.

Brad

I would like to have the content section of my page have only a vertical scroll bar, an no horizontal one. How can I make content wrap if it goes over horizontaly, but scroll if it goes out of bounds verticaly?