CSS - Css Scroll Position
Hi all,
im having a css scrollbar within a table and on refresh of that page,i want 2 position the scroll,at the end of the table. By default the scroll is always at the top. But how do i refer to the scroll position,to bring it to the end of the table? Similar TutorialsI have a sad feeling that its not possible, but I thought I'd ask anyway... I have a box element that is 150px x 400px with overflow: scroll; The box contains a large list of links. Now, the user can scroll down and click on a link in the box, which causes the page to refresh. Is there a way of making the scroll bar in the box "drop down" to the element that was clicked when the page is refreshed? It would be very similar to how named anchors work to force a whole page to scroll to a certain position.... Hello people I'm trying to enable a scroll on a div with position absolute but with negative pixels on the left atribute. Something like this: .intro{ position:absolute; top:100px; left:-190px; } the div will start from the back and it's content won't be seen without a scroll.. I've tried with the overflow:auto; but it doesn't work.. i think it only works to the right and not to the left Can anyone help me ? By the way, whats the diference between these declarations on a css: .intro{ #intro{ intro{ Hi there, What I am looking to do is have a layer that is in front of the rest of the page, that is always there and doesn't move when the rest of the page is scrolled. Basically I want an overlay at the bottom of the browser that shows an image, but this image should always be on screen at that exact position in the browser. The site in question is he earlybirdarts.co.uk Sorry if I am explaining myself badly, I can be bad with words sometimes. Any help is greatly appreciated :-) Regards, Lawrence Title sounds a bit contradictory, I know, but please bear with me... I'm building a simple chat application with html, javascript php and mysql. The technical stuff (php/ajax etc) i'm absolutly fine with; what I'm struggling with is the CSS to make it behave how I want. I've got a prrof-of-concept page working 90% how I want, here http://chris.loyaltymatters.co.uk/chat-demo/ This works by having an outer div of position:relative and an inner div of position:absolute; bottom:0px so that as new content gets added to the bottom, older text goes up. So far so good....but I want a scroll bar so that I can scroll up to see previous comments. Giving the inner div a height value gives me a scroll bar, but the position remains at the top and new content gets hidden towards the bottom html: Code: <div id='container'> <div id='chatRoom'> </div> </div> css Code: #container { width:500px; height:500px; margin:50px auto; border:1px solid black; position:relative; overflow-y:scroll; overflow-x:hidden; } #chatRoom { position:absolute; bottom:0px; margin:5px; width:100%; } To summarise, all I need now is a scroll bar so that I can scroll up many thanks in advance I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content { position:relative; width:320px; margin-left: 125px; margin-top: 20px; border:1px solid black; background-color:white; padding:10px; z-index:3; } #right { position:absolute; width:200px; top:20px; left:500px; border:1px solid black; background-color:white; padding:10px; z-index:1; } 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? 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 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? 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> '.$data[$i][$j].' </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 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? 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 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 hi, i am trying to paint the scrollbar with the following BODY { scrollbar-face-color: #4E5455; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #999999; scrollbar-3dlight-color: #999999; scrollbar-arrow-color: #993300; scrollbar-track-color: #EFEFEF; scrollbar-darkshadow-color: #98AAB1; margin:0; padding:0; color:#333333; font: 12px arial, verdana, helvetica, sans-serif; } but it doesn't do anything. it's still the default ie scroll bar. does anyone know why? Hi guys, I came across this scroll area on someone's webstie: www . nabil . com/film (no spaces) Does anyone know how to achieve this horizontal scroll area, or anything similar? thanks. 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. 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 |