The scroll bar is visible on the scroll box, but unfortunately it is not functional in Internet Explorer 8

http://example.com/code

  <div style="width:625px;height:220px;overflow-y:hidden;overflow-x:scroll;z-index:10;">
                <table width="1000" height="114" border="1">
                      <tr>
                        <td width="126"><blockquote>
                          <blockquote>
                            <blockquote>
                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fringilla velit eu felis vehicula, a tempor lorem aliquet. Sed ultricies purus eu lacus dictum, ultrices porta mauris eleifend.</p>
                            </blockquote>
                          </blockquote>
                        </blockquote></td>
                        <td width="126"><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam auctor nisi eu erat posuere, eu ultricies tortor pellentesque. Donec vel ante velit. Fusce sem purus, aliquet in nisi et, vulputate posuere purus.</p></td>
                        <td width="126"><p>Suspendisse potenti. Etiam viverra pellentesque molestie. Donec nec nulla in diam semper mattis. Fusce ultrices tellus sit amet quam viverra, ac egestas felis faucibus. Sed euismod nulla vel sapien gravida, ut dapibus sem sagittis.</p></td>
                        <td width="126"><p>Pellentesque fermentum ex sit amet feugiat lacinia. Mauris aliquet ac turpis in dictum. Quisque efficitur velit non leo feugiat, eu fermentum sapien accumsan. In hac habitasse platea dictumst.</p></td>
                        <td width="126"><p>Proin aliquam ex id risus finibus, at tristique mi convallis. Nulla facilisi. Curabitur eget diam non turpis euismod auctor. Suspendisse eleifend erat in sem consectetur dapibus.</p></td>
                        <td width="126"><p>Phasellus tempor leo vel purus tristique, id tincidunt ligula vehicula. Integer eu nisi vel turpis feugiat hendrerit. Mauris pulvinar augue nec neque ultricies rhoncus.</p></td>
                      </tr>
                    </table>
                    </div>

When scrolling in IE 8, the text below the scrollbar gets highlighted. How can I resolve this issue?

Check out the fiddle link to see the complete code.

htmlcssscrollbar

Answer №1

Feel free to incorporate the following code snippet into your CSS file:

   -webkit-overflow-scrolling: touch;

Hopefully, this proves useful to you...

Best of luck!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing the rotation of an element using 'Transform: rotate' upon loading a webpage with the help of Jquery, Javascript, and

A div element designed to showcase a speedometer; <div class="outer"> <div class="needle" ></div> </div> The speedometer animates smoothly on hover; .outer:hover .needle { transform: rotate(313deg); transform-origin: ce ...

javascriptjqueryhtmlcsscss-animations

What is the method for inserting a line break following an input element using CSS?

I am utilizing a service that provides me with dynamic HTML containing labels and inputs as shown below: input:after { content: "\a"; white-space: pre; } <label for="username">Username</label> <input type="text" id="username" nam ...

htmlcsspseudo-element

Blue outlined React Select dropdown with search functionality

When the dropdown is searchable, there seems to be a blue outline around the cursor: Link to image To remove the cursor, you can use this CSS: .Select-input > input { color: transparent; } Is there a way to also eliminate the blue outline on f ...

cssreactjssassreact-select

Why won't the display: block CSS style apply to my div element?

Take a look at my code: https://jsfiddle.net/r62p4209/ I created a search bar with company brand name and some buttons on the right, positioned in the center. My aim is for the search bar (from "search by:" to the "Go!" button) to move onto the next lin ...

htmlcssdisplay

Ways to resolve the issue of being unable to retrieve data using jQuery

My code is working, but I am facing a little annoying problem that I can't solve on my own. The problem is that I can only retrieve the first record (id) from my data grid, but I can't retrieve the second or any other record id. For example: W ...

phpjqueryhtmlajax

Ensure that the navigation menu is consistently displayed properly, without any of its contents extending beyond the

I am experiencing an issue with the navigation menu on my website. Everything looks great in normal view, but when I resize the browser window to a smaller width, the menu ends up overflowing below the main content. I want the navigation menu to always dis ...

htmlcss

Prioritizing the validation of form controls takes precedence over redirecting to a different URL in Angular 2

Within an HTML page, there is a form with validation and an anchor tag as shown below: <form #loginForm="ngForm" (ngSubmit)="login()" novalidate> <div class="form-group"> <label for="email">Email</label> <i ...

htmlangularangular2-routingangular-validation

What could be causing my Bootstrap (3) grid to not display responsively?

It seems like there may be a simple oversight in my code, as I'm unable to make my Bootstrap grid responsive. I have successfully passed item data through Node and am able to display a grid of item thumbnails with captions in rows of 4. However, when ...

cssnode.jstwitter-bootstrapexpresstwitter-bootstrap-3

Ways to retrieve HTML tags from a website's DOM and shadowDOM

I am currently working on a project using NodeJS where I need to extract the HTML structure of multiple websites. However, I am facing some challenges with this task. My goal is to retrieve only the HTML structure of the document without any content. It is ...

javascripthtmldomshadow-domtreewalker

Save picture in localStorage

Hello, I am currently working on a page where I need to retrieve an image from a JSON file and store it locally. Below is the code I have been using: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min. ...

javascriptjsonhtml

How can you ensure your CSS code is functional across various browsers?

I have been exploring CSS and HTML for about a week now, but I am facing a challenge that has me stuck for the past thirty minutes. The issue lies in adapting this code to work smoothly across different browsers. While it aligns images in a row of four per ...

htmlcssimagecross-browser

Discover how to retrieve the calculated percentage within CSS with the assistance of jQuery specifically designed for Webkit

I'm currently working on a simple sliding animation. However, the div that slides in is utilizing percentages for its width and right positioning. The issue arises specifically in Webkit browsers. When using jQuery to retrieve the value, it returns t ...

javascriptjquerycss

Unable to create slides with Fancybox if the content is in HTML format

I'm not sure if this issue is a bug or if it's just a restriction of fancybox. Can anyone confirm if it's possible to create a gallery using HTML elements? I've been attempting to accomplish this for hours without success. Here is the ...

jqueryhtmlfancybox-2

What is the reason that a Button's text does not adhere to CSS style rules within the container that holds the button?

Imagine having this ASP.NET/CSS snippet: <div style="color:Red;"> some text...<asp:Button runat="server" ID = "Button1" Text = "ABC" /> </div> The "some text" section is displayed in red, however, the button's text remains bla ...

asp.netcss

Nesting a DIV tag within another DIV tag

Being relatively new to web design, my understanding of the DIV tag is that it serves as a logical container for whatever content is inside, and those elements will be formatted according to its rules. I have an outer DIV tag styled as <div style="margi ...

htmlalignment

Is it possible to reset the text within the text box when the form is being submitted using the load() ajax function?

I am working on implementing a comment feature where the data entered in the form is appended and displayed after submission. Here is my HTML form: <table> <tr><td>Name :</td><td> <input type="text" id="name"/></td&g ...

javascriptphphtmlajaxforms

Retrieve the input value from a Bootstrap Form Input

When using a Bootstrap Form Input to allow the user to enter text, I am wondering how to save that text and use it as a parameter in a function. Below is the HTML snippet I have: <!--Directory Input Form--> <div class="row"> <div class= ...

jqueryhtmlangularjstwitter-bootstrapangular

Does Vue.js interfere with classList.remove functionality?

When working with Vue.js, I encountered an issue where elements would briefly flash curly braces to the user before being hidden. To combat this problem, I implemented the following solution: HTML: <div class="main hide-me" id="my-vue-element"> ...

cssdomvue.js

What is the best way to dynamically adjust the size of a Google map on my website automatically

I need assistance with placing a Google map on a webpage along with textboxes in the div below it: <div id="map_area"> <div id="map_canvas"></div> </div> <div id="date_range"> <input type="text" id= ...

csshtmlheight

The art of website creation: incorporating images into the background and using image tracing techniques

Trying to figure out where to find a solution for this. I had the idea of using a semi-transparent Photoshop design as a background and building on top of it, almost like tracing over it. This way, aligning things would be much easier. I remember Microsoft ...

htmlcssimagetrace