IE6/7 dilemma with CSS floating

Encountering a strange CSS float issue in IE6 and IE7.

The HTML code looks like this:

<fieldset style="float:left">
    <legend>Summary</legend>
    <div class="display-label">Recruitment type</div>
    <div class="display-field">Permanent Labour</div>
    <div class="display-label"># resources</div>
    <div class="display-field">2</div>
    <div class="display-label">Request Created</div>
    <div class="display-field">4/28/2011</div>
    <div class="display-label">Requested by</div>
    <div class="display-field">1066594</div>
    <div class="display-label">Status</div>
    <div class="display-field">Active</div>
</fieldset>

Here is the corresponding CSS:

.display-label, .display-field
{
    padding: 0.35em 0.25em;
    float: left;
}

.display-label
{
    width: 13em;
    text-align: right;
    clear : left;
    font-weight: bold;
}

.display-field
{
    margin-left: 1em;
}

While IE 8+ and Firefox render it correctly, the issue arises with IE6 and 7 displaying it differently.

If anyone has any suggestions on how to resolve this problem, I would greatly appreciate it!

cssinternet-explorer-7css-floatinternet-explorer-6

Answer №1

It is important to contain the floats by using some form of clearance, but floating everything is not necessary

Start by removing the inline style and unfloat the fieldset

<fieldset style="float:left">

If you want the fieldset to automatically adjust its size (shrink-wrap), you should set a width or max-width on it. Internet Explorer does not handle shrink-wrap behavior very well when the element to be adjusted contains elements with hasLayout as in the case of this 'fieldset' containing floated div(s) inside.

This CSS code should work without having to modify the HTML:

.display-label, 
.display-field {
    padding: 0.35em 0.25em;
}

.display-label {
    float: left; 
    clear: left; 
    width: 13em; 
    text-align: right; 
    background: #eee; 
    font-weight: bold;
}

.display-field {
    overflow: hidden;
}

Answer №2

UPDATE: It is important to include a clear style after creating both the label and field. Ideally, you should wrap the label and field within a container element to avoid any alignment issues. However, adding a clear style as shown below should help achieve the desired result.

<fieldset style="float:left">
    <legend>Summary</legend>
    <div class="display-label">Recruitment type</div>
    <div class="display-field">Permanent Labour</div>

    <div style="clear:both;"></div>

    <div class="display-label"># resources</div>
    <div class="display-field">2</div>

    <div style="clear:both;"></div>

    <div class="display-label">Request Created</div>
    <div class="display-field">4/28/2011</div>

    <div style="clear:both;"></div>

    ...

</fieldset>

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 if there was a magical jQuery method that could automatically trigger a callback function? What could it possibly be named?

Is there a way to load only images and iframes, similar to the .load() function? I want to automatically add a selector element into the "this" variable for this purpose. $('document').ready(function({ $('a').<Something to trigg ...

javascriptjqueryhtmlcss

Issue with Bootstrap CSS not rendering properly in Chrome and Firefox

After creating a simple "Hello World" web page and including Bootstrap CSS from a CDN, I noticed that it's only working properly in Microsoft Edge. Both Google Chrome and Mozilla Firefox are not displaying the correct output. I would greatly apprecia ...

htmlcssgoogle-chromemicrosoft-edgebootstrap-4

Tips for adding a border to a 3D pie chart in Highcharts

I created a 3D pie chart using the Highchart plugin and wanted to add borders to each portion. I tried adding the following code: borderWidth: 4, borderColor: "red" within the plotOptions: pie: section. However, I noticed that the portions were getting b ...

javascriptjqueryhtmlcsshighcharts

Step-by-step guide on replicating a website along with its CSS styles and scripts

I've been exploring the idea of cloning a webpage, such as Instagram's login page, along with its CSS elements and JavaScript, to use locally. Basically, I want to duplicate the login page and host it on my test server in a way that allows it to ...

javascripthtmlcssweb-scrapingbeautifulsoup

Tips for highlighting text in HTML without using a specific tag

My current project involves customizing a Wordpress plugin, but I've encountered a frustrating obstacle. I'm having trouble removing the three dots that appear at the bottom of the download card. Despite my efforts, I can't seem to find any ...

htmlcsscss-selectors

Guide on making a flowchart using CSS

I'm working on creating a CSS flow chart diagram and I've included an image below for reference. Might there be a straightforward method to achieve this? I've been scouring the web for examples, but I'm unsure of what terminology to use ...

htmlcss

How to activate a media query in response to user interaction using JavaScript

My responsive web page has various designs for different screen sizes, implemented using @media queries. I am interested in allowing users to manually adjust the design for smaller or larger screens without actually changing the screen size. Is there a wa ...

javascriptcssresponsive-designmedia-queries

Troubleshooting CSS Hover Not Displaying Properly in Angular 14

In the footer class of my HTML, there is a code snippet with chevrons: <div class="link-list"> <div *ngFor="let link of insideLinksLeft | originalOrderKeyValue" class="link"> <a [href]="link.val ...

javascripthtmlcss

Proper alignment of content in HTML using Bootstrap following the integration of .json data

After aligning the emergency hotlines properly, I am struggling to position the text under the image to display the data in three rows. I attempted col-4 but encountered issues with JSON. My objective is to show the image followed by the numbers directly b ...

htmlcssjsontwitter-bootstrap

What is the best way to ensure only one item is being selected at a time?

In the initial state, I want 'ALL' to be automatically selected. Clicking on another item should change the classes so that only 'this' has the class and the others do not. However, I am facing an issue where 'ALL' cannot be r ...

javascriptjqueryhtmlcss

"Maximize user experience: Eliminate the "#" in your URL by utilizing anchor tags for one-page navigation in

I've created a website with menu tabs including Home, About, Work, and Contact. To make navigation easier, I've used anchor tags for this one-page layout. However, I'm concerned about the URLs updating when clicking on the tabs. I prefer to ...

htmlcsswordpressmenuanchor

Is there a way to rearrange the tabs so that the first tab is at

Is there a way for me to align with the others without being stuck below #first_tab in the code? I'm having trouble figuring it out on this website: Your assistance would be greatly appreciated! Thank you in advance! CSS Code: #first_tab { ...

htmlcss

Adjusting ThreeJS Canvas to Utilize Entire Space

Here is a simple example I created for demonstration: http://jsfiddle.net/8nbpehj3/37/ <html> <body> <div class='wrapper'> <div class='nav'> <div class='button'>Button</div ...

cssthree.js

Updating View in Angular 2 ngClass Issue

I'm encountering some challenges with updating my view using ngClass despite the back end updating correctly. Below is my controller: @Component({ selector: 'show-hide-table', template: ' <table> <thead> ...

javascriptcssangularangular2-template

jQuery Mobile is experiencing page height inaccuracies

My web application, built with jQuery Mobile 1.2.0, is encountering an issue with page height calculations on Windows Phone. While iOS and Android display correctly, there is a gap at the bottom of the page on Windows Phone. Is there a CSS-only solution t ...

javascriptjquerycsswindows-phone-7jquery-mobile

Node.js causing issues with executing jQuery front-end code properly

I created an automatic image scroller div consisting of a ul with small images. The aim is to have a basic scroller that starts running once the page loads. It functions perfectly when I test the code (HTML, CSS, and a JS file with jQuery) locally in a bro ...

jqueryhtmlcssnode.jsexpress

The li elements in a horizontal menu all have equal spacing between them, filling the width of the ul

I designed a horizontal menu navigation system using HTML elements ul for the main menu container and li for menu list items. The layout is structured with display table for ul and table-cell for li. However, I encountered an issue where there are inconsis ...

htmlcss

(Bootstrap) Implementing inline block properties to ensure consistent column display

I am currently working on improving the column layout of a website. However, I am facing an issue where there are large blank spaces if the text lengths or image sizes vary. To test out the theme, I have included some sample products in the image below. h ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

SASS causing conflicts with CSS breakpoints selector overrides

I am working with a partial file named _display.scss. It includes various @mixin and styling classes related to the display CSS property. _display.scss @mixin d-block{ display: block; } @mixin d-none{ display: none; } .d-block{ @include d- ...

csssassscss-mixins

Achieve a Smooth Transition: Utilizing Bootstrap 3 to Create an Alert Box that Fades In upon Click and Fades Out

Incorporating AngularJS and Bootstrap 3 into my web app, there is an "Update" button that saves user changes. Upon clicking the "Update" button, I aim to trigger and display bootstrap's alert box with the message "Information has been saved," followed ...

javascriptjquerycssangularjstwitter-bootstrap