Having trouble with the width:auto attribute in IE7?

CSS

    #wrapper .tn{
      width:auto;
      height:20px;
      line-height:20px;
      float:left;
      padding:5px 2px 5px 5px;
      margin:0 5px 10px;
      font-weight:bold;
      background:#f0f0f0;
    }

HTML

    <div id="wrapper">
        <div class="tn">Text</div>
        <div class="tn">Text</div>
        <div class="tn">Text</div>
    </div>

The given codes are compatible with various web browsers like Firefox, Chrome, Safari, Opera, as well as IE9 and IE8. However, there seems to be an issue with Internet Explorer 7 where the div does not expand according to the text and covers the wrapper div in terms of width. How can this compatibility problem be addressed and resolved?

htmlcssinternet-explorerwidthinternet-explorer-7

Answer №1

Looks good from my end, I double-checked using IE7 developer tools. You might want to consider using display: inline-block; instead of float

#wrapper .tn{
  height:20px;
  line-height:20px;
  padding:5px 2px 5px 5px;
  margin:0 5px 10px;
  font-weight:bold;
  background:#f0f0f0;
  display: inline-block;
}

Answer №2

It seems like the #wrapper div is not expanding because you have floats that need to be cleared.

You can use the clearfix class from the HTML5 Boilerplate (https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css) to fix this issue.

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

To apply the clearfix class in your code, do the following:

<div id="wrapper" class="clearfix">
    <div class="tn">Text</div>
    <div class="tn">Text</div>
    <div class="tn">Text</div>
</div>

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

Can someone show me how to populate select options with values from a list using Python variables?

Instead of hardcoding values in my HTML file, I have a variable called 'myVariable' in my Python file that is a list. I want to use this variable to generate the options in my select menu. <select class="form-select" aria-label=" ...

pythonhtmlflaskbootstrap-5

What is the best way to denote multiple line breaks in HTML code?

When creating blank lines on my webpage, I typically use the code <br />. However, inserting 20 - 40 of these can be quite cumbersome as each br tag is placed on a separate line after formatting. Is there a more elegant way to achieve the same effe ...

asp.nethtml

The PHP code is experiencing issues on the enquiry/callback form, but it is functioning correctly on the contact form

I'm having trouble understanding why I am only getting the telephone number and missing the name and email fields when submitting a form. I have tried making changes, but I can't get all three fields to work properly. <aside clas ...

phphtml

The subsequent menu selection will be based on the chosen menu value

I am attempting to accomplish the following: https://i.sstatic.net/JffUWC02.png Essentially, I need a select options menu with labels where selecting an option will display a corresponding value. These values should then become labels for a second selec ...

javascripthtmltypescriptnext.js

"Provide information, then open a new webpage by clicking on a button. Perform various actions with the form by using type

Is there a way to quickly submit form entries to my database and then automatically redirect to a new page? My current situation requires that submitted information is stored in the DB before directing users to a thank you page, all in one seamless click! ...

javascriptphphtmlforms

Discover the significance of a data attribute's value for effective comparisons

I have a loop that generates random numbers and positions to create 4 answer choices for users. Now, I am trying to determine the value of the clicked button and compare it to the position of the correct answer. However, whenever I try to do this, it retu ...

javascriptjqueryhtml

Blueprint adjusts the height of the menu

After rendering the following code, the menu appears as a table with the ID topMainMenu and a height of 51. However, upon removing the Blueprint stylesheet, the height of topMainMenu reduces to 20, which I believe is the minimum height. <head runat="se ...

asp.netcssblueprint-css

What steps should I take to make my Twitter widget adaptable to varying screen heights?

I'm currently utilizing react-twitter-widgets to incorporate a Twitter timeline within my application. While everything is rendering correctly, the height of the timeline extends down the entire page. Is there a way to adjust the widget's height ...

cssreactjstwitterbootstrap-4

What could be causing my textarea-filling function to only be successful on the initial attempt?

Programming: function updateText() { $("body").on("click", ".update_text", function(event) { $(this).closest("form").find("textarea").text("updated text"); event.preventDefault(); }); } $(document).ready(function() { updateText(); }); H ...

javascriptjqueryhtml

The performance of HTTP requests is significantly decreased in Internet Explorer compared to expected speeds

I am currently developing an Angular site where I need to send a significant amount of data (approximately 1 MB) in an API call. In the Chrome and Firefox browsers, everything works smoothly and quickly, with a response time under one second. However, whe ...

javascriptangularjshttpinternet-explorer

My Angular Router is creating duplicate instances of my route components

I have captured screenshots of the application: https://ibb.co/NmnSPNr and https://ibb.co/C0nwG4D info.component.ts / The Info component is a child component of the Item component, displayed when a specific link is routed to. export class InfoComponent imp ...

javascripthtmlangulartypescriptroutes

Creating a dynamic website with user-friendly editing capabilities

Having a good understanding of html5 and css3, I am currently exploring ways to create a website that enables visitors to edit content in real time for all other users to see. While aware of the contenteditable attribute, I have found that it does not reta ...

javascriptphpjqueryhtmlcss

When outputting HTML, make sure to use an if statement

Looking to dynamically generate select options without using if statements. Instead of string manipulation, I want a cleaner solution. <select name="test"> <option disabled selected> -- Select an industry -- </option> <?php ...

phphtml

employing document.write() specifically for a designated division

This is the coding: $(document).ready(function(){ var Jstr = { "JSON" : [ { "Eid" : 102,"Ename":"", "Ecode" : "<input type ='text'/>", "Eprops": {"name": "", "value":"", "maxlength":""}} ] } ; $(".search").click(funct ...

javascriptjqueryhtml

Creating a hierarchical JSON structure to populate a Handlebars template (HTML) for an iterative component, allowing for the display of three levels of interconnected

Currently, I am working on developing a mega menu component that involves three levels of content. Level 1 (L1): This level is displayed horizontally in a traditional navbar. When hovered over, it expands to reveal the mega menu. Level 2 (L2): These item ...

javascripthtmljsonhandlebars.js

Unable to send form data to app.js

Although a similar question has been asked before, I haven't been able to find a solution that works for me. I've been attempting to send HTML form data to my app.js file. Below is my index.handlebars file: <form method = 'post' a ...

htmlnode.jsexpresshandlebars.js

Using various alignment options for images on mobile devices

I've designed a theme with two columns, one for text and the other for images. I've structured it in HTML to display as: Text - Img Img - Text Text - Img Img - Text Text - Img Img - Text However, for mobile responsiveness, I want it to display ...

wordpresscsswordpress-theming

Incorrect Media Queries breaking LayoutNote: This is a completely unique rewrite

My golden rule for media queries is set... @media only screen and (min-width: 768px) and (max-width: 1080px) { Strangely, I picked 1080 as a test number... Unexpectedly, the background color changes at 1190px when resizing my page to test breakpoints. ...

htmlcssmedia-queries

What is the inner workings of CSS?

I'm curious about the inner workings of CSS. Does the HTML get interpreted before CSS, or vice versa? Or does it all apply as soon as the browser has constructed the DOM? I would appreciate a detailed explanation on this topic. ...

css

The CSS Specificity Hierarchy

I am currently facing a dilemma with two CSS classes in my codebase. Despite having a stronger specificity, the second class is not being chosen over the first one. Can anyone shed some light on this issue? The CSS class that is currently being applied is ...

css