while working on a new website I came along a, what some might say, IE7 Bug. Now, IE7 is not known for not having any bugs, so this may be not a new issue, but since I read in some forums about people having similar problems, I desided to break to my HTML code and deliver the web a solution for that "bug".
What is it about?
The Website I'm working on has to have a height of 100% of the viewport (at least) and has a header, a sidebar on the left and a content area.The header must have a specific height, in this example it's 40px, while the other two areas should take the rest of the height available espacially the content area.
To achieve this, I decided to use a layout TABLE (don't tell me ;-), as using DIVs is kind of tricky when you want to use "all the rest of the height" somewhere in the document (if you know better please leave a comment!).
I thought this is straight forward and I wrote the following Markup:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/xhtml+xml; charset=utf-8"></meta>
<title>IE7 Row Bug?</title>
<style type="text/css" media="screen">
html, body, table, td, tr {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
table {
border-collapse: collapse;
}
table td {
vertical-align: top;
}
#bad-layout-table {
width: 700px;
background: #556688;
height: 100%;
}
#bad-layouts-table-header-row {
background: red;
}
#header-menu {
height: 40px;
background: #adad99;
}
#left-items-wrapper-cell {
width: 168px;
background: #fff;
}
#content-wrapper-cell {
padding: 1em;
border-top: 1px dashed white;
height: 100%;
}
</style>
</head>
<body>
<table id="bad-layout-table">
<tr id="bad-layouts-table-header-row">
<td colspan="2" id="header-wrapper-cell">
<div id="header-menu">
The Header Menu in the main row
</div>
</td>
</tr>
<tr id="bad-layouts-table-main-row">
<td id="left-items-wrapper-cell">
<p style="height: 250px;">
Some Info to the left
</p>
</td> <!-- End of left-items-wrapper-cell -->
<td id="content-wrapper-cell">
<h1>Some Dummy Content</h1>
<p style="height:200px">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim
id est laborum.
</p>
</td> <!-- End of iframe-wrapper-cell -->
</tr>
</table> <!-- End of bad-layout-table -->
</body>
</html>
]]>
Me: "Man, that was easy! Give me a more difficult task!"
MS: "No problem dude! Try to make it compatible with IE7!"
Me: "Ohhh shit, I was hoping you wouldn't mention that, but OK, I'll try"
Yes, it works in every standard compliant browser, even IE7 looks good at first but then I realized the scroll bars, where there shouldn't be scroll bars.It seems, that setting #content-wrapper-cell to height: 100% was no good, as IE7 sets the height to the height of the hole viewport, and that's why I had to scroll for 40px.
Well I'll shorten the story a bit:
What you can do, to give the second row (
#bad-layouts-table-main-row) a height of the rest of the screen is the set
#bad-layouts-table-main-row {
height: 100%;
}
And remove the height anotation from
#content-wrapper-cell
#content-wrapper-cell {
padding: 1em;
border-top: 1px dashed white;
height: 100%;
}
It's pretty streight forward, but I was wondering, as suddently the header row was heigher than 40px. I thought of padding, margin, some padding/margin defined inside the header, and lot's of other things. People where writing, they have the same problem, with giving some table element a "rest of the screen" height and that the row height seems to be always around some percantage more than it's defined in the css. Have a look at the screenshot with the red row between the header and the content area. This is actually the background of #bad-layouts-table-header-row. Tried lot's of CSS magic on that element.What I find weird is, that setting height to 100% on the tables cell, makes the cell as high as the screen, but setting the 100% on the table row makes the row as high as the rest of the screen allows.
Now I think I spent enough time documenting this issue. Time to go on ;-)
cu
