Using IE7 and inline-block to ensure li element expands to the size of its child elements

My navigation menu works perfectly across browsers except for IE7.

I'm using inline-block to float list items, but this isn't supported in IE. I've tried some workarounds, but they all have issues - especially because inline-block wraps the list item around its content, which these other methods don't do. Setting a specific width isn't ideal since this site is not static.

<ul id="mini-nav">
<li class="">
  <a href="">authenticated/basic">BASIC</a>
  <div></div>
</li>
<li class="">
  <a href="">ADVANCED</a>
  <div></div></li>
<li class="">
  <a href="">BEST PRACTICES</a>
  <div></div>
</li>
</ul>

I want my list items to expand based on the size of the text in the links. How can I achieve this without using inline-block?

Answer №1

Consider using float: left in place of display: inline-block for a simpler solution. Depending on the layout you desire, you might need to include overflow: hidden in your <ul> or opt for a standard clearfix.

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

Managing the Navigation Bar

I am currently using Bootstrap and ReactJS, and I am facing an issue where the active tab on the navigation bar does not change when I scroll down the page. At the moment, the active tab only changes when I click on a specific section. Each section corresp ...

Develop a stylish HTML/CSS box featuring a trio of diagonal gradient colors

Trying to achieve a square with three colors inspired by the concept of a Two-tone background split by diagonal line using css, but with an additional color scheme similar to this example: https://i.sstatic.net/ci2Zv.png Seeking advice. Attempted the fol ...

Handling onMouseLeave event for Popover component in material ui library with hiderBackdrop parameter specified

<Popover key={element.id} className={classes.popoverItem} classes={{ paper: classes.paperElement }} open={isOpen} anchorEl={this.myRef.current} anchorOrigin={{ vertical: 'bottom&apo ...

Aligning elements within a table to ensure consistency with surrounding content

Issue I am working with an html table that includes a particular column whose content can vary in size. This results in rows of varying heights, which is expected. However, the adjacent column to the variable-sized one contains two buttons that consistent ...

Create a responsive layout of inline-block elements that adjusts to resizing

I am currently focusing on developing the website found at: The progress so far includes successfully creating a list of div.project-item elements that adjust the number of columns based on window resizing due to the use of inline-blocks. My next goal is ...

Is there a way to implement hover behavior for a Material-UI Button within a ButtonGroup component?

When using MUI v5, I am encountering an issue where the first button in the code provided is only half working. The button is initially colored red (both the border and text), however, upon hovering over it, the color of the border changes to blue. This is ...

How can I make a div collapse in the same way as the Facebook chat

I am working on creating a chat feature similar to Facebook chat for personal use. Everything is functioning correctly, except for some issues with the CSS. I attempted using position absolute to arrange the div, which worked fine, but encountered problem ...

Select element from Material UI displaying horizontally

I'm brand new to Material Ui and currently tackling the implementation of their SELECT component. However, I am running into an issue where it is displaying in a row instead of a column. Am I overlooking something important here? const SelectDropDownC ...

Sticky Angular Headers

I am struggling to create a table on my angular page that has fixed headers and footers. <table class="table table-bordered table-striped table-hover" fixed-header> <thead> <tr> <th>Name</th> <t ...

Challenges with adjusting the dimensions of varying-sized fluid squares that are floated

I've been facing a roadblock in my coding project since yesterday afternoon. I'm trying to transform a classic unordered list menu into a tiled "gallery" within a 12 column grid, with fluid square tiles. When the squares are floated, the first s ...

Symbol adjacent to button with multiple lines

My objective is to design a button with multi-line text and an icon positioned centrally next to it for both lines. Refer to the screenshot below for clarification: https://i.sstatic.net/ODPI2.png Despite my efforts, I am encountering difficulty in cente ...

Generate Material UI sidebar components that are positioned above all other components

I am currently working on a sidebar component using the Material UI Drawer component. I am looking to add components that align side by side with the sidebar, similar to the green box shown in the image below. https://i.sstatic.net/aAtn6.png After attem ...

Ensure the div remains floating to the left even when the browser window is resized

I'm currently working on creating a timeline, but I'm struggling to keep the div aligned horizontally. Within a div container with overflow set to hidden, I have divs floating to the left. Inside these divs are ul elements with fixed widths. My ...

Flexbox: The final element is not positioned on the right side

I have been trying to align the final item on the right side using margin-left: auto. The desired output is achieved in jsfiddle. I am using Visual Studio Code with the same code, but when viewed in Firefox, Chrome, or Edge, the item does not appear on the ...

How to conceal table cells on Safari 5?

My code works on Firefox and IE, but not on Safari. Here's an example: <table> <thead> <tr> <th style="display: none;">hi</th> </tr> </thead> <tr class="someClass"> <td style= ...

Customize the layout of menu icon in HTML/CSS using FlexBox Grid

Recently, I have encountered an issue with the position of a menu icon on my website. The icon is displayed when the window reaches a certain size, but it is not aligned properly on the right side of the site. Ideally, I would like to use the "right" prope ...

Columns that can be resized in a right-to-left (

Whenever I use RTL, the columns behave erratically when resizing... I have implemented colResizable. You can see an example here: http://jsfiddle.net/r0rfrhb7/ $("#nonFixedSample").colResizable({ fixed: false, liveDrag: true, gripInnerHtml: "<d ...

I am looking to expand the width of the Bootstrap container specifically for the Max width

I need to adjust the width of the Bootstrap container to be responsive on all devices, especially maximizing the width on larger screens. Can anyone provide guidance on how to achieve this? Thank you in advance. To view my website, please follow this link ...

Tips for identifying when a change has been made to a SCSS file or any of its partial files

Looking to incorporate sass into a Ruby script but want to compile only when necessary. The typical method for compiling involves using the following code: require "sass" Sass::Engine.new(File.read(scss), options).render By utilizing appropriate hash val ...

Arranging buttons in a row with Bootstrap 5

Struggling to align the buttons on my webpage side by side in the center, I've tried two Bootstrap 5 classes but they're not achieving the desired look: https://gyazo.com/c23f2eade4614380aec547b11e61387a https://gyazo.com/e40a678b02c9f641f746b1c ...