Scroll bar problems in nested div

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
groovejuice
Forum Newbie
Posts: 4
Joined: Thu Nov 17, 2005 2:07 pm

Scroll bar problems in nested div

Post by groovejuice »

~pickle | please use [ php ] [ /php ] tags when posting code :arrow: Code posting guidelines

I'm experiencing a real problem with an overflow:scroll div. I'm calling up an external file with this code:

Code: Select all

if (!isset($_GET['page'])) $page= 'aboutconcert'; 
 switch($page)
{
case 'aboutconcert': include ('aboutconcert.htm');break;
The idea is to swap files in a specified div when clicking on a link. This works as expected, except that mouse wheel scrolling within the div is not functioning properly. I managed to fix the problem in IE6 by nesting the external div and giving it a div style of :"overflow:inherit". If other parameters are added such as specified position, width, height, etc, then it fails. No combination seems to work in Firefox (which displays 2 side-by-side scrollbars), and in Netscape the scrollbars function, but the wheel scroll won't.....

Any suggestions would be very welcome.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

Moving to client-side
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
groovejuice
Forum Newbie
Posts: 4
Joined: Thu Nov 17, 2005 2:07 pm

Post by groovejuice »

Thanks for correcting my syntax and for pointing out the correct method for posting code. I'm sorry, as it is my first post on this forum. Perhaps you have a suggestion for my code issue as well?! :D
yum-jelly
Forum Commoner
Posts: 98
Joined: Sat Oct 29, 2005 9:16 pm

Post by yum-jelly »

Do you have a real example, showing what you are doing. I do understand what you are saying but giving a example exactly showing what you are doing will help others see what maybe is wrong with your example!

yj
groovejuice
Forum Newbie
Posts: 4
Joined: Thu Nov 17, 2005 2:07 pm

Post by groovejuice »

Here is the URL for the page in question. As you can see, the mouse wheel scrolls properly in the center (text) div in IE 6, independant of the body scroll bar. In Firefox 1.07 it is a mess.....

http://www.mpchospitality.com/test/newsletter.php
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

you might try changing the overflow property value to "auto".

you should also remove the nesting as I don't think that's doing anything for you...

edit:

as another posting "tip", I suggest that you paste your code directly in here so that we can see it using the

Code: Select all

or

Code: Select all

tags.  Asking us to view your page then view its source adds two more steps to the process and you're less likely to get the help you need....
yum-jelly
Forum Commoner
Posts: 98
Joined: Sat Oct 29, 2005 9:16 pm

Post by yum-jelly »

I dont see any scrollbar because width and height don't work when you use * overflow:scroll *

Change this line... ( the first * #intro2 * line in your messy CSS )

Code: Select all

#intro2 {MARGIN:0px; PADDING-RIGHT:0px;PADDING-LEFT:0px;Left:195px; WIDTH:524px;HEIGHT:470px;  TEXT-ALIGN: left; TOP:240px;COLOR: #111111;POSITION: absolute; Z-INDEX:7 ;FONT-SIZE: 16px;Font-weight:bold ;font-family: times new roman, times,serif;LINE-HEIGHT:17px;BACKGROUND-COLOR:transparent;overflow:scroll;}

to this.... (it will fix problem)

Code: Select all

#intro2 {
		top : 240px;
		left : 202px;
		color : #111111;
		width : 524px;
		margin : 0px;
		height : 460px;
		z-index : 7;
		overflow : auto;
		position : absolute;
		font-size : 16px;
		text-align : left;
		background : transparent;
		line-height : 17px;
		font-weight : bold;
		font-family : times new roman, times,serif;
		padding-left : 0px;
		padding-right : 0px
	}

As a side note, you got to many things assigned in your CSS that are not needed. I would do some reading so you understand when to use something and when not to. In other words you can achieve the same thing your doing with less than half of the CSS definitions you are currently using!

yj
groovejuice
Forum Newbie
Posts: 4
Joined: Thu Nov 17, 2005 2:07 pm

Post by groovejuice »

Thanks Burrito and yum jelly for your suggestions. In the future I will certainly post all the relevant code and in the proper format.
Burrito, I'm using the nested div because, for reasons beyond my imagination, it appears to be necessary in order for the wheel scrolling to function properly in the text (nested) div - otherwise the primary scroll bars in the body seem to take precedence!? Interestingly, when the text content is part of the html coding on the main (php) page, it works fine. But when the div content is called as a php include then the scrolling problems begin.

yum jelly, your point about the messy code is well taken.

Since my initial post, I have upgraded Firefox to 1.5 beta and the scrolling now works as planned in that browser also. Netscape 8.0 still defaults to the body scroll bars, but I can live with that, I suppose.

Thanks to all who contributed and made valuable suggestions. It is very appreciated.
Post Reply