Troubleshooting Problems with display:table and display:table-cell Alignment in Internet Explorer Versions 7 and 9

I have been struggling with the layout of a website that contains multiple columns. After extensive work, I believed I had everything properly aligned. Adobe BrowserLab seemed to confirm this, aside from various issues in IE6 and IE7 which I decided to overlook.

However, upon testing the site on another computer, I found that IE9 displayed it similarly to how IE7 did in BrowserLab. Specifically, the "Daily Tech Blogs" column was now positioned at the bottom of the page.

I am unable to determine the cause of this issue. As indicated in the CSS code, I utilized display:table and display:table-cell to ensure consistency across browsers (or so I thought). Initially, I used DIVs but encountered varying browser treatment. Switching to <table> elements threw off the entire layout. Here is the link to my JSFiddle:

http://jsfiddle.net/uBahh/1/

Any insights or suggestions?

htmlcssinternet-explorercss-tables

Answer №1

In my experience, I have discovered that the most effective approach is to include 

<!--[if IE 7]><body class="ie7"><![endif]-->
at the beginning of the code. This way, I can easily make adjustments using position:absolute where needed. Although I typically steer clear of hacks like this (as do many others), it was a necessary workaround specifically for IE7. In the end, it proved to be the most efficient solution rather than modifying code that functions perfectly on all other web browsers.

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

Updating a Specific Database Entry in Django Using Multiple Field Values

Hey there, I'm still learning the ropes and haven't had much time to really dive into it yet. My end goal is to create a "check-in/check-out" system by updating a timestamp from NULL to the current time based on employee number and work area. He ...

pythonhtmldjango

Unusual spacing issue observed between <div> elements on Internet Explorer, but not on Firefox or Opera

I am facing a common question that many others may have asked before, but I haven't been able to find a solution to my specific issue. When viewing my website on FF, Opera, and IE on Windows 7, everything displays correctly. However, when using IE7 o ...

htmlcssinternet-explorer

Could anyone explain to me why the "thumbnails" in my code link are not aligning in a row format as intended?

Why are my "thumbnails" not aligning correctly in the row format I want on this code link? <div class="row"> <div class= "col-md-6"> <div class="thumbnail"> <a target="_blank" href="http://codepen.io/ ...

html

Acquire a structured list of the focus order within the DOM elements

It intrigues me how the DOM is constantly changing. I'm curious if there's an easy way to retrieve a sorted list of focusable elements within the DOM at any moment. This would encompass nodes with a specified tabindex value that isn't -1, as ...

javascripthtmldomkeyboardaccessibility

What is the best way to continuously add items to a div until their heights are equal?

In my layout, I have two divs positioned next to each other. Typically, the left div displays n+2 items while the right div displays n items. The value of n changes depending on the category and is already set. However, there are instances where certain ...

javascriptjquerycssajax

Tips for placing <div .right> above <div .left> when the window is small, given that <div .right> is positioned to the right of <div .left> when the window is large

I've come across a similar layout before, but I'm struggling to replicate it myself. The idea is to have text aligned on the left side with an image floated to the right. Instead of the image appearing below the text when the window size is red ...

javascriptjqueryhtmlcss

What is the best way to maintain the formatting of a textarea in the database?

My HTML form includes a text area and a functionality to save the data into a database upon submission. The issue arises when the saved data is retrieved from the database, as the original formatting of the text gets altered. For instance: "This is a text ...

mysqlhtml

What could be causing the "Cannot POST /api/" error to occur when attempting to submit a form?

Having issues with my basic website and struggling to find a solution. As a complete beginner in this field, I am stuck and need some guidance. Accessing http://localhost:3000/class/create works perfectly fine when running the server. However, trying to a ...

javascripthtmlnode.jsexpressroutes

Assistance required for posting Jquery files

Attempted to upload a file using jQuery with a hidden form and an Input element, triggering the file browser with jQuery. The changed input is then sent to a PHP server script. Encountered an issue where submitting the form with $("form1").submit(); worke ...

phpjavascriptjqueryhtml

What steps are involved in extracting a Flot animation?

Check out this cool animation of a diatomic chain in action on this website: http://lampx.tugraz.at/~hadley/ss1/phonons/1d/1d2m.php I'm interested in extracting it, specifically to create a gif. The HTML script for the animation is visible: var c= ...

htmljqueryflot

Error: The NgTable in AngularJS is not defined when reloading the page

I have successfully implemented Angularjs NgTable with pagination inside a tab provided by Angularjs Material in various parts of my project. However, I am facing an issue where I am unable to reload the tables in this particular case. I am unsure of what ...

javascriptangularjshtmlangularjs-directivengtable

Conceal certain digits of a credit card number in a masked format for security purposes

Is there a reliable method to mask Credit Card numbers in password format within a text field? **** **** **** 1234 If you are aware of a definitive solution, please share it with us. ...

javascriptcssangularjshtml

Animating object on display and returning it with keyframes

Given the code snippet below: <div class="leftBox"> <div class="mainNode" ></div> </div> <script type="text/javascript"> $('.mainNode').click(function() { var element = $('.mainNode'); if (!ele ...

javascriptcssanimationcss-animationskeyframe

Elements that are added dynamically will not inherit the correct CSS styles, requiring JavaScript to style them properly

My <ul> element dynamically adds <li> elements, and I am attempting to make the first <li> wider at 63% while the others are at 60%. However, the first one is only getting a width of 60%. Any thoughts on why this might be happening? I ne ...

javascriptjqueryhtmlcss

Creating a new element in jQuery and placing it at the position where an element has been dragged

I need assistance with ensuring that each new item is added in the same position, regardless of any previous repositioning due to dragging. Currently, only the first appended item appears where I want it to be. Can someone please offer guidance? $("#butto ...

jquerycss

A loop that incorporates a jQuery JavaScript dropdown menu along with some calculations

My goal is to have multiple dropdown lists populated from a PHP while loop. Each select dropdown has a corresponding textbox that should update its value when a selection is made. However, the current script only works for a single dropdown outside of the ...

javascriptphpjqueryhtml

Safari causing rotated element to shift by 1px due to CSS3 Transition

Encountering a rendering issue in Safari with 180deg rotated elements. Two examples highlight the problem (tested on Safari 9.1): Odd width problem. The bottom element shifts to the right initially, and further on transition. Even width problem. It appea ...

csssafaricss-transforms

Displaying random divs and subsequently animating them downwards using JavaScript

I am in the process of creating a random appearing div that then falls down. Here is the code I have so far: $(document).ready(function(){ $('#test').animate({top: 80 + '%'},900); }); <div id="test" style="background:#98bf21;heigh ...

javascriptjqueryhtmlcss

I've encountered an issue when attempting to use innerHTML for DOM manipulation

I've been attempting to remove a specific list item <li> from the inner HTML by assigning them proper IDs. However, I'm encountering difficulties in deleting it. How can I delete these list items after clicking on the cross button? Feel fr ...

javascripthtmlcssinnerhtml

Automatically scroll the chat box to the bottom

I came across a solution on Stackoverflow, but unfortunately, I am having trouble getting it to work properly. ... <div class="panel-body"> <ul id="mtchat" class="chat"> </ul> </div> ... The issue lies in the JavaScript t ...

javascriptjqueryhtmlcss