Scrollbar problems

Partners:

Threaded Mode | Linear Mode

Scrollbar problems

Author Message

online.education

Bronze Junior Member

Group: Members
Posts: 38
Joined: Jul 2007
Status: Offline
Reputation: 0
SD$: 39

Post: #1

Scrollbar problems

The following scrollbar works in Firefox but it doesn't look right. Looks right in IE but it doesn't work.

The following is the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

    <title>Scrollbar Test</title>

    <meta name="Author" content="">

    <meta http-equiv="imagetoolbar" content="no">

    <style type="text/css">

html {

    overflow: hidden;

}

body {

    margin: 0px;

    padding: 0px;

    background: #7E797F;

    position: absolute;

    width: 100%;

    height: 100%;

    filter: alpha(opacity=100);

}

#accordionFrame

{

   background-color: #0D0D0D;

   border: 1px solid #888888;

   position: relative;

   margin-top: 60px;

   margin-top: 60px;

   left: 30%;

   top: 10%;

   height: 75%;

   width: 30%;

   padding: 5px;

}

#accordion

{

   height: 100%;

   width: 100%;

   overflow: auto;

   scrollbar-face-color: #0D0D0D;

   scrollbar-highlight-color: #888888;

   scrollbar-3dlight-color: #0D0D0D;

   scrollbar-darkshadow-color: #0D0D0D;

   scrollbar-shadow-color: #888888;

   scrollbar-arrow-color: #888888;

   scrollbar-track-color: #0D0D0D;

}

.contentRight

{

   position: relative;

   color: #888888;

   text-align: justify;

   font: normal 13px/120% Tahoma, Verdana, Arial;

   padding: 2%;

   width: 90%;

}

    </style>

</head>

<body>

        <div style="position: absolute; height: 100%; width: 100%;">   

      <div id="accordionFrame">

         <div id="accordion">Test

            <div class="contentRight">

               <p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>

               <p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>

               <p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>

               <p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>

               <p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>

               <p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>

               <p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>

               <p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>

               <p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>

               <p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>

            </div>

         </div>

      </div>

   </div>

</body>

</html>

Basically, I'm trying to create a little bit of space outside of the scrollbar, and it seems that that's where all these problems are created.

q1. This doesn't look right in Firefox. How can I fix the look?

q2. This doesn't work in IE at all though the scrollbar itself looks fine. How can I fix this problem?

The whole point of creating a couple of div is that I want to create a little bit of space outside of the scrollbar. If I can accomplish this by creating yet another div, I would like to use that method instead.

I'd greatly appreciate your help in advance.

online.education

01-22-2008 04:22 PM

Brian

Member

Group: Administrators
Posts: 289
Joined: Feb 2006
Status: Offline
Reputation: 0
SD$: 328

Post: #2

RE: Scrollbar problems

The only browser that supports a custom scrollbar is IE (plus those browsers that decided to support IE's proprietary css techniques). So the only solution to getting it to look correctly in firefox would be to design your own scrollbar of some sort.

I will have to play around with why it doesn't work correctly in firefox however.

Brian

01-23-2008 03:19 AM

online.education

Bronze Junior Member

Group: Members
Posts: 38
Joined: Jul 2007
Status: Offline
Reputation: 0
SD$: 39

Post: #3

RE: Scrollbar problems

Brian Wrote:

I saw this done using DHTML, so maybe that's what I need to do.

Also there are tutorials on how to create custom scrollbars in Firefox. I was wondering what those tutorials are for, but now, I'm understanding why ...

online.education

01-23-2008 01:56 PM

« Next Oldest | Next Newest »

View a Printable Version
Send this Thread to a Friend
Subscribe to this Thread | Add Thread to Favorites