Unusual issue with IE 7 when using a fixed width absolute table header

Struggling once again with IE7 on this particular issue.

I have created a fixed header scrollable body table primarily using CSS, with horizontal scrolling requiring javascript. It is a modified version inspired by this example. The design appears satisfactory in Chrome, Firefox, and IE8+, but in IE7 (and possibly lower versions) the header behaves erratically, like a rebellious black sheep, leaving me puzzled.

Any solutions, enhancements, recommendations, or adjustments are welcomed and appreciated. :)
(I aimed for a Windows-style appearance)

View a live jsFiddle here

See a side-by-side comparison image between Firefox and IE7 below

htmlcssinternet-explorerscrollfixed-header-tables

Answer №1

Perhaps consider a different approach for IE7 :)

First and foremost - it appears that the term operation in the third column is hidden everywhere except on IE - which seems to be the root of the issue. IE does not seem to recognize the height: inherit declaration on the div. Setting it to 22px seemed to solve the problem - at least preventing layout breakage. Check it out here - http://fiddle.jshell.net/6T3h4/6/

However, the border still poses an issue... my suggestion is to remove the border specifically for IE7 by using *border: 0; which will only affect IE7.

Consequently - this will result in a more visually appealing display compared to your current one))) take a look here: http://fiddle.jshell.net/6T3h4/7/ (in this instance, I simply removed the border to expedite the process - causing it to disappear across all browsers. Utilize *border: 0; instead if desired)

This serves as part of a solution, use it only if you cannot identify why IE is positioning elements incorrectly within thead. Consider it a last resort, rather than a standard practice ;) If time permits, I may delve deeper into this issue, although it may not be necessary)

Answer №2

Try incorporating the following code:

table.list tfoot tr {*position: relative;} /* Specifically for IE 7 */

I have been attempting to target the tfoot element without success.

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

Displaying information collected from a submission form

I am in the process of designing a cheerful birthday card and I need to transfer data from a form to the birthday card page. How can I take information from the first div (which contains the form) and display that data in the second div? <!DOCTYPE ...

javascripthtmlcss

Unsuccessful attempt at a basic CSS transition - no success

I'm currently trying to create an image with a gradient that disappears on hover, but I'm struggling to get the transition effect to work. I've experimented with various webkit transitions without success. Here's the HTML: <a href= ...

htmlcsshovercss-transitions

The button remains stationary when it is clicked

After creating a button that should move to a random position upon being clicked, I encountered an issue with the document.style.top property not functioning as expected. I have already created two variables for height and width to generate random values, ...

javascripthtmlfunctionbuttonposition

Clicking on a select box causes the scrollbar area to vanish, shifting all the page content to the right

I have successfully implemented overflow-y: scroll; to keep the scrollbar space always reserved and prevent content from shifting when the scrollbar appears. However, I noticed that when I click on a select element, this scrollbar space is lost. How can I ...

cssreactjssassmaterial-uireact-hooks

Effects of hovering on navigation links in gatsby

I am currently working on developing a static website using Gatsby and I am facing some challenges. I am trying to implement a hover effect for the menu items in the navigation bar, but I am encountering difficulties with the CSS classes including Site-hea ...

htmlcss

Attempting to implement CSS onto jQuery slideToggle upon the clicking of links

Need to implement a show/hide functionality for a series of lists using jQuery slideToggle. After clicking on the hyperlinks that trigger the show/hide action, I want to change the CSS style of those hyperlinks and then revert back to the original style up ...

c#jquery.netcssslidetoggle

Weather Application featuring Circular Slider

I've been on the hunt for a circular slider animation. Imagine it working like this: <input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" /> <span id="range">0</span> function showValue(newValue ...

javascriptjqueryhtmlcssslider

Turn off scroll bar to create a seamless browsing experience on your website

As I work on creating the frontend for a single-page website with seamless scrolling between divs, I'm looking to eliminate mouse scrolling altogether. I understand that using overflow:hidden; can hide scroll bars, but my goal is to make the page scr ...

javascriptjqueryhtmlcss

Having trouble getting my HTML file and CSS styles to render properly in Chrome

Currently, I am in the process of developing a website and facing challenges with displaying CSS properties accurately. Despite seeking input from friends and users, my HTML file is not rendering as expected within various browsers such as Chrome, Edge, an ...

javascripthtmlcssbootstrap-4

Enhancing x-axis presentation in D3.js-generated charts

I created a bar chart using D3.js, but I have encountered an issue with one of the values on the x-axis being too long. I attempted to use CSS properties like text-overflow: ellipsis, width: 10px, and overflow: hidden to abbreviate values that exceed a cer ...

javascriptcssd3.js

Displaying an iframe in Internet Explorer

My current setup involves a button that triggers the loading and printing of a report within an "invisible" iframe enclosed in a div. This process allows users to print the report from a different page without any visual disruption or changing pages, aside ...

javascriptinternet-exploreriframecross-browser

Avoid incorporating unicode characters in Angular 4

How can I prevent users from using unicode characters in a text field in my front-end developed with Angular 4 framework? For example: ½ -> U+00BD ('onehalf') ...

htmlangulartypescript

Adjust the border color of the <input> element when it is clicked on

I'm currently working on a login screen for my next.js application and I've encountered an issue where the border color changes to a mixture of white and blue when I select an input field. https://i.stack.imgur.com/R2yKa.png I attempted to reso ...

htmlcssnext.js

Sending a file from an HTML5 webpage to a Node.js server through a POST request

Hello there, I am looking to create a file upload web page using HTML5 and a Node.js based server. I do not want to use the form tag on the client side, and I need to send additional data about the file to the server. To achieve this, I am utilizing custo ...

node.jshtmlformidable

CSS 4.0 Validation Error: The property name "-webkit-text-decoration" is unrecognized in this context

After completing the Udemy course The Complete ASP.NET MVC 5 Course, I encountered an issue with Bootstrap. Despite having the latest versions of Bootstrap, jQuery, and popper.js installed, the functionality simply did not work as expected on my project. I ...

cssasp.net-mvcbootstrap-4

Conceal the pagination element within the Bootstrap aside on smaller screens

I am experiencing an issue with my web page layout. I have a DIV and an Aside element, inside the DIV there is a list with dynamic pagination. Everything seems to be functioning correctly, however on small devices, the Aside section is covering up the pa ...

javascripthtmlcsstwitter-bootstrappagination

Tips for modifying the font style of a Bootstrap form input using a custom font

While developing my website using Bootstrap 4, I encountered an issue with the custom font (GeosansLight) I applied to the entire website through the body's CSS attribute. The problem arose when the default Bootstrap form inputs appeared too light to ...

csshtmlbootstrap-4

Can a rotationX be applied within an existing rotationX?

I have a collection of 3 divs labeled a, b and c inside a container. The container is rotatedX by 90 degrees, giving the appearance that it is "lying on its back". Now, I am trying to rotate the a, b, and c divs so they appear to be "standing up" again. Ho ...

htmlcsscss-transforms

Tips for ensuring that your website can recall which call-to-action (CTA) has been selected for redirection

I'm attempting to create a bilingual webpage in Spanish and English. My goal is to have a main page where the user selects the language, and once chosen, the page remembers the language preference for future visits instead of prompting the choice agai ...

javascripthtmlcssbutton

The SetTimeout tooltip will only appear when the mouse is moved

Utilizing the Cool DHTML tooltip script provided by © Dynamic Drive DHTML code library, I have customized it to display a tooltip that I created. To ensure that the Tooltip does not appear instantly, I have incorporated a simple code modification: Upon ...

javascripthtml