CSS - Can't Scroll Down - No Scroll Bars

Hi All,

I have a skeleton css site here

http://www.10eight-design.co.uk/temp/layout_test_float.htm

You'll notice that there is a LR scroll bar at the bottom of the scrollable div. Is there a way to remove this?

That's all.

Rob

I have a few questions, and hopefully this will set me for the rest of the day, so I don't have to bother you guys, at least untill tomorrow afternoon.

1. I have a question about scroll-bars, how are they implemented to be translucient?

2. How can I make <DIV>'s auto-stretch to whatever is in them?

3. How can I get it so that the text doesnt go to the very edge of the <DIV> so that it doesn't touch the border, (and look like crap)?

4. Is there any way to take an XML RSS feed and input it directly into any web page (just though I'd throw that one in there so I didn't have to start another thread).

Thanks,
-Sam

Hey everyone,

I am having a really hard time creating a layout using divs with a sticky footer that is able to resize correctly. In the past I often used tables for my layouts (i know, naughty me) so i was mainly relying on some tutorials to get as far as I have. In general everything looks good at a high enough resolution, however once things are resized the footer starts to act weird, and the page can end up with up to 3 vertical scroll bars. As well the divs start to overlap each other.

If anyone has any ideas as to something i can try it would be greatly appreciated.

the page is www.spacehindu.com/archive.php


and the css for the page is as follows:
Code:

* {
	margin: 0;
}
html, body {
	height: 100%;
	padding:0;
	background-color:#000;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;   
	font-size: 13px;
	padding: 0;           
	margin: 0; 
	letter-spacing: 0.5px;

	}

.wrapper{
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width:100%;
	margin: 0 auto -30px; 
	}						
			
			

h1{
font-family: calibri, arial, helvetica;
font-size: 22px; letterspacing: 0.5px;
color: #fff;
text-transform: lowercase; 
display: inline; 
padding-bottom: 10px;
}
h2{
display: inline;
font-family: calibri, arial, helvetica;
font-size: 15px; 
letterspacing: 5px;
color: #758a95;
font-weight: lighter; 
}
h3{
display: inline;
text-transform: lowercase; 
font-size: 17px; letterspacing: 1px;
color: #fff;
}
h4{
display: inline;
text-transform: lowercase; 
font-size: 13px; letterspacing: 8px;
color: #758a95;
}

a:link, a:visited {
			font-family: arial, calibri, helvetica;
color: #fff;
text-decoration: none;
}
a:hover {
background-color: #374254;
color: #fff; 
text-decoration: none;
}

p {
letter-spacing: 0.5px;
font: Arial, Helvetica, sans-serif #b6bec6;
}

.nav{
	width:400px;
	height:95%;
	float:left;
	background-color:#000;
	min-height:600px;
}
.navImg{
	position:relative;
	top:30%;
}
.content{
	margin-left:400px;
	height:95%;
	background-color:#000;


}
	.archive{
	position:relative;
	left:50px;
	top:10%;

			}

.footer, .push {
	height: 30px;
	background: #12151f; 
	font-family: calibri, arial; 
	font-size: 12px; 
	color: #8f97a4;
	text-align: center;
	clear: both;
}

#dropdown{
background-color:#374254;
color:#CEDBEA;
border: 0px solid;
}
#dropdown .selected {
background-color: #CEDBEA;
color: #000;
border: #000 1px solid;
}

#dropdown .unselected {
background-color: #000;
color: #374254;
}

.fieldset {background-color:#000;
			border: solid 0;
}
.label{font-family: calibri, arial; font-size: 12px; 
letter-spacing: 0.5px;
}
.textarea {
	background: #374254; 
margin: 5px;
border: solid 0 #fff;
color: #cedbea;
font-family: calibri, arial; font-size: 13px;
width: 200px;
}
.message {background: #374254; 
border: solid 0 #fff;
color: #cedbea;
font-family: calibri, arial; font-size: 13px;
border-radius:  10px;

}
.submit {background: #374254;
border: solid 0; 
color: #cedbea;
}

and if it is any help, this is the tutorial i used as my base layout for the divs http://ryanfait.com/resources/footer-stick-to-bottom-of-page/


*EDIT* So i was able to fix the multiple scrollbars by removing "overflow:auto" from a few of the divs. My content div still seems to overlap the footer though. This is especially noticeable if you do a search for "a". a whole bunch of results will appear and the footer will get lost beneath is. Does anyone have any ideas as to how to easily fix this?

I have a website im developing and I wanted to know how i would go about having a graphic element that floats on top of everything but if it goes outside the bounds of the window it wont introduce scroll bars.

Reason: I have an image that i want to make quite long but its not important for the viewer to see the end of the image. I guess its a bit like a background image but on the top

Thanks

I am an art student, and I'm trying to construct my own portfolio site. I am, however, new to CSS, so I dont really know what I'm doing. I'm using Dreamweaver CS3.

I'm using a fixed 2 column template, with header and footer, and the left column as the side bar. Within the right column, I'm trying to make a scrollbar hovering near the top of the div, with clickable thumbnails of my work. Once the thumbnails are clicked on, a larger version of the image takes up the rest of the column.

Does anyone have any idea how to accomplsh this? Even my web design teacher's stumped with this one. I thought about using frames, but thats html...

hello. i am having some trouble, my page has a scroll bar at the bottom but there is nothing there to scroll. It is only a centimeter or so but still aint good!! It is just background...yet i have not idea why, can anyone please help...

I have pasted two stylesheets that im using there is also a text one but i doubt that is the prob!!

Code:

body {
	margin:0px;
	padding:0px;
	font-family: Georgia;
	color:#333;
	background-color:#FFFFD2;
	}
h1 {
	margin:0px 0px 15px 0px;
	padding:0px;
	font-size:28px;
	line-height:28px;
	font-weight:900;
		color:#ccc;
	}
p {
	font:11px/20px Georgia;
	margin:0px 0px 16px 0px;
	padding:0px;
	}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}

a {
	color:#ffffd2;
	font-size:13px;
	text-decoration:none;
	/*font-weight:600;*/
	font: Georgia;
	}
a:link {color:#ffffd2;}
a:visited {color:#ffffd2;}
a:hover {background-color:#A4AA54;}

a.blue {
	color:#0000CC;
	font-size:11px;
	text-decoration:none;
	font-weight:600;
	font: Georgia;
	}
a.blue:link {color:#0000CC;}
a.blue:visited {color:#0000FF;}
a.blue:hover {background-color:#eee;}
#logodiv {
	position:absolute;
	top:6px;
	left:14px;
	width:91px;
	height:126px;
	background-image: url(../images/logo/gglogoweb.gif);
	background-position: 1% 2px;
	background-repeat:no-repeat;
	visibility: visible;
	z-index:1;
}
#slogandiv {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:137px;
	background-color:#A4AA54;
	visibility: visible;
	z-index:0;

/* This is a fix for IE% */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:137px;
	width:100%; /* the correct height */
	}
/* "be nice to Opera 5" */
body>#slogandiv {height:137px; width:100%;}

#MenuBar {
	position:absolute;
	top: 136px;
	left:0px;
	width:100%;
	height:32px;
	padding-bottom:2px;
	background-color:#667138;
	border-bottom:0px solid #A4AA54;
	line-height:17px;
	z-index:1;
	/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:32px;
	}
/* Again, "be nice to Opera 5". */
body>#MenuBar {width:100%; height:32px;}

#Content {
	position:absolute;
	top: 175px;
	left: 185px;
	width: 81%;
	padding:15px;
	border: 0px solid #000000;
	background-color:#ffffd2;
	z-index:0;
	}
body>#Content {width:81%;}
	
		
#Menu {
	position:absolute;
	top: 166px;
	left:0px;
	width:150px;
	padding:10px;
	background-color:#667138;
	border-right:2px solid #A4AA54;
	border-top:0px solid #A4AA54;
	line-height:17px;
	/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:150px;
	}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}

and the other
Code:

/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
  
/*Style for the background-bar
.clBar{position:absolute;  width:10; padding-right:10; height:10; background-color:#667138; layer-background-color:yellow; visibility:hidden}

/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding-top:3px; font-family:georgia; font-size:12px; font-weight:bold; text-align:center; }
.clLevel0{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel0over{background-color:#A4AA54; layer-background-color:#A4AA54; color:#ffffd2;; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#667138; layer-background-color:#667138}

/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:georgia; font-size:11px; text-align:center;}
.clLevel1{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel1over{background-color:#A4AA43; layer-background-color:#A4AA54; color:#ffffd2; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#A4AA54; layer-background-color:#A4AA54}

/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold; text-align:center;}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:#667138; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}/* CSS Document */

i can paste the php file too if needed but it iwll have to be in another post because im running out of spce in this one!!

If anyone can help that would be really appreciated!

Thanks very much

RF

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

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

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

Hi all,

Is it possible to automatically scroll the scrollbar to the bottom in the css.

This is how you do it in html:

var objDiv = document.getElementById("leftHand");

objDiv.scrollTop = objDiv.scrollHeight;

Regards,

Stephen

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

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?

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.