Page 1 of 1

Scroll bar problems in nested div

Posted: Thu Nov 17, 2005 2:29 pm
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.

Posted: Thu Nov 17, 2005 2:36 pm
by pickle
Moving to client-side

Posted: Thu Nov 17, 2005 2:49 pm
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

Posted: Thu Nov 17, 2005 3:04 pm
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

Posted: Thu Nov 17, 2005 4:19 pm
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

Posted: Thu Nov 17, 2005 7:47 pm
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....

Posted: Thu Nov 17, 2005 7:54 pm
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

Posted: Fri Nov 18, 2005 10:52 am
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.