CSS - Scrolling Div That Scales To Fit Page

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>&nbsp;</option>\n'+
'<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Procesando su petici'+unescape("%F3")+'n. &nbsp;</option>\n'+
'<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Espere por favor...&nbsp;</option>\n'+
'<option>&nbsp;</option>\n'+
'</select></div>\n');

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.

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>

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

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

Can someone point me to a tutorial (or if it's easy enough, just show me here) where I can learn how to make a scrolling div? Ideally, one that looks like this (this would be on a black-backgrounded page):



Thanks!...

http://www.rodoslovlje.com/

Use IE e.g. Does anyone know how I can fix this.

Thnx

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?

does anyone know the code for a scroll text box? plz help

Hi! I am a new member brand new to CSS. The page is my first CSS attempt and I am having problems.

The images on the right are not visible without scrolling.
Thanks,
Twillie
Code:

<style type="text/css">
        body
        {
            background-image: url('background.png');
            background-repeat: repeat-x;
            background-position: top;
            background-color: #cc99ff;
            height: 100%;
            width: 100%;
        }
        div.main
        {
	background: White;
	width: 100%;
	overflow: hidden hidden;
	margin-left: 15%;
	margin-top: 0px;
        }
        b.rtop, b.rbottom
        {
            display: block;
            background: #cc99ff;
            clear: both;
        }
        b.rtop b, b.rbottom b
        {
            display: block;
            height: 1px;
            overflow: hidden hidden;
            background: White;
            clear: both;
        }
        b.r1
        {
            margin: 0 5px;
            clear: both;
        }
        b.r2
        {
            margin: 0 3px;
            clear: both;
        }
        b.r3
        {
            margin: 0 2px;
            clear: both;
        }
        b.rtop b.r4, b.rbottom b.r4
        {
            margin: 0 1px;
            height: 2px;
            clear: both;
        }
        div.logo
        {
            width: 100%;
            height: 100%;
            padding-top: 10px;
        }
        div.search
        {
            width: 100%;
            height: 100%;
            text-align: right;
            vertical-align: top;
            padding-top: 10px;
            border-bottom: 1px solid #cc99ff;
        }
        input.search
        {
            margin-right: 15px;
            margin-bottom: 4px;
        }
        div.leftmenu
        {
            width: 10%;
            font-family: Century Gothic;
            font-style: italic;
            font-weight: bold;
            float: left;
        }
        ul.leftmenu
        {
            list-style: none;
            font-family: Verdana;
            font-size: medium;
        }
        li.leftmenu
        {
            padding-top: 4px;
        }
        div.footer
        {
	width: 80%;
	text-align: center;
	margin-left: 30%;
	margin-right: 30%;
        }
        div.description
        {
            text-align: center;
            font-size: small;
            padding: 4px;
        }
        span.description
        {
            font-weight: bold;
            font-style: italic;
        }
        div.bottommenu
        {
            color: #FF0000;
            font-size: small;
            text-align: center;
            padding: 4px;
        }
        a.bottommenu
        {
            color: Black;
            padding-left: 4px;
            padding-right: 4px;
        }
        div.content
        {
            width: 80%;
            height: 100%;
            float: right;
            padding-top: 8px;
        }
    </style>
</head>
<body>
    <div class="main">
        <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
        </b></b>
        <div>
            <div class="logo">
                <img src="images/MP_header2.jpg" alt="Monogram Plus Logo" />
            </div>
            <div class="search">
                <input name="sp-q" type="text" />
                <input name="submit" type="submit" value="Search" class="search" />
                <input name="sp-a" type="hidden" value="sp0535f800" />
            </div>
            <div>
                <div class="leftmenu">
                    <ul class="leftmenu">
                        <li class="leftmenu"><a href="index.html">Home</a></li>
                        <li class="leftmenu"><a href="links.html">Links</a></li>
                        <li class="leftmenu"><a href="online_store.html">Online&nbsp;Store</a></li>
                        <li class="leftmenu"><a href="products.html">Services</a></li>
                        <li class="leftmenu"><a href="faqs.html">FAQ'S</a></li>
                        <li class="leftmenu"><a href="catalogs_all.html">Catalogs</a></li>
                        <li class="leftmenu"><a href="form_online_quotes.html">Quick&nbsp;Quote</a></li>
                        <li class="leftmenu"><a href="forms.html">Forms</a></li>
                        <li class="leftmenu"><a href="about_us.html">About&nbsp;Us</a></li>
                        <li class="leftmenu"><a href="contact_us.html">Contact&nbsp;Us</a></li>
                        <li class="leftmenu"><a href="sitemap.html">Site&nbsp;Map</a></li>
                    </ul>
                </div>
                <div class="content">
                    <div style="float: left; width: 700px;">
                        <div style="float: left; width: 380px;">
                            <div style="float: left;">
                                <div style="padding-bottom: 10px;">
                                    <a href="spirit.html">
                                        <img src="mplus/images3/Index_spirit_pict2.jpg" alt="Spirit" style="width: 239px; height: 246px;
                                            border: 0px;" /></a>
                                </div>
                                <div style="color: Red; font-size: large; width: 239px; text-align: center;">
                                    <a href="web_service.html" style="color: Black; font-size: large; font-weight: bold;">
                                        Need an Online Store for your club or business?</a>
                                    <br />
                                    We create FREE Custom Apparel Stores!
                                </div>
                            </div>
                            <div style="width: 100px; text-align: center; float: right;">
                                <a href="business_wear.html">
                                    <img src="images/logowear_sm.jpg" alt="Starter Special" style="width: 132px; height: 83px;
                                        border: 0px;" /></a> <a href="starter_special.html">Embroidered Logo Shirts Starter
                                            Special<span style="color: Red;">-ONLY $85!</span></a>
                            </div>
                        </div>
                        <div style="float: right; font-size: medium; width: 270px;">
                            Phone/ Fax: (518) 374-5220<br /><br />
                            1819 State Street<br />
                            Schenectady, NY 12304<br />
                            <p style="font-size: small; font-style: italic;">(3 Buildings east of Blue Ribbon Diner)<br />
                            Parking: Right at our front door or in shared lot to the right of our building.</p><br /><br />
                            Hours: Mon-Fri 9:00 - 5:00 EST<br />
                            <p style="font-size: small; font-style: italic;">Weekend and After Hours happily by Appointment</p><br />
                        </div>
                    </div>
                    <div style="float: right; text-align: center; padding-right: 20px;">
                        <a href="/wool_jackets.html" style="display: block;">
                            <img src="images/w_guild_front_sm.jpg" alt="Guild Front" style="width: 109px; height: 112px;
                                border: 0px;" /></a> <a href="blanket.html" style="display: block;">
                                    <img src="images/Blanket_sweat_red.jpg" alt="Blanket Sweat Red" style="width: 136px; height: 92px;
                                        border: 0px;" /><div>
                                            Sweatshirt Blankets</div>
                                </a><a href="wool_capital.html" style="display: block;">
                                    <img src="mplus/images3/w_SHS_back_sm.jpg" alt="SHS Back" style="width: 122px; height: 112px; border: 0px;" /></a>
                        Capital District NY
                    </div>
                </div>
            </div>
        </div>
        <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1">
        </b></b>
    </div>
    <div class="footer">
        <div class="description">
            Since 1981, <span class="description">Monograms Plus</span> has been providing high-quality
            imprinted sportswear in Schenectady, NY. We offer custom screen printing and embroidery
            to the community at large, with friendly customer service, quality custom work,
            and competitive pricing. Come by and get your school, business or company apparel.</div>
        <div>
            <div class="bottommenu">
                <a href="/index.html" class="bottommenu">Home</a>| <a href="/about_us.html" class="bottommenu">
                    About&nbsp;Us</a>| <a href="/online_store.html" class="bottommenu">Online&nbsp;Store</a>|
                <a href="/products.html" class="bottommenu">Services</a>| <a href="/search.html"
                    class="bottommenu">Search</a>| <a href="/faqs.html" class="bottommenu">FAQ's</a>|
                <a href="/contact_us.html" class="bottommenu">Contact&nbsp;Us</a>| <a href="/links.html"
                    class="bottommenu">Links</a>| <a href="/return_policy.html" class="bottommenu">Returns</a>|
                <a href="catalogs_all.html" class="bottommenu">Catalogs</a>
            </div>
        </div>
        <div style="font-size: small; text-align: center; padding: 4px;">
            Monograms&nbsp;Plus&nbsp;All&nbsp;rights&nbsp;reserved.&nbsp;Updated&nbsp;7/04/11</div>
    </div>
</body>
</html>

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.

I've made an image to explain my problem pretty well :


imgur dot com /n8uOX

(apparently I am not allowed to posts links , however its kinda hard for me to explain the problem so its easier to just show it)

basically i want my page to always be rendered as I intended it to.
I am pretty sure my coding is quite bad and thats what caused the problem , yet if anyone have any way to fix this please post in this thread.


Thanks

Can anyone tell me where I can get some info on CSS? Specifically I am trying to create sort of a news page, which will have a box that contains news articles that slowly scroll upwards until they disppear and then raeppear at the bottom at the bottom of the box again. I know this can be done with CSS and I've kind of accomplished what I want. The problem is that I'm using seperate elements for each article title. Therefore, only one article title scrolls through the box at the time since I can only make one element visible. Mabye, it will make more sense when you see my code. I want to basically be able to have the other news article titles begin to scroll underneath each other, not having to wait for the news article title above it to finish scrolling before the next article enters the box. I hope this makes sense! here is the code:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

function init() {
nos = 1;
items = 6;
posY = 130;
scroller();
}

function scroller() {
if (nos == items + 1) {
nos = 1;
}
elemID = 'elem'.concat(nos);
objDOM = document.all[elemID].style;

objDOM.visibility = "visible";
posY -= 1;
objDOM.top = posY;
if (posY <= 50) {
objDOM.visibility = "hidden";
posY = 130;
nos += 1;
}
setTimeout ("scroller()",10);
}
// -->
</SCRIPT>

<STYLE TYPE="text/css">
<!--
#elem1 {position:absolute; visibility:hidden; left:35;
top:0; z-index:5}
#elem2 {position:absolute; visibility:hidden; left:35;
top:0; z-index:5}
#elem3 {position:absolute; visibility:hidden; left:35;
top:0; z-index:5}
#elem4 {position:absolute; visibility:hidden; left:35;
top:0; z-index:5}
#elem5 {position:absolute; visibility:hidden; left:35;
top:0; z-index:5}
#elem6 {position:absolute; visibility:hidden; left:35;
top:0; z-index:5}
#screen {position:absolute; visibility:visible; left: 20px;
top:50px; z-index:0}
-->
</STYLE>
</HEAD>

<BODY onLoad="init()">

<DIV ID="elem1"><FONT COLOR="#000000">
News & Events- article 1
</FONT></DIV>

<DIV ID="elem2"><FONT COLOR="#000000">
News & Events- article 2
</FONT></DIV>

<DIV ID="elem3"><FONT COLOR="#000000">
News & Events- article 3
</FONT></DIV>

<DIV ID="elem4"><FONT COLOR="#000000">
News & Events- article 4
</FONT></DIV>

<DIV ID="elem5"><FONT COLOR="#000000">
News & Events- article 5</FONT></DIV>

<DIV ID="elem6"><FONT COLOR="#000000">
News & Events- article 6</FONT></DIV>

<DIV ID="screen">
<TABLE WIDTH=350 HEIGHT=120 BORDER=0 BGCOLOR=#808080>
<TD></TD></TABLE>
</DIV>

</BODY>
</HTML>