• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4234
  • Last Modified:

Define scrolling style for DIV in Firefox issue

<style>
            #shoppingcart{scrollbar-face-color:#666666; scrollbar-shadow-color:#666666; scrollbar-highlight-color:#666666; scrollbar-3dlight-color:#66666;scrollbar-darkshadow-color:#ffffff; scrollbar-track-color:#cccccc; scrollbar-arrow-color:#ffffff}
            </style>
            <table  cellspacing="0" cellpadding="0" width="240" align="center" bgcolor="#ffffff">
        <tr>
            <td colspan="2" style="padding-left: 10px;padding-right: 10px" bgcolor="#ffffff">
                <div id="shoppingcart" STYLE="HEIGHT:50px; TOP: 0px; WIDTH:220px; overflow:auto;overflow-y: auto; overflow-x: hidden">
                           <table cellspacing="0" cellpadding="0" width="220" bgcolor="#ffffff">
                        <tr>
                            <td  width="80" align="center" valign="middle">
                               
                            </td>
                            <td width="140">
                               
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-bottom: 10px; padding-top: 10px;">
                                <table cellspacing="0" cellpadding="0" width="220">
                                    <tr><td bgcolor="#cccccc"><img src="/img/top_nav/empty.gif" width="1" height="1" border="0"></td></tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td  width="80" align="center" valign="middle">
                             
                            </td>
                            <td width="140">
                            text
                            </td>
                        </tr>
                                     <tr>
                            <td colspan="2" style="padding-bottom: 10px; padding-top: 10px;">
                                <table cellspacing="0" cellpadding="0" width="220">
                                    <tr><td bgcolor="#cccccc"><img src="/img/top_nav/empty.gif" width="1" height="1" border="0"></td></tr>
                                </table>
                            </td>
                        </tr>
                                     <tr>
                            <td  width="80" align="center" valign="middle">
                               text
                            </td>
                            <td width="140">
                              text
                            </td>
                        </tr>
                                     <tr>
                            <td colspan="2" style="padding-bottom: 10px; padding-top: 10px;">
                                <table cellspacing="0" cellpadding="0" width="220">
                                    <tr><td bgcolor="#cccccc"><img src="/img/top_nav/empty.gif" width="1" height="1" border="0"></td></tr>
                                </table>
                            </td>
                        </tr>
                                     <tr>
                            <td  width="80" align="center" valign="middle">
                               
                            </td>
                            <td width="140">
                             text
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-bottom: 10px; padding-top: 10px;">
                                <table cellspacing="0" cellpadding="0" width="220">
                                    <tr><td bgcolor="#cccccc"><img src="/img/top_nav/empty.gif" width="1" height="1" border="0"></td></tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td  width="80" align="center" valign="middle">
                             
                            </td>
                            <td width="140">
                            text
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
            </table>
0
alexk23
Asked:
alexk23
  • 2
1 Solution
 
RichieHindleCommented:
You can't do it.  Custom scrollbar styles are an Internet Explorer feature, not supported in Firefox.
0
 
hujiCommented:
They are supported in Opera too, but not in Firefox. It is because Firefox follows the web standards to its best, and costumizing the scrollbars is not a standard feature of a web page.
0
 
alexk23Author Commented:
Do you suggest any other implementation so I would be able to customize it like height width and style for v scrolling, What about irame would it be possible to use that.

Thank you
0
 
hujiCommented:
I only can think of one thing: You can use a Flash box in your page, in which you define the scrollbar color etc. However, you may need to create one flash file for each of the boxes, or store them in a DB and let Flash get them from there, using parameters. I'm not very good at it.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now