display:table causing issues in Internet Explorer

I am trying to achieve a layout where table cells are aligned horizontally similar to the ones demonstrated on this page.

Despite following the provided instructions and even copying the css and markup exactly, I am facing an issue with IE 8 rendering my table cells as blocks (stacked on top of each other rather than aligned next to each other).

This is my css:

<style type="text/css">

body.TableStyles {
    display: inline-table;
    border-spacing: 4px;
}

div.maketable p {
    display: table-cell;
    width: 20%;
    background-color: #cdf;
    padding: 4px;
}

</style>

And here is my markup:

<body class="TableStyles">
<div class="maketable">
        <p>< prev</p>

        <p>next ></p>
</div>

</body>         

Answer №1

For optimal performance, consider updating your body tag with the following code:

<body class="TableStyles">
<div class="maketable">
        <table>
        <tr>
         <td>
           <p>< prev 
           </p>
         </td>
         <td>
         <p>next >
         </p>
        </td>
        </tr>
        </table>
        </div;

</body>   

Answer №2

Your HTML code is not properly structured. Instead of using < and > symbols directly, you should escape them as &lt; and &gt;. Failure to do so may result in the browser reverting to quirks mode, causing CSS compatibility issues.

Answer №3

How about utilizing <ul><li> instead of going through this method?

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

Resolving CSS glitches that mysteriously vanish in Internet Explorer versions 8 and 9

My website was created using WordPress, with various plugins added to enhance its functionality. However, I have encountered an issue when viewing the site in Internet Explorer 8 & 9. The visual effects of the plugins seem to lose all CSS styling in IE bro ...

What new skills should I acquire following my mastery of HTML and CSS?

I have a vision of creating a website similar to funcage.com, a site filled with funny pictures where users can register, upload their own content, vote, and leave comments. After dedicating myself to learning HTML & CSS for over a year and completing the ...

I'm having trouble figuring out the code for the path in the POST request for my basic login form application

I have built a basic login form application in node.js. Although I can successfully display the login form and input login data, my POST request to capture the login data is not functioning correctly. I am encountering a POST http://localhost:3000/client 4 ...

Why isn't Bootstrap validation functioning properly in my Modal?

I am attempting to implement client-side validation using bootstrap, as outlined here: https://getbootstrap.com/docs/4.0/components/forms/#custom-styles The challenge I'm facing is that my form is within a modal. When I click the submit button, nothi ...

Find what you're looking for by exploring the search results inside the text box marked

update1: Appreciate your response! However, I am facing an issue where typing 'h' displays a set of values. When selecting a value, it should appear in the text box with a cross symbol, similar to how tags are edited on StackOverflow. I am work ...

The instance is referencing "greet" during render, but it is not defined as a property or method

At the same time, I encountered another error stating "Invalid handler for event 'click'". <template> <div id="example-2"> <!-- `greet` is the name of a method defined below --> <button v-on:cli ...

Ways to locate a webtable element through XPath when it is nested within a td tag

Having trouble accessing the webtable elements within table2? Take a look at the page source provided below: <table id="table1"> <tr class="head"> <td class="left" colspan="2"> <!--PAGE LINKS--> < ...

Slanted lines HTML CSS

I am encountering an issue with my HTML and CSS coding. The design requires a zig-zag "border" at the top and bottom of the page, creating a white paper space in between. The paper needs to be positioned underneath the zig-zag borders. Currently, this is ...

The BottomNavigation component in MUI has a minimum size limit of 400px when it displays 5 items

My issue involves a bottom navigation bar with 5 elements. When the window is resized to less than 400px, the bottom navigation does not shrink, instead maintaining a minimum width of 400px and causing a scrollbar to appear on the x-axis. You can view a m ...

Encountered an error loading resource: server returned a 404 status code while utilizing Angular framework and deploying via GitHub Pages

Currently facing an issue with my Angular website deployment on Github Pages, receiving a console error "Failed to load resource: the server responded with a status of 404 ()" at "home: 1". This error specifically seems to be related to the app.component ...

Using CSS styling to dictate how browsers display web content, specifically through setting font size measurements in EM

On different mobile devices and various browsers such as Internet Explorer and Mozilla, the font size in some divs does not appear consistent. Specifically, on a Samsung Galaxy S6. I am using EM units: I know it may not be ideal but I prefer this method a ...

Exploring the internet and its elements through DOM using getElementById

When using Internet Explorer 8, I encountered an issue where the getElementById method does not return DOM elements but plain elements when trying to copy a Div from a parent window to a pop-up. As a result, calling appendChild on those types of items resu ...

Transforming navigation bar dropdown appearance using solely HTML5, CSS, and jQuery

Currently experimenting with a navigation bar where each component is skewed at -30 degrees. Upon clicking any piece, its corresponding content drops down for display below the clicked item. I am aiming to have the section of the clicked piece expand into ...

Extracting text using Python and Selenium

Having trouble extracting text from HTML using Selenium and Python innerHTML <span data-select="" data-selected="Selected" data-deselect="Press enter to remove" class="multiselect__option"><span>ONE</span></span> <!----> ...

Migrating WordPress Gutenberg to a Separate React Component: Troubleshooting Missing CSS Styles

I am in the process of developing a standalone version of the Gutenberg block editor from Wordpress that can function independently outside of the Wordpress environment. My goal is to integrate the Gutenberg editor as a React component within an existing R ...

Tips for making a scrollable container that allows its contents to overflow without clipping?

Currently working on implementing a horizontal card row for my website with a unique hover effect - the cards lightly rotate and raise on hover. Here is a preview: https://i.sstatic.net/eDQ59.gif To make this row responsive, I added overflow-x: auto; to e ...

Ways to reference a PHP variable within an anchor tag

I've been working on a page that pulls data from a MySQL database into a table. My goal is to allow users to click on the date in the table and be redirected to another page. Here's the code snippet I'm currently working with: $q = "SELECT ...

Discovering a sophisticated way to locate a span element using the not(p) selector in Selenium

Within a span element with an ID, there is a mixture of text and a paragraph tag. The goal is to use selenium webdriver to pinpoint the street address in the mix below: <span id="myspan"> <p>fullname</p> street address - has no ...

Collapse the mobile nav bar upon clicking an item

I'm currently facing a challenge with the navigation bar on my event landing page. The issue is that when I open the navbar in mobile view, it does not collapse back after clicking on an item. Instead, it remains open and covers almost 3/4 of the scre ...