How to fix Internet explorer 7 bug when using percentage widths for layout?
The problem is sub-pixel rounding. When you are designing with percentages there will be times that the math doesn't result in full pixels (70% of 721px is 504.7px). 721 is arbitrary, but using percentages you'll run into arbitrary numbers. There's no avoiding that. Most browsers figure out a rounding solution for you that doesn't break the layout. IE7 (and older) simply round up. Rounding up, your container width at 721px will include one box at 505px and another at 217px for a total of 722px - more than 100%. At that point IE decides the second box can't fit and drops it below.
There are various solutions depending on your situation. Nicole Sullivan has an interesting solution based on using 'overflow: hidden;' on your last column rather than a float/width combination. I use it when I can. Check it out here:
http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
The other solution that I've found when 'overflow' just wont cut it is to add a small negative margin to the last element in a row. If you are floating left, add a several pixel negative margin on the right. Floating right, add it to the left. I haven't run into any negative effects from that (though I'd be glad to hear if others do).
Hope that helps. Cheers.
IE (bug) percentages with background-position
I was recently fiddling around with making a scalable site design based on percentage widths using em. Luckily for me, it was only prototyping because as it turned out, it seems IE ignores anything after the second decimal place. You can see for yourself by loading IE8 and hitting F12 to pull up the development console. Find your CSS with the percentage and see what it says.
Just for the record, my em measurements would have been like this 0.7056367 instead of this 70.56367% which (in my tests) would have become 0.70. It seems very feasible to me, then, that IE is rounding to the nearest percentage point (70%) or the nearest hundredth of a percent (70.56%) at most.
why input width 100% in table-layout auto expands in IE7?
I found that applying line-height to the input helps if the input never contains long words. This may be enough for me (I can calculate correct line-height), but other solutions are welcome, as may be more suitable for others.
finally I found the solution here textarea with 100% width ignores parent element's width in IE7: adding brutal word-break:break-all; is a solution.
Container div doesn't resize correctly in Internet Explorer 11
The problem with ie is that it's table cell will always expand to the height of it's content (treating height like min-height). To get over this all you need is an extra div that is absolutely positioned with the overflow auto, inside a relative div that is 100% height of the td:
<table id="Table1" style="HEIGHT: 240px;" cellspacing="1" cellpadding="1" width="100%" border="1"> <tr>
<td style=""> <div style="width:100%; height:100%; position:relative;"> <div style="top:0; left:0; right:0; bottom:0; overflow:scroll;position:absolute;"> <table border="1" cellspacing="0" cellpadding="0" width="100%" rules="all" style="table-layout:fixed;"> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> <tr> <td><span>Test</span></td> </tr> </table> </div>
</div> </td>
</tr></TABLE>Layout problems using base font size in IE6/7 - the em/px bug
try IE7 JS. this may fix your problem,
How can I work around this IE11 layout bug related to table-cell, text-decoration, and padding?
Again a IE11 problem that seems so unusual. I see that the percentage padding is not even calculated and is not applied in the layout. However the text is still padded according to the padding percentage. So i would assume the text is positioned with the padding but after the positioning the percentage padding is "disabled".
I can't tell you why this happens. But if you really want to fix these you might want to use these quick fixes.
Use margin
Because the percentage bug only occurs on the padding of a table-cell, you can actually use a margin on the span itself.
span
{
margin-left: 10%;
}
and ofcourse reset the padding of the sides:
div.table-cell {
display: table-cell;
padding: 20px 0;
}
This "solution" is not as dynamic as with percentage padding on the table-cell itself.
Why not?
It's because the percentage takes is value from it's parent element, the table-cell. Where as the table-cell did take it's percentage value based on the tabel. Now when you would just use left-margin: 5%;. It would be half of the space as it should be. This is because it take the 10% on the table-cell width. Where the table-cell width is table width devided by its cells(table width / table cell).
So to fix that i did 5 times the amount of cells (5 * 2 in this case), which would result in the right percentage.
However this is not dynamic when you want to add more cells.
jsFiddle
Use border
Use border which its position is "reserved" before the padding is resetted.
Reserved border
span
{
border-bottom: 1px solid transparent;
}
Change property that doesn't need re-calculation of position; color
div.table-cell-bug:hover span
{
border-bottom-color: black;
}
Now note that there will still be no padding in the layout. As soon as a property is assigned which has not been calculated before the padding did reset(the same time the text position is determed) the positions will be re-calculated.
jsFiddle
I hope one of these quick fixes work for you.
I see you sended a bug report to MS. Keep us up-to-date when you get a reply, i would appreciate it :)
Internet Explorer 6 and 7: floated elements expand to 100% width when they contain a child element floated right. Is there a workaround?
Here's a solution which makes inline-block work on IE6 as at http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ to make the elements behave more like right-floated <div>s:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Float with inline-block test</title>
<style type="text/css">
.container {
border-top: solid 10px green;
float: left;
}
.tester1,
.tester2 {
float: right;
}
.tester1 {
border-top: solid 10px blue;
}
.tester2 {
border-top: solid 10px purple;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.container {
text-align: right;
}
.tester1,
.tester2 {
float: none;
zoom: 1; display: inline;/* display: inline-block; for block-level elements in IE 7 and 6. See http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */
}
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="tester1">Tester 1</div>
<div class="tester2">Tester 2</div>
</div>
</body>
</html>
Related Topics
Less and Bootstrap: How to Use a Span3 (Or Spanx [Any Number]) Class as a Mixin
CSS Flexbox: Difference Between Align-Items and Align-Content
How to Remove All Default Webkit Search Field Styling
CSS List Item Width/Height Does Not Work
Css3 Transitions on Pseudo-Elements (:After, :Before) Not Working
What Is the Most Practical Way to Check for "@Supports" Support Using Only CSS
Transform-Origin for CSS Animation on Svg Working in Chrome, Not Ff
Issues with "Background-Position" in "Background" Shorthand Property
How to Make a CSS Grid with Dynamic Number of Rows or Columns
How to Change the Size of a Bootstrap Checkbox
How to Define a Class Name on Paragraph Using Markdown
Differencebetween Default, User and Author Style Sheets
Ie - Hidden Radio Button Not Checked When the Corresponding Label Is Clicked
Css: Background-Color on Multi-Line Text
How to Target a Specific Group of Siblings in a Flat Hierarchy
<!--[If Ie]> Conditional Comments Are Rendered HTML-Escaped in Facelets