pitty, but the last attempt did not work with IE7.
A quick hack is presented here. The body[id] syntax was dropped, as IE7 does understand and the css definitions are seperated, where one part is in the well known conditional comment, understood just by IE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Verticaly and horizontaly centering</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
html {
overflow: hidden;
}
body {
text-align: center; /*horizontal center in IE*/
}
body[id] {
display: table;
}
#table {
position: absolute;
top: 50%;
left: 50%;
}
#table[id] {
position: static;
display: table-cell;
vertical-align: middle;
}
#cell {
text-align: left;
background: #9f9;
position: relative;
top: -50%;
left: -50%;
height: 300px;
width: 500px;
overflow: auto;
margin: 0 auto 0 auto;
padding: 0.5em;
}
#cell[id] {
position: static;
}
</style>
<!--[if IE]>
<style type="text/css">
#table {
position: absolute !important;
display: block !important;
}
#cell {
position: relative !important;
}
</style>
<![endif]-->
</head>
<body id="body">
<div id="table">
<div id="cell">
<p>The div box with the green background ist now centered verticaly and horizontaly in IE lte 7 and Firefox<br/>
The css definitions had to be made conditioned for IE. The old solution with syntax like <b>body[id]</b> does not work with IE7, as the trick was that IE does not understand this syntax, but IE7 does.<br/>
Probably there is a finer solution to this, but as I got no time now, I can't experiment with that stuff.<br/>
This attempt, however, works just fine.
<br/>
And if we put some more text in this div, we will have a scroll bar just for this one.<br/>
I also added some padding to this div, just to look a little better.
</p>
<p>
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.<br/>
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>
</div>
</div>
</body>
</html>
Keine Kommentare:
Kommentar veröffentlichen