My OperaYou need to be logged in to post in the forums. If you do not have an account, please sign up first.
div resizing with top:0 and bottom:0
I am creating a nested div that is meant to expand to fill the parent div, using position:absolute and left/top/right/bottom:0. When I resize the outer div, the inner div changes width, but doesn't change height to match. This works correctly (or as I expect it to work) in FF3 and IE7. I see the weird behavior in Opera 10.10 and 10.5x (Windows and Linux).Here's the code. Load this and then click "tall" or "short" -- the inner (blue) div doesn't track the outer (red) div.
Am I doing something wrong? Or is this an opera bug? If so, is there a workaround?
<html>
<head>
<style type="text/css">
.outer {
position: absolute;
left: 200px;
top: 100px;
width: 300px;
height: 200px;
border: 8px solid #ff0000;
}
.inner {
position: absolute;
border: 8px solid #0000ff;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
</style>
<script language="JavaScript">
function tall() {
document.getElementById("a").style.height = "300px";
}
function short() {
document.getElementById("a").style.height = "100px";
}
function wide() {
document.getElementById("a").style.width = "400px";
}
function narrow() {
document.getElementById("a").style.width = "200px";
}
</script>
<body>
<div class="outer" id="a">
<div class="inner" id="b">
</div>
</div>
<a href="javascript:tall()">tall</a>
<a href="javascript:short()">short</a>
<a href="javascript:wide()">wide</a>
<a href="javascript:narrow()">narrow</a>
</body>
</html>
I can confirm the problem with position:absolute; top:0px; bottom:0px; for a div inside a resizing div from my own code. The problem does not appear in FF 3.6.3, Chrome 4.1 or IE 8.0. According to other sources on the Internet, e.g http://www.alistapart.com/articles/conflictingabsolutepositions/, this and related problems have persisted in varying incarnations from Opera 6, through 8 and 9, and now in 10.53.
If display:table; is defined for the outer div and display:table-cell; is defined for the inner div, also Opera will resize. The problem is that this will completely ruin FF's rendering. If you have PHP capabilities on your server this can be counteracted by defining an additional style sheet for Opera only. For my code I changed from .html to .php and added the following inside the head tag:
<?php
$navigator_user_agent = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';
if (stristr($navigator_user_agent, "opera")) {
echo " <link rel=\"stylesheet\" href=\"opera.css\" type=\"text/css\" media=\"all\" />\n";
}
?>
... then added the extra code for Opera in the opera.css file. The browser specific hack can also be done using JavaScript though when I tested it IE 8 stopped the script with a warning bar above the webpage.
If you find simpler solutions let me know!!
If display:table; is defined for the outer div and display:table-cell; is defined for the inner div, also Opera will resize. The problem is that this will completely ruin FF's rendering. If you have PHP capabilities on your server this can be counteracted by defining an additional style sheet for Opera only. For my code I changed from .html to .php and added the following inside the head tag:
<?php
$navigator_user_agent = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';
if (stristr($navigator_user_agent, "opera")) {
echo " <link rel=\"stylesheet\" href=\"opera.css\" type=\"text/css\" media=\"all\" />\n";
}
?>
... then added the extra code for Opera in the opera.css file. The browser specific hack can also be done using JavaScript though when I tested it IE 8 stopped the script with a warning bar above the webpage.
If you find simpler solutions let me know!!
A working example with top:0px; bottom:0px, is now available on http://solglott.org (where PHP includes an extra CSS for Opera).