Det lader til at FF har et problem med block-elementerne. Se border på første eksempel i FF:
(har desuden et eksempel med table i bunden - mindre kode - større sandsynlighed for supportering i flere browsere da der ikke skal workarounds til - klart den bedste løsning efter min mening!!)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<style type="text/css">
body, div {margin:0;padding:0;}
HTML, BODY {height: 100%;}
#left {
width : 57em;
background-image : url('
http://www.cynope.com/bg-shadow-left.gif');
text-align : right;
background-repeat : repeat-y;
border : 1px solid #000000;
height : 100%;
}
#right {
width : 60em;
background-image : url('
http://www.cynope.com/bg-shadow-right.gif');
background-repeat : repeat-y;
text-align : left;
background-position : 100%;
border : 1px solid #AAAAAA;
height : 100%;
}
#bd {
padding : 100px;
text-align : left;
border : 1px solid #777777;
height : 100%;
margin-bottom : 1em;
}
</style>
</head>
<body>
<div id="left">
<div id="right">
<div id="bd">
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
</div>
</div>
</div>
</body>
</html>
Tables:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<style type="text/css">
body, div {margin:0;padding:0;}
HTML, BODY {height: 100%;}
#main {
height : 100%;
width : 60em;
}
#left {
width : 4em;
background-image : url('
http://www.cynope.com/bg-shadow-left.gif');
background-repeat : repeat-y;
}
#right {
width : 4em;
background-image : url('
http://www.cynope.com/bg-shadow-right.gif');
background-repeat : repeat-y;
background-position : 100%;
}
#bd {
vertical-align: top;
width : 52em;
padding : 100px;
text-align : left;
}
</style>
</head>
<body>
<table id="main">
<tr>
<td id="left">
</td>
<td id="bd">
Meget tekst
</td>
<td id="right">
</td>
</tr>
</table>
</body>
</html>