I have the following markup, where I am attempting to get the right hand side of the second table to align with the right hand side of the heading above it. This works in IE8, Firefox and Chrome, but in IE6/7 the table is incorrectly stretched to fill the width of the page.
I'm using the Trip Switch hasLayout trigger to apply inline-block in IE6/7.
Does anyone know how (or even if) I can get the table only to fill the natural width of the wrapper element displayed with inline-block in IE6/7?
You can see the code running live at http://jsbin.com/uyuva.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style>
.wrapper {
display: inline-block;
border: 1px solid green;
}
/*
display: inline-block triggers the wrapper element to have layout for IE 6/7.
The trip switch then provides the inline component of the display behaviour.
See http://www.brunildo.org/test/InlineBlockLayout.html for more details.
*/
.wrapper {
*display: inline;
}
table {
border: 1px solid red;
}
</style>
</head>
<body>
<h1>No width on table:</h1>
<div class="wrapper">
<h2>The right hand side of the table doesn't stretch to the end of this heading</h2>
<table><tr><td>foo</td></tr></table>
</div> text
<h1>Width on table:</h1>
<div class="wrapper">
<h2>The right hand side of the table should stretch to the end of this heading</h2>
<table style="width: 100%"><tr><td>foo</td></tr></table>
</div> text
</body>
</html>
Update: here's another example of the problem, this time without using a table and using an absolutely positioned container element. You can see the code running live at http://jsbin.com/igila4.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style>
div {
position: absolute;
border: 1px solid red;
}
input {
width: 100%;
*width: 95%; /* fudge factor for IE 6/7 which don't support box-sizing */
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
textarea {
width: 400px;
}
</style>
<body>
The width of the input and textarea below should be identical.<br/>
<div>
<input value="This is an input with width 100%"><br/>
<textarea>This is a text area with width 400px.</textarea>
</div>
</body>
</html>