How to remove Display flex (doesn't work in IE) from an HTML element without impacting the final outcome

Given the HTML code below, I need to remove display flex without impacting the final output. The use of display:flex is causing issues on Internet Explorer and needs to be removed. Please note that I am unable to alter the structure of the HTML elements, only add a stylesheet.

<table id="TabsTable" width="100%" style="overflow: hidden !important;" cellpadding="0" cellspacing="1">
                <tbody>
                    <tr>
                        <td class="vdcTabs" style="width: 100%;">
                            <span id="Tab_dlTabs" style="display: flex;">
                                <span>
                                    <div class="ActiveTab">
                                        <a id="lnktab1">Tab1</a>
                                    </div>
                                </span>
                                <span>
                                    <div class="VdcTab">
                                        <a id="lnktab2" style="">Tab2</a>
                                    </div>
                                </span>
                                <span>
                                    <div class="VdcTab">
                                        <a id="lnktab3" style="">Tab3</a>
                                    </div>
                                </span>
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>

htmlcss

Answer №1

One way to achieve the desired layout is by using the `display:table` property on `#Tab_dlTabs`, and applying the `display:table-cell.` property to `#Tab_dlTabs > span`.

This method is compatible with all major browsers.

#Tab_dlTabs > span {
    display: table-cell;
}
<table id="TabsTable" width="100%" style="overflow: hidden !important;" cellpadding="0" cellspacing="1">
    <tbody>
        <tr>
            <td class="vdcTabs" style="width: 100%;">
                <span id="Tab_dlTabs" style="display: table;">
                    <span>
                        <div class="ActiveTab">
                            <a id="lnktab1">Tab1</a>
                        </div>
                    </span>
                    <span>
                        <div class="VdcTab">
                            <a id="lnktab2" style="">Tab2</a>
                        </div>
                    </span>
                    <span>
                        <div class="VdcTab">
                            <a id="lnktab3" style="">Tab3</a>
                        </div>
                    </span>
                    <span>
                        <div class="VdcTab">
                            <a id="lnktab4" style="">Tab4</a>
                        </div>
                    </span>
                    <span>
                        <div class="VdcTab">
                            <a id="lnktab5" style="">Tab5</a>
                        </div>
                    </span>
                </span>
            </td>
        </tr>
    </tbody>
</table>

Note: It is advisable not to use inline CSS whenever possible.

Answer №2

Is this the desired outcome you seek?

Compatible with all web browsers and mimics the functionality of flex

#Tab_dlTabs > span {
  float: left;
}
<table id="TabsTable" width="100%" style="overflow: hidden !important;" cellpadding="0" cellspacing="1">
    <tbody>
        <tr>
            <td class="vdcTabs" style="width: 100%;">
                <span id="Tab_dlTabs" style="">
                    <span>
                        <div class="ActiveTab">
                            <a id="lnktab1">Tab1</a>
                        </div>
                    </span>
                    <span>
                        <div class="VdcTab">
                            <a id="lnktab2" style="">Tab2</a>
                        </div>
                    </span>
                    <span>
                        <div class="VdcTab">
                            <a id="lnktab3" style="">Tab3</a>
                        </div>
                    </span>
                    <span>
                        <div class="VdcTab">
                            <a id="lnktab4" style="">Tab4</a>
                        </div>
                    </span>
                    <span>
                        <div class="VdcTab">
                            <a id="lnktab5" style="">Tab5</a>
                        </div>
                    </span>
                </span>
            </td>
        </tr>
    </tbody>
</table>

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

Having trouble with the dropdown menu in Bootstrap?

I'm having trouble creating a responsive dropdown menu. When I click on the dropdown items, nothing happens. Here's the code: <div class="navbar-header"> <button type="button" class="navbar-toggel" data-toggel="collapse" data-target="#m ...

javascripthtmltwitter-bootstrap

Steps for breaking down a given string into divisions that correspond to an A4 sheet

Within my content, there are various styles applied. For example: This is a <b>bolded</b> word. I am seeking a solution to divide this long string into smaller sections that would fit on an A4 page accurately. The goal is to maintain the integ ...

javascripthtmlcssionic-framework

Altering the backdrop upon hovering over an element

As a beginner in Javascript and Jquery, I am working on creating an interactive feature where hovering over one element changes the background image in another column. I have managed to write the function, but now I want to add an animation to the image tr ...

javascripthtmljquerycss

Emphasize the words within the text box, but wait before doing

I want to create a feature where a single line of text in a <textarea> is highlighted with a time delay. Can I also choose different colors for the highlight? My goal is to have each line turn blue when clicking on individual buttons sequentially. Fo ...

javascriptjqueryhtmlcsstextarea

Linking to a different webpage within HTML code

If I have two separate HTML files named footer.html and main.html. The footer file includes a link to the top of a page like this: <!-- footer.html --> <!doctype html> <html lang="en"> <head></head> <body> <footer ...

csshtml

Oops! NullInjectorError: R3InjectorError(AppModule)[Number -> Number -> Number]: It looks like we forgot to provide a Number provider

I'm feeling a bit confused by the current situation. The application was functioning smoothly until I returned to work on it and started encountering this error. Surprisingly, my Compiler isn't flagging any errors, and as far as I can tell, there ...

htmlangulartypescriptrxjs

A guide on updating pseudo-class values dynamically using CSS

Imagine a scenario where there is a navigation panel named <div class="nav"> containing 5 anchor links <a>. CSS: .nav a:nth-of-type(1) { text-decoration: underline; } The objective is to switch the underlined element by adjusting the CSS ...

javascriptcsspseudo-class

Cube with 3D attributes and text displayed on each face shatters upon reaching a specific time limit on Google Chrome (between

The issue appears to be specific to Chrome. In Chrome, the 3D cube's face or multiple faces become transparent, giving the appearance that the animation is breaking. Sometimes adding "backface-visibility" after the break can temporarily resolve the is ...

htmlcssgoogle-chrome

Failure of Outlook 2007, 2010, and 2013 to Recognize Conditional CSS

I am currently working on a design for a responsive email. The layout is functioning well in all email clients tested using Litmus, except for Outlook 07/10/13 due to its challenging word rendering engine versions. To ensure correct display across differen ...

htmlcssoutlookhtml-emailconditional-statements

Utilizing Z-index for the arrangement of DIVs and elements in a webpage

I am facing an issue with my website design where the content section overlaps with the banner. This causes the content section to be hidden behind the banner, and I need it brought to the front. The problem specifically lies with the search element on my ...

css

Sass effortlessly transforms the color black into its hexadecimal counterpart #000000

I am in the process of developing a mixin that simplifies the task of incorporating multiple fonts in a single line. Within the mixin, I specify the desired font weights as follows: $font-weights: ( "hairline": 100, "thin": 200, "light": 300, "regular": 4 ...

csssasscompass

Efficiently loading Google Visualizations for core charts by utilizing AJAX within jQueryUI tabs

Loading Google Visualizations via AJAX in jQueryUI tabs After encountering a similar issue, I discovered a solution provided in the link above that partially resolved my problem. I am trying to use Google Visualization core charts within jQueryUI tabs wit ...

jqueryhtmlajaxjquery-uigoogle-visualization

Utilize NodeJS to dynamically alter the text outputted on an HTML page

For educational purposes, I am designing a website where users can sign in by entering their name on the login page. After signing in, they will be redirected to the home page which displays a personalized welcome message using their name. I have included ...

javascripthtmljquerynode.jsexpress

Arranging numerous Text elements within a solitary Drag and Drop container with the z-index property

I am facing a challenge with stacking twelve arguments in no particular order on a drag and drop element. The texts overlap each other, making it difficult for the end user to see them clearly when dragging and dropping. Is there a way to stack texts using ...

javascripthtmlcss

What is the method for incorporating a currency symbol into a jQuery mask?

I have successfully implemented the mask on the <td> element of the table, but now I would like to include the currency symbol before the value as shown in the example below. if ($(this).attr('title')==='Value') { $(+ ...

phpjqueryhtml

What is the best way to transfer text from a textbox to the clipboard with the help of jquery, javascript

Looking to add a copy to clipboard button on your website but want to avoid using Flash? Search for methods that don't require the outdated technology. Is there a way to achieve this without relying on Flash? ...

javascriptjqueryhtml

Symfony - Asterisk displayed on mandatory label causes bug in ChoiceType field

In my Symfony 4 project, I am looking to indicate mandatory fields with an asterisk next to their labels. There are multiple ways to achieve this as mentioned in the documentation: https://symfony.com/doc/4.0/form/form_customization.html#adding-a-required ...

csssymfony

Transform to CSS Selector

Having trouble clicking on the image button below using Xpath? Here is the HTML tag for the Image Button: HTML Script <img src="../../../../imagepool/transparent%21tmlservicedesk?cid=1" id="reg_img_304316340" aralttxt="1" artxt="Show Application ...

htmlseleniumselenium-webdrivercss-selectors

Tips for creating a clickable popover within a window that remains open but can be closed with an outside click

Is there a way to ensure that my popover window remains clickable inside its own area without closing, but automatically closes when clicked outside of the window? This is the code I am currently using, which is triggered by a button click: if (response. ...

javascripthtmlajax

Unable to find element in webtable using Selenium WebDriver

I encountered an issue while attempting to retrieve values from a static webtable. The error message I received is shown in the code snippet below: import java.util.List; import java.util.concurrent.TimeUnit; import org.openqa.selenium.By; import org.ope ...

javahtmlseleniumxpathselenium-webdriver