Having Trouble Adjusting Width of Inline List Items in Internet Explorer?

I am encountering an issue with an unordered list where the list items are displaying inline, and the layout is quite complex. To better explain, here is the Fiddle:

If you observe, the unordered list items are adjusting to the height of the tallest item using the display: table-cell property, except for the first item. This setup allows the first item to have a vertical line extending the full height of the list, with the letter "A" aligned to the top vertically.

This layout performs well in most browsers, except for Internet Explorer 8[1]. I have included some screenshots for reference in case you do not have access to IE8:

  • Optimal rendering in Chrome:
  • IE8 displaying the same page, with the IE developer tools highlighting the inconsistent width of the third list item:

Do you have any suggestions on how to maintain the same appearance as seen in Chrome (or any browser other than IE1-IE8)?

Appreciate your assistance.

[1] Why must you be so difficult, IE8?

htmlcssinternet-explorerinternet-explorer-8html-lists

Answer №1

It's a shame that IE doesn't support the table-cell property, but there are workarounds available. Thankfully, one particular hack seems to do the trick quite effectively.

ul li {
    display: inline-block;
    *display:inline;
    zoom: 1;
    height: 100%;
    max-width: 130px;
    min-width: 130px;
    padding: 0px 0px 0px 15px;
    vertical-align: bottom;
}

By utilizing this CSS snippet, you can achieve inline-block alignment for elements in IE, ensuring consistent display across different 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

What is the best way to locate this specific element?

<div class="ptp-item-container"> <div class="plan">New Text to Display!</div> <div class="price">200</div> <div class="bullet-item">some other text</div> <div class="cta"> <a class="button" ...

javascriptjqueryhtmlcss

Adjust the text color based on the background image or color

Here on this site, I have designed the first div to display a dark image, while the second one shows a light background. I am aiming to adjust the sidebar text color based on whether it is displayed against the dark or light background. How can I achieve ...

javascriptjqueryhtmlcss

What could be causing Html.checkboxfor to fail in updating the boolean value of the model?

I am currently working on a project where customers can select multiple users to remove them from the database. The issue I'm facing is that the checkboxes are not changing or sending the isSelected variable, which tells the server which users should ...

c#htmlasp.netmodel-view-controller

Issue encountered while attempting to deactivate certain foundation CSS and JavaScript files

I am attempting to deactivate certain CSS files in the foundation framework, as they are unnecessary for my project. After installing foundation via a gem, I followed Ryan Bates' recommendation to modify the foundation_and_overrides.scss file by repl ...

javascriptcssruby-on-railszurb-foundation

Arrange the selection options by price using jQuery

Sorting options by price is my goal, but despite trying various codes, I have not been successful! This is the original structure: <select id="product-list"> <option>product 1- [2$]</option> <option>product 2- [4$]< ...

htmljqueryjquery-selectbox

Ways to programmatically increase the names of variables in JavaScript?

I am currently working on developing a user-friendly recipe app with Node/Express. Users are able to access a 'new recipe' HTML form where they can easily add as many ingredients as they desire by clicking the 'add ingredient' button. U ...

javascripthtmlnode.jsexpress

Nothing is being returned when using JQuery AJAX POST

Having trouble identifying the issue, as all that seems to happen is the URL changes to "http://localhost/?search=test" when entering "test", for example. index.php <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquer ...

phpjqueryhtmlajax

CSS - Combining underline, striikethrough, and overline effects with customized styles and colors within a single element

I am trying to achieve a unique design with only one <span> that has three different text decorations (underline, strikethrough, and overline) like this: (This is just an example, I need it to be changeable) https://i.stack.imgur.com/61ZnQ.png Ho ...

htmlcss

jquery accordion failing to display content

Upon navigating to my website and accessing the webpage featuring an accordion, the accordion successfully appears and hides after 1500ms as intended. However, when attempting to reveal the text by clicking on the headings, nothing happens. The heading sim ...

javascriptjqueryhtmlcodeigniter

The concealment of the container is ineffective when attempting to hide it until all cached images are

My website has a background and a main container. I wanted to hide the container until the entire page had loaded, so I included #cover{opacity:0} at the beginning of the page and $(window).load(function() { $('#cover').css('opacity&apo ...

javascriptjqueryhtmlcss

Scraping Data: A guide to extracting width values from CSS style tags using Scrapy and CSS selectors

I've recently started learning scrapy and I'm struggling to extract the width from a div using a CSS Selector. No matter how hard I try, I can only find solutions using xpath instead of css selectors. Here is the HTML code snippet: <div clas ...

csspython-2.7css-selectorsscrapy

Adding the "input-invalid" class to the input doesn't take effect until I click outside of the input field

When the zipcode field is updated, an ajax call is made. If there are no zipcodes available, I want to mark it as invalid by adding the "input-invalid" class. However, the red border validation only appears when clicking outside of the input field. Is ther ...

javascriptjqueryhtmltwitter-bootstrap

Lose the scrollbar but still let me scroll using the mouse wheel or my finger on the fullscreen menu

I am currently working on a fullscreen menu design. However, when the menu appears, some elements are not visible unless I apply the overflow-y: scroll property to the menu. But I don't like the appearance of the additional scrollbar that comes with i ...

htmlcss

The print preview displays a single div in an incorrect location

I have successfully created a javascript plot and wanted to incorporate a legend that overlaps the plot. Unfortunately, the function I used does not support directly overlapping legends, but it does allow for placing the legend in a separate div. To work a ...

javascripthtmlcss

Is it permissible to have multiple class tags in HTML?

Is the HTML code below correctly formatted? <div class="navbar" class="menu">foo</div> Can two classes be applied to the same element? ...

htmlcss

remain on the multi drop down page for a specified duration

I have created a dropdown menu with a second level drop-down page that is a form. Now, I want the second level drop-down page to stay open longer, so I have used the following JavaScript code: <script> var timer; $(".parent").on("mouseover", functio ...

javascriptphphtml

I am unable to determine if I have already selected a List Item

My goal is to have a functionality where clicking on "Download Drivers" will open the list, and clicking again will close it. This should be achieved with onclick events only, no hover effects. Additionally, I want the list to remain open even if I click o ...

javascripthtmlcss

Automate website button clicks using Python and Selenium

I could really use some assistance: Currently, I have a Python/Selenium code snippet that carries out basic actions on a website to retrieve names, and it works perfectly fine. The objective: However, what I am aiming for is to automate these actions to ...

pythonhtmlselenium-webdriverwebdriver

The color of the element remains unchanged even when hovering the cursor over it

Below is an example of HTML code: <h1 class="one">Hello</h1> Here is the corresponding CSS style sheet applied to it: h1:hover { color: red; } h1.one { color: blue; } When this code runs, the h1 element should turn blue. Ho ...

htmlcss

Conceal particular table cells through jQuery

I am a beginner in the world of jQuery. My goal is to hide certain cells in a row when clicked, and have them displayed again when clicked once more. I've searched high and low for a solution, but all I find is how to hide entire rows. Here's an ...

javascriptjqueryhtml