|
CSS - Implementing A Scrolling Table, Redux
In order to generate a scrollable table with fixed header, I am using the method which relies on two separate tables nested within div elements: one table that contains the fixed header row, and another for the main data rows. The div holding the data table has a fixed height and overflow set to auto to enable the scrolling. This part works fine.
The problem, as some old posts in this forum describe, is getting the column widths to line up in both of the tables. I tried several things, but this rather brute force method is the only potential solution I have come up with: The first row of both tables must contain an identical header row (I'm using 'td' elements rather than 'th'). I must also include one row of data within the header table -- a 'dummy row'. To achieve the desired effect, the dummy row in the first table, and the header row in the second table, must both be made invisible to the user without altering the rendering of the column widths. I first tried using 'display: none', and the rows disappear but the table reflows and the columns no longer align between the tables. If I instead use 'visibility: none', the columns remain aligned, but now I have to deal with the two rows of blank space that separates tables 1 and 2. Is there a CSS method to collapse that dead space between the two tables? Or perhaps another approach altogether? Note: Unfortunately, I need a solution that will work in MSIE 6/Win. Code: <div id="screenheader">
<table width="98.8%">
<tr>
<td>column heads...
</tr>
<tr id="dummyRow">
<td>representative data...
</tr>
</table>
</div>
<div id="dataTable">
<table id="mytable" width="100%">
<thead>
<tr>
<td>column heads again
</tr>
</thead>
<tr>
rows of data...
</tr>
</table>
</div>
#dummyRow { visibility: hidden; }
thead { visibility: hidden; }
#dataTable {
height: 200px;
overflow: auto;
border-bottom: solid thin #999
}
Similar TutorialsDear all, I have been working to implement a scrolling table into an xml / xsl interface and so far have managed to put together an acceptable version using <thead> and <tbody> syntax. Indeed, for the html examples that I found out there, this seems to work perfectly. On the surface it also works perfectly in my xml / xsl implementation too (html underneath). Indeed, using IE6*, you can take a look at a cut-down example by going to this link ... http://alse.load4.net/scrollproblem/scrollproblem.xml ... and then selecting 'Milan', 'Report Test' and clicking on 'Run'. This gives a nice scrolling list which is exactly what I want. However ... If you scroll to the bottom of the list in the scrolling area (the list is short as I have removed most of the data and all the reports except for this one) and then resize the window, the headers are distorted. With more data (which is normally the case for us) the distortion is even worse. I have spent many hours tweaking my CSS (contain in the XSL file for convenience) and the HTML but just can't get rid of the 'distortion-on-resize' problem. I am hoping that either ... a.) There is a way to block the browser from being resized (I don't know if there is?) ... or ... b.) Someone can take a look at my syntax and offer a suggestion to sort this out. The source code can be obtained by clicking on the two hyperlinks 'xml file' and 'xsl file' included in the link. Indeed, I believe that the problem (and solution) may lie in some dynamic CSS declarations ( e.g. top: expression(offsetParent.scrollTop); /*IE5+ only*/ ) which I have obtained from various examples but don't understand completely. Many thanks for any help that you can give as this could be a great little tool if we can sort out this last hurdle. Regards, Alan Searle *: This solution is only designed to work with IE as that is what we have in-house. CSS: Here are the CSS declarations which are contained in the XSL file ... [code] <style type="text/css" media="screen"> table {width: 99%; background-color: #E2EFFE; border-style: solid; border-collapse:collapse; border-color: #316AC5;} table.displayframe { background-color: white; border: solid 1px #316AC5;} h1 {margin-top: 1em; font-variant: normal;} h2 {margin-left:5px;} h3 {margin-left:5px;} div.tableContainer { width: 100%; /* table width will be 99% of this*/ height: 344px; /* must be greater than tbody*/ overflow: auto; margin: 0 auto;} table.cont { width: 98%; /*100% of container produces horiz. scroll in Mozilla*/ border: none; background-color: #E2EFFE;} table.cont>tbody { /* child selector syntax which IE6 and older do not support*/ overflow: auto; height: 301px; overflow-x: hidden;} thead.cont tr { border: none; position:relative; top: expression(offsetParent.scrollTop); /*IE5+ only*/ } thead.cont td, thead.cont th { font-size: 14px; background-color: white; color: blue; border: none; /* border-top: solid 1px #d8d8d8; */ } td.cont { color: #000; padding-right: 2px; font-size: 8px; border-bottom: solid 1px #d8d8d8; border-left: solid 1px #d8d8d8;} table.cont tfoot tr { /*to help IE*/ position: relative; overflow-x: hidden; top: expression(parentNode.parentNode.offsetHeight >= offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0); } a:link {text-decoration: underline;} a:hover {text-decoration: underline; color: #851D9E;} a:visited {text-decoration: underline; color: #8080C0;} </style> I'd like to create a table that'll scroll so I can control the on-screen size and have buttons visible below the rows, and so on. I found an example, that appears to have the CSS to make it work in IE (at least that's what the comment say), but although it looks fine in Firefox, I can't get it to work at all in IE 8. Can someone take a look and tell me if there's some simple change that needed, of if this just plain is NOT going to work in IE, or what? I put the whole thing in here, so if you grab it and dump it in an html file, it should run... 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" >
<head>
<style type="text/css">
<!--
/* Terence Ordona, portal[AT]imaputz[DOT]com */
/* http://creativecommons.org/licenses/by-sa/2.0/ */
/* begin some basic styling here */
body {
background: #FFF;
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10px;
padding: 0
}
table, td, a {
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}
h1 {
font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0 0 5px 0
}
h2 {
font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0 0 5px 0
}
h3 {
font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #008000;
margin: 0 0 15px 0
}
/* end basic styling */
/* define height and width of scrollable area. Add 16px to width for scrollbar */
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 285px;
overflow: auto;
width: 756px
}
/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
overflow: hidden;
width: 756px
}
/* define width of table. IE browsers only */
div.tableContainer table {
float: left;
width: 740px
}
/* define width of table. Add 16px to width for scrollbar. */
/* All other non-IE browsers. */
html>body div.tableContainer table {
width: 756px
}
/* set table header to a fixed position. WinIE 6.x only */
/* In WinIE 6.x, any element with a position property set to relative and is a child of */
/* an element that has an overflow property set, the relative value translates into fixed. */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
position: relative
}
/* set THEAD element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
display: block
}
/* make the TH elements pretty */
thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left
}
/* make the A elements pretty. makes for nice clickable headers */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
color: #FFF;
display: block;
text-decoration: none;
width: 100%
}
/* make the A elements pretty. makes for nice clickable headers */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x */
thead.fixedHeader a:hover {
color: #FFF;
display: block;
text-decoration: underline;
width: 100%
}
/* define the table content to be scrollable */
/* set TBODY element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto */
html>body tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
width: 100%
}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/ */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
/* define width of TH elements: 1st, 2nd, and 3rd respectively. */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
html>body thead.fixedHeader th {
width: 200px
}
html>body thead.fixedHeader th + th {
width: 240px
}
html>body thead.fixedHeader th + th + th {
width: 316px
}
/* define width of TD elements: 1st, 2nd, and 3rd respectively. */
/* All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
html>body tbody.scrollContent td {
width: 200px
}
html>body tbody.scrollContent td + td {
width: 240px
}
html>body tbody.scrollContent td + td + td {
width: 300px
}
-->
</style>
</head>
<body>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
<tr>
<th><a href="#">Header 1</a></th>
<th><a href="#">Header 2</a></th>
<th><a href="#">Header 3</a></th>
</tr>
</thead>
<tbody class="scrollContent">
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
</tbody>
</table>
</div>
<div><br /></div>
</body>
</html>
[A view of what I want the final product I made in photoshop is attached.] When it comes to the technical aspect of design I BS my way through most of it or pick it up as I go along. On top of this, I'm too anal to use anything but Notepad to edit my code, but that's not the problem. This is: The image at the bottom of the page is what I'd like the damn page to look like without the use of Flash (I could do that, but I want to make a seperate site design that uses flash and keep this to HTML, CSS and maybe Javascript). So, I found this: URL and I think it's what I want, but, my first thought was that it was an arhived post. It actually appears to be an unanswered post. I tried it out, and sure enough it doesn't work. Well, I was hoping it would, because I'm more geared towards Graphic Design and no coding. I tend to design em first and fill in the blanks later. Well, this time, my code isn't the only thing that's blank and I'm just this page and another very similer one away from finishing the site, so I need help. Here's how I planned to put the thing together: It's an HTML table centered in the middle of the page. I was planning on planting the CSS in the gaping hole left by removing a section of table, and praying it fit snugly. Am I going about this wrong? And if I'm not and that link is the solution to my problems, how do I implement it into my code? I tried a test version of it, and couldn't get it to work, but I'll tell you now, I only have a theoretical graps of CSS and haven't dove into it as of yet...thus I know nothing really. And on top of this, I want to make those two left side text pieces link to anchors in the scrolling text. And those things on the right side are customized scoll bars. The latter is not nesscary (I know that's java script. I had it on a site I did a while ago, but the site is lost and I didn't code that section), but it would be optimum. So that's it, and, well, if it works, it will look pretty. Thanks for your help before hand, if this is too rambling, please feel free to tell me to better describe it. I'm in a bit of a rush, and as soon as I hit "Submit" I'm running out the door. ------->Jeff Compton I am trying to build a table in which the center scrolls both ways but the columns and rows around the edges stay put - have a look at the page below using IE6 to see what I mean: (URL address blocked: See forum rules) This is working exactly as I want it to in IE6, my problem is that I can't get it to work right in IE7 - the horizontal scrolling is not working properly. By re-instating the commented out code on line 81 I can get it to sort of work, but I don't want to have to specify the width like this as the table contents are going to be dynamic and there is no way of knowing how wide they will be. This is for use on a company intranet where all the users have IE6 or IE7, hence I am not concerned with other browsers or earlier versions of IE. Any help getting this working would be much appreciated... P Im trying to Implement http://www.trowbridge-wiltshire.co.uk/adrian into a total css page as shown on http://www.trowbridge-wiltshire/newadrian . Unfortunately I am stuck. Please could u have a look at tell me what I am doing wrong. Code:
html, body {
margin: 0:
padding: 0;
font-size: 100%;
color: #333;
background-color: #6795E1;
text-align:justify;
font:normal 10pt "Arial", "Times New Roman"
}
p, h1, pre {
padding: 0px 10px;
text-align:justify;
}
p {
font-size: 1em;
}
h1 {
font-size: 1em;
}
img {
margin: 0;
}
#container {
position: relative;
width: 768px;
margin: 0 auto;
border:2px solid rgb(0,0,0);
}
#banner {
height: 60px;
margin: 0px 0px;
}
#leftcontent {
float: left;
width:130px;
background:#BAC4C8;
}
#leftcontent ul {
list-style: none;
margin: 0;
padding: 0;
}
#leftcontent li {
border-bottom: 1px solid #CBDEF5;
}
#leftcontent li a {
display: block;
padding: 2px 0px;
border: 1px solid black;
background: #BAC4C8;
color: #fff;
text-align:center;
text-decoration: none;
}
#leftcontent li a:hover {
border: 1px solid #1958b7;
background: #BAC4C8;
color: #fff;
}
#centercontent {
position: relative;
background:#E2EAF8;
border-left:2px solid rgb(0,0,0);
margin-left: 130px;
margin-right: 0px;
}
.panel {background:#6E7E86; border:1;color:black}
.Information {background:#E2EAF8;padding:10px;vertical-align:top}
.copyright {padding=5px;font:10pt;text-align:center;background:#CBDEF5}
Hey everyone, I'm new to CSS, but now web design. I could find a way to build this design in tables, but thought I might try the CSS thing. I've been reading a bunch and have a general plan, but any advice on where my plan could be improved or if I should stick with tables would be great. hutec-inc. com/personal/css.gif Hello everybody, I used the following line <td width="8" background="<?php print $image; ?>" height="15" style="background-repeat: no-Repeat"></td> and it worked well for IE, but in Mozilla the image wasn't displayed properly, so I used the following line for Mozilla: <td width="8"> <img src="<?php print $image; ?>" width="8" height="15" style="background-repeat: no-Repeat"> </img> but now the "style" property does not work, and there is a back ground repeat, how can I avoid the background repeat in Mozilla? Hi guys, I've this div with overflow:auto. This div is populated using xmlhttprequest (it's an IM chat) so it will be getting full to the point where there's an overflow and the scrollbar shows up. What I would like to do is, whenever a new content line was added to the div (I'm using DOM to do so), the scroll (if overflow has happened) would go all the way down in a way where the last line of visible text in the div would always be the last line inserted. I'm somewhat newbie at this stuff so, any help in the right direction would be great! Thx Hugo Good morning, I have a problem with a layer(div) that I am putting over my page everytime the user clicks a button and a transaction is send to the host. My problem is that if there is an scroll and the user scroll, the message scrolls up and dissapears. I need to fix it to the center of the screen. I have tried with % instead of absolute px. Can anyone help me, please?. I am close to my deadline, so any help would be really apreciated. I am attaching my code: window.onbeforeunload=new Function("Procesando.style.visibility='visible';"); window.onblur=new Function("Procesando.style.visibility='hidden';"); //window.onfocus=new Function("Procesando.style.visibility='hidden';"); document.write('<div style="position:absolute; top:160; left:313; visibility:hidden; overflow:hidden; background-color:#CCCCCC; clip:rect(12,177,50,3); " id="Procesando">\n'+ '<select size=4 name="cbEspera" class="TextoTablaIzq" style="background-color:#CCB8E0; font-Weight:bold;">\n'+ '<option> </option>\n'+ '<option> Procesando su petici'+unescape("%F3")+'n. </option>\n'+ '<option> Espere por favor... </option>\n'+ '<option> </option>\n'+ '</select></div>\n'); Hey guys!! I got a quick question. I have a CSS layout page with 2 scrollbars. The first one for a news section and the second for a product. I have a lot of content for both sections, The scrollbars work fine, but on the main IE the scrollbars keep adjusting to the content that I have. if i have less content then its small..... I want to have no scrolling on my main window. Hi I have a html menu which seems to be causing some problems to my stylesheet. Everything was working before I used the following code to create a menu using a separate external stylesheet The HTML PHP Code: <div id="submenu"> <a class="MySubMenu" href="#">Link 1</a> | <a class="MySubMenu" href="#">Link 2</a> | <a class="MySubMenu" href="#">Link 3</a> | <a class="MySubMenu" href="#">Link 4</a> | <a class="MySubMenu" href="#">Link 5</a> | <a class="MySubMenu" href="#">Link 6</a> | <a class="MySubMenu" href="#">Link 7</a> | <a class="MySubMenu" href="#">Link 8</a> | <a class="MySubMenu" href="#">Link 2</a> | <a class="MySubMenu" href="#">Link 3</a> | <a class="MySubMenu" href="#">Link 4</a> | <a class="MySubMenu" href="#">Link 5</a> | <a class="MySubMenu" href="#">Link 6</a> | <a class="MySubMenu" href="#">Link 7</a> | <a class="MySubMenu" href="#">Link 8</a></div> The CSS PHP Code: #submenu { padding:2px 0px 1px 0px; position:absolute; top:53px; left:1px; color:Silver; font-size:8pt; width:800px; } .MySubMenu:a, .MySubMenu:a:visited { font-family:Arial; font-size:8pt; color:rgb(119,119,119); text-decoration:none; border:solid 1px rgb(241,241,241); padding:0px 5px 0px 5px; } .MySubMenu:a:hover { font-family:Arial; font-size:8pt; color:rgb(119,119,119); background-color:rgb(230,230,230); text-decoration:none; border:solid 1px rgb(153,153,153); padding:0px 5px 0px 5px; } I have attached 2 images so you can see what the problem is. As you can see, everything looks ok in the default.gif, but the scrolled.gif is what the screen looks like when I scroll to the right, the CSS style gets chopped off even thought the width is 100%. The strange thing is, if I go to a page without that menu, I can scroll to the right without the pages css getting chopped off. Can anyone help me fix this problem. Thanks I have been unable to resolve several problems with my first CSS attempt, most interestingly Firefox's inability to scroll through the main text div. Also, in IE I have been unable to overlap certain divisions and text is not properly limited in width. Both the html and css validate at W3C, and other than not scrolling, Firefox displays ideally. I can't say I expected anything less than the present errors from IE. A comparison of these issues is presented he URL The main page and CSS are available, respectively, at URL URL I suspect the improperly-located div problem is somewhere in here (and likely due to a simple error) Code: #quotes {
position: fixed;
bottom: 0px; right: 15%;
width: 85%; height: 35px;
padding: 5px;
margin: 10px;
overflow: hidden;
text-align: center;
color: #CCCCCC; background-color: #336633;
}
#sig {
position: fixed;
z-index: 1;
bottom: 25px; left: 85%;
width: 20%; height: 35px;
padding: 0.5em;
/* Make the sig noticeable */
font-size: 3.25em;
font-weight: 600;
}
As for the scrolling issue, which is my primary concern, I have read extensiively for similar problems, but cannot find any assistance. Solutions to the other issues are secondary at this point, but will be fixed eventually. If anyone has any ideas, I would appreciate them. Thanks. .dd. Hey, I was half-way through doing an Unreal Tournament (fab game) related site using CSS and XHTML Strict, and suddenly IE6 decides it's going to mess me about. Surprise surprise! A current version of the site can be found he URL The CSS of which can be found he URL In Mozilla and Konquerer it's perfect, but IE6 is shaving off the bottom bit of the document, leaving me unable to scroll all the way to the bottom. I find that it only renders one 'full screen' (F11) worth of content, before cutting it off, which is quite frankly bizarre. There should be five paragraphs of placeholder text visible. I'm also getting strange text-selection bugs, which I suspect are related. I've found a few sites that tell of a common IE6 CSS scrolling bug, which can be fixed by either refreshing the page, or pressing F11 twice, or putting a clearing <div> underneath the content. This isn't the case here. I've also tried making the #main div relatively positioned (I hear IE6 doesn't like absolutely positioned divs all that much), and also setting 'height: 100%' in the body and #all divs, but to no avail. Oh, and I'm using WinXP SP1, if that makes any difference. Please please please help, I'm fast running out of hair to pull out. Cheers. Hi all, I have just found this forum and have an issue to solve... I'm creating my online portfolio and as many photographer I have choosen to use an horizontal scrolling. It works fine on all browsers except IE below version 8. Do you know what can be the trick ? The code is the following : There is a main images container in which two type of images are placed (landscape or portrait orientation) Code: #images {
background-color: #FFF;
overflow: auto;
position: absolute;
left: 0;
right: 0;
height : 600px;
top: 63px;
white-space: nowrap;
z-index:1;
overflow-y: hidden;
}
.imagew {
display: inline-block;
width: 800px;
height: 600px;
text-align: center;
line-height: 600px;
}
.imageh {
display: inline-block;
width: 450px;
height: 600px;
text-align: top;
line-height: 600px;
}
after that the code is : Code: <div id="images"> <div class="imagew"><img alt="" src="offshore/1.jpg"/></div> <div class="imagew"><img alt="" src="offshore/2.jpg"/></div> <div class="imagew"><img alt="" src="offshore/3.jpg"/></div> <div class="imagew"><img alt="" src="offshore/4.jpg"/></div> <div class="imagew"><img alt="" src="offshore/5.jpg"/></div> </div> I have a scrollable DIV on a page, I also have a DIV containing a button which has a fixed position. Is it possible to get the button to scroll withing the DIV and not with the actual page? If so, besides having the code for the button inside the tags of the scrollable DIV, do I need anything else? I have 2 DIV's on a page, both DIV's are scrolling. I want to place 1 DIV below another. Is there a way of positioning the top of the bottom DIV a fixed distance below the bottom of the top DIV? Not sure if this is a CSS question or a Javascript question. Leaning towards CSS so here goes: Please refer to: http://www.larreamma.com/ When the page is first loaded the scrolling 'News & Events' content initially displays... outside the container it is allocated to(?). That is, a couple of lines briefly display below the 'News & Events' background. Once it is "loaded" it displays within the box, as expected. Can this be eliminated? The scroller being used is 'DOMnews 1.0' from http://onlinetools.org/tools/domnews/ . I had inquired there some time ago but have not gotten a reply. Thank you in advance. Hello all, I noticed there was similar post on this topic, though I was not able to fix my problem with that post, so I will post my own. I have made a site with relative pos, and css. I have everything positioned nicely (on everything but IE, still working on that CSS), but I have a vertical scroll bar that goes down about 3 inches, the only thing, there is nothing down there to scroll to. I have tried to alter just about everything I can think of, but nothing seems to work. If you can believe it this has been plagueing me for about 3 weeks now. Any help would relieve a lot of stress. Thanks very much for your time. bcode. =========== CSS File============ .wdlogo { visibility:visible; position:absolute; z-index:0; left:10px; top:10px; } .slidingtext { visibility:visible; position:relative; z-index:2; left:245px; top:-200px; } .blacklink { text-decoration: none; color: #000000; } .blacklink:hover { text-decoration: none; color: #000000; } .intro { text-align: left; color: #000000; font-size: 12pt; font-family: Lithograph, sans-serif; position: absolute; visibility: visible; z-index: 2; left: 360px; top: 300px; } .center { visibility: visible; position: absolute; z-index: 0; top: 165px; left: 85px; } .shadowleft { width:32px; background-image: url(images/Working/jpg/left_ver_5.jpg); background-repeat: repeat-y; background-position: right top; } .background { background-image: url(images/Working/jpg/background.jpg); background-repeat: repeat; } .shadowright { width: 32px; background-image: url(images/Working/jpg/right_ver_3.jpg); background-repeat: repeat-y; background-position: left top; } .top { position: absolute; visibility: visible; top: 0px; } .dots { position: relative; visibility: visible; z-index: 2; left: 160px; top: -150px; } .nav { position: relative; visibility: visible; z-index: 2; left: 5px; top: 250px; } .bar1 { position: relative; visibility: visible; z-index: 2; left: 240px; top: -460px; } .bar2 { position: relative; visibility: visible; z-index: 2; left: 240px; top: -420px; } .bar3 { position: relative; visibility: visible; z-index: 2; left: 240px; top: -380px; } .welcometext { position: relative; visibility: visible; z-index: 2; left: 245px; top: -455px; width:330px; font-family: verdana, arial, sans-serif; font-size: 11px; line-height: 17px; } .whytext { position: relative; visibility: visible; z-index: 2; left: 245px; top: -415px; width:310px; font-family: verdana, arial, sans-serif; font-size: 11px; line-height: 17px; } .empowertext { position: relative; visibility: visible; z-index: 2; left: 245px; top: -375px; width:310px; font-family: verdana, arial, sans-serif; font-size: 11px; line-height: 17px; } ================================= ==========XHTML File=============== <?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Author: Mathew Pridham Date: April 2004 --> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Web Diligence</title> <link rel="stylesheet" type="text/css" href="wd.css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="wdiespecific.css" /> <![endif]--> <!--webbot bot="Include" endspan i-checksum="11150" --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body topmargin="0" bottommargin="0" class="background"> <table cellpadding="0" cellspacing="0" align="center" width="800px"> <td class="shadowleft" height="100%" width="32px" rowspan="20"> </td> <td width="800px" height="100%" bgcolor="#FFFFFF"> <img src="images/logo/JPEG/Logo/WedDiligence_ver_4.5.jpg" align="left" border="0" name="wdlogo" width="480px" height="252px" /> <object class="slidingtext" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="500" height="100"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="flash/banner/textslide_ver_2.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <embed class="wdflyingtext" src="flash/banner/textslide_ver_2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="100"></embed> </object> <img src="images/Working/gif/dotted4.gif" class="dots" border="0" /> <table style="position:relative; left:5px; top:-340px" class="nav" cellpadding="0" cellspacing="4" width="180px" border="0"> <tr> <td align="right"><img src="images/Working/jpg/buttons/home_button_hit.jpg" border="0" name="home" /></td> </tr> <tr> <td align="right"><a href="about.html" onmouseover="document.about.src='images/Working/jpg/buttons/about_button_over.jpg'" onmouseout="document.about.src='images/Working/jpg/buttons/about_button_up.jpg'"><img src="images/Working/jpg/buttons/about_button_up.jpg" name="about" border="0" width="143px" height="20px" /></a></td> </tr> <tr> <td align="right"><a href="contact.html" onmouseover="document.contact.src='images/Working/jpg/buttons/contact_button_over.jpg'" onmouseout="document.contact.src='images/Working/jpg/buttons/contact_button_up.jpg'"><img src="images/Working/jpg/buttons/contact_button_up.jpg" name="contact" border="0" width="143px" height="20px" /></a></td> </tr> <tr> <td align="right"><a href="design.html" onmouseover="document.design.src='images/Working/jpg/buttons/design_button_over.jpg'" onmouseout="document.design.src='images/Working/jpg/buttons/design_button_up.jpg'"><img src="images/Working/jpg/buttons/design_button_up.jpg" name="design" border="0" width="143px" height="20px" /></a></td> </tr> <tr> <td align="right"><a href="portfolio.html" onmouseover="document.portfolio.src='images/Working/jpg/buttons/portfolio_button_over.jpg'" onmouseout="document.portfolio.src='images/Working/jpg/buttons/portfolio_button_up.jpg'"><img src="images/Working/jpg/buttons/portfolio_button_up.jpg" name="portfolio" width="143px" height="20px" /></a></td> </tr> </table> <img src="images/Working/jpg/welcomebar.jpg" border="0" class="bar1" width="325px" height="23px" /> <div class="welcometext"> We are a small web design & development company, specialized in quality web design for small businesses. </div> <img src="images/Working/jpg/whybar.jpg" border="0" class="bar2" width="325px" height="23px" /> <div class="whytext"> We, at Web Diligence, understand your need for an attractive, high quality website at an affordable price. We create websites that are an effective combination of functionality, style, and creativity. We specialize in custom web design as well as website makeovers. </div> <img src="images/Working/jpg/herebar.jpg" border="0" class="bar3" width="325px" height="23px" /> <div class="empowertext"> Not the other way around. We believe that it is your idea's, as well as ours that will make your site convey the message you're aiming for. Whether you're re-vamping an existing site, or starting from scratch, we can design a site that not only captures your imagination, but also fits into a small business budget. </div> </td> <td class="shadowright" height="100%" width="32px" rowspan="20"> </td> </table> </body> </html> Hey guys, So i'm working on the site www. paulfenton .tk. My problem occurs when you click on one of the categories in the sidebar or go to an individual post by clicking on the title... a horizontal scrollbar seems to come up. when it shouldnt. if you use the mouse wheel inside the content region, you can see that the content is scrolling a little bit horizontally. I woudld like to stop this or fix the cause but I cant figure out how... Also, if you click and drag downwards as if you were trying to select everything on the page, the page scrolls below the bottom border.. it is not supposed to do this since I turned off overflow. Any help or ideas would be great, let me know if you have any questions. -Paul |
|||||||