Right Side Scrolling Bar – SAFARI

@CreativeMindJul 20.2007

Hi all,

Anyone ever came across SAFARI browser that the Right Side Scrolling Bar does NOT scroll either up or down? The scrollbar is completely lock in and can not even move the page at all. However, when I expanded the web page wider, it works fine. But when I drag the web page until the scrollbar is on TOP of the contents, than it does not work. So the right scrolling bar will ONLY work when it is not over the page content. I want to make the scrolling right side bar work either on text contents or when a user want to expand the whole web page wider.

Below is the code within the HTML page:

[CODE]<DIV id=contentWrapper> <DIV id=contentHolder> <DIV id=studentContent><!– START STUDENT CONTENT –> <DIV style=”LEFT: 0px; WIDTH: 1130px; POSITION: absolute; TOP: 0px; HEIGHT: 1130px”> <DIV id=Layer1 style=”Z-INDEX: 1; LEFT: 0px; WIDTH: 1130px; POSITION: absolute; TOP: -7px; HEIGHT: 68px”> <IMG height=79 alt=”” src=”415a_files/greendots.gif” width=1130></DIV></DIV> <DIV id=studentlayer1 style=”LEFT: 14px; WIDTH: 505px; POSITION: absolute; TOP: 81px; HEIGHT: 945px”> <DIV class=laBigRedFont>EMOTION</DIV> <DIV class=lafivespacetop></DIV> <DIV class=laHead1>Fluency</DIV>[/CODE]

Below is the CSS:

[CODE]} #contentWrapper { Z-INDEX: 1; LEFT: 0px; MARGIN: 0px; OVERFLOW: auto; WIDTH: 100%; POSITION: absolute; TOP: 70px; HEIGHT: 600px } #contentHolder { OVERFLOW: hidden; WIDTH: 100%; POSITION: absolute; HEIGHT: 955px } #studentContent { LEFT: 20px; OVERFLOW: hidden; WIDTH: 1133px; POSITION: absolute; TOP: 15px; HEIGHT: 885px; BACKGROUND-COLOR: white }[/CODE]

I have attached a picture as an example when the scrollbar is drag over the contents within SAFARI.

Thanks! ?

~~[upl-file uuid=1f6888b1-ba6d-452c-a2c7-5747637dad0f size=32kB]~~SCROLLING SIDE BAR.JPG[/upl-file]

to post a comment

HTML

2 Comments(s) _↴

@CreativeMindauthorJul 20.2007 — #Here are more code for you to look at within the html page:

[CODE]<DIV style="LEFT: 593px; WIDTH: 531px; POSITION: absolute; TOP: 81px; HEIGHT: 810px">
 <DIV style="LEFT: -20px; WIDTH: 530px; POSITION: absolute; TOP: 0px; HEIGHT: 573px">
 <DIV class=laBigRedFont>RETEACH</DIV>
 <DIV class=lafivespacetop></DIV>
 <DIV class=laHead1><IMG title="Target Skill" height=29 alt="Target Skill" 
 src="415a_files/targetskill_big.gif" width=36 align=absMiddle> Compare and 
 Contrast</DIV>
 <DIV id=laYellowLine2></DIV>
 <DIV class=laBigGreen id=laLshape1 align=center>TEACH</DIV>
 <DIV class=laMainText>Review the definition of <EM>compare and contrast</EM> on 
 <A class=laLink 
 href="http://168.146.123.112:8080/reading/te_07/output/grade4/unit4/392-393.html">p. 
 000</A>. Students can complete Practice<BR>Book p. 000 on their own or as a 
 class. As they read the Practice Book passage, have<BR>them think about how 
 Kim's performance is the same and different in the two shows.<BR>They could also 
 circle sentences that tell how the second show was different to help<BR>them 
 complete the chart.</DIV>
 <DIV class=lafifteenspacetop></DIV>
 <DIV class=laBigGreen id=laLshape2 align=center>ASSESS</DIV>
 <DIV class=laMainText>Have students use pp. 000 and 000 to compare and contrast 
 Victor's behavior before <BR>and after he meets Houdini. <EM>(Victor is still 
 locking himself in things and walking into walls, <BR>but he is doing everything 
 a lot faster because he is excited about Houdini writing to him.)</EM></DIV>
 <DIV class=lafivespacetop></DIV>
 <DIV class=laMainText>For additional instruction on compare and contrast, see <A 
 class=laLink 
 href="http://168.146.123.112:8080/reading/te_07/output/grade4/unit4/tr12.html">TR12</A>.</DIV>
 <DIV class=lafifteenspacetop></DIV>
 <DIV><IMG title="EXTEND SKILLS" alt="EXTEND SKILLS" 
 src="415a_files/161a-161b_extend.gif"></DIV>
 <DIV class=lafivespacetop></DIV>
 <DIV class=laHead1>Steps in a Process</DIV>
 <DIV id=laYellowLine3></DIV>
 <DIV class=laBigGreen id=laLshape3 align=center>TEACH</DIV>
 <DIV class=laMainText>Steps in a process are the steps involved in making or 
 doing something. When following <BR>the steps to make a craft project, cook a 
 dish, or do a magic trick, it helps to use these strategies:</DIV>
 <DIV>
 <UL class=laBulletBlack>
 <LI>Read all the steps to make sure you understand the process. 
 <LI>Think about the final result. 
 <LI>Look at any illustrations and match them to the written steps. 
 </LI></UL></DIV>
 <DIV class=laMainText>Ask students to read the steps for making an elephant 
 disappear on <A class=laLink 
 href="http://168.146.123.112:8080/reading/te_07/output/grade4/unit4/412-413.html">p. 
 000</A>. Then have them explain the steps in their own words.</DIV>
 <DIV class=lafifteenspacetop></DIV>
 <DIV class=laBigGreen id=laLshape4 align=center>ASSESS</DIV>
 <DIV class=laMainText>Have students write and illustrate the steps for doing a 
 magic trick or making a favorite<BR>recipe. To assess, check that students have 
 included all the steps, listed them in the <BR>right order, and illustrated them 
 in a helpful way.</DIV>
 <DIV 
 class=lafivespacetop></DIV></DIV></DIV>[/CODE]

@CreativeMindauthorJul 21.2007 — #I believe the reason why the right side scrolling bar does not work over the text box because the texts itself are overlapping the scrolling bar. I tried to put a (z-index: -3px) within the CSS but that still did not work. But for sure, the cause is the text contents are overlapping the scrolling bar. When I drag the web page wider to the right side, it works just fine.

Also in #HTML _↴

Lock an HTML <td> Tag DIV fits an image + left/right clickable zones (link)Beginner Q: Tables in Netscape 6.2?

Success!

Help @CreativeMind spread the word by sharing this article on Twitter...

Tweet This

Right Side Scrolling Bar – SAFARI

2 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Right Side Scrolling Bar – SAFARI

2 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #HTML _↴