CSS very tricky problem: Height issue with Xhtml_问答_开发者

Ok so the question is simple:

I have a variable width and height div and I want to position next to it another "element" which is basically a bar made up of 3 components (top-fixed, middle-variable height, bottom-fixed) just like any scrollbar. And, just like any scrollbar, i want to to always be the size of the div it is "attached" to, regardless of its size and when it开发者_JAVA技巧 resizes.

The code bellow does that (i haven't found a better way, if you do, please tell me :) )

But now here's the trick. If you change the name of the file from test.html to test.xhtml (that's it!) it stops working. Check out the example (in Firefox) and see for yourselves (in Chrome it works)

http://stefan.apsaa.eu/test/test.html - then simply put an "x" in front of the test.html and hit enter again.... in firefox....

so. if you guys know how to fix it, or know a better way that works with both xhtml and html, i'd be grateful

Just to be clear: I want a VARIABLE WIDTH and HEIGHT :) (the scrollbar was given just as an example)

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE xhtml 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" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:svg="http://www.w3.org/2000/svg" xml:lang="en-ca">
 <head>

    <style>
        .handle{
            width               : 5px;
            height          : 100% !important; 
            margin          : 0;
            padding             : 0;
            overflow            : hidden;
        }
        .handle a{
            position : relative;
            display             : inline-block !important; 
            height              : 100% !important;
            text-decoration : none;
        }
        .handle a:hover{
            height  : 100% !important;
        }
        .handle-top{
            background  : url(images/borders/standard/border-top.png) no-repeat 0 0;
            height      : 100% !important;
        }
        .handle-middle{
            background      : url(images/borders/standard/border-mid.png) repeat-y 0 0;
            height          : 100% !important;
        }
        .handle-bottom{
            background  : url(images/borders/standard/border-bot.png) no-repeat 0 100%;
            height      : 100% !important;
        }
    </style>

 </head>

 <body>
    <table cellspacing="0" cellpadding="0" class="wrapper" style="margin: 0px;">
        <tbody>
            <tr>
                <td class="handle">
                    <a href="#">
                        <div class="handle-top">
                            <div class="handle-bottom">
                                <div class="handle-middle">!</div>
                            </div>
                        </div>
                    </a>
                </td>
                <td width="100%" class="contentHolder">
                    <div class="section tCollapsible" style="margin: 0px;">
                        <h4>This is a DIV</h4>
                        Test<br />asdsa
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
 </body>
</html>

Your server is sending a "Content-Type" of "text/html" for the file with a plain ".html" extension, and "application/xhtml+xml" for the ".xhtml" file. That's causing Firefox to treat the document more strictly.

The W3C validator complains about your page.

If you have markup like this:

<div class="scroll-container">
  <div class="content"></div>
  <div class="scroll-bar">
    <div class="up-button"></div>
    <div class="track"></div>
    <div class="down-button"></div>
  </div>
</div>

CSS like this should work:

.scroll-container {
    position: relative; /* really, any non-static will do */
    width: 800px;
    height: 300px;
}

.scroll-container .content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 20px;
    overflow: hidden;
    background-color: red;
}

.scroll-container .scroll-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    right: 0;
}

.scroll-container .scroll-bar .up-button {
    position: absolute;
    top: 0;
    height: 20px;
    left: 0;
    right: 0;
    background-color: green;
}

.scroll-container .scroll-bar .down-button {
    position: absolute;
    bottom: 0;
    height: 20px;
    left: 0;
    right: 0;
    background-color: blue;
}

.scroll-container .scroll-bar .track {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 0;
    right: 0;
    background-color: yellow;
}

Update:

OK, here's how to modify it so it's variable-height (was confused by the scroll bar thing):

.scroll-container {
    position: relative; /* really, any non-static will do */
}

.scroll-container .content {
    margin-right: 20px;
    background-color: red;
}

Update 2:

Updated sample using the same CSS classes you posted:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head xmlns="http://www.w3.org/1999/xhtml">
    <style type="text/css">
        .container {
            position: relative; /* really, any non-static will do */
        }

        .container .content {
            margin-left: 5px;
            background-color: red;
        }

        .container .handle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 5px;
            left: 0;
        }

        .container .handle .handle-top {
            position: absolute;
            top: 0;
            height: 5px;
            left: 0;
            right: 0;
            background-color: green;
        }

        .container .handle .handle-bottom {
            position: absolute;
            bottom: 0;
            height: 5px;
            left: 0;
            right: 0;
            background-color: blue;
        }

        .container .handle .handle-middle {
            position: absolute;
            top: 5px;
            bottom: 5px;
            left: 0;
            right: 0;
            background-color: yellow;
        }    
    </style>
  </head>
  <body>
    <div class="container">
      <div class="handle">
        <div class="handle-top"></div>
        <div class="handle-middle"></div>
        <div class="handle-bottom"></div>
      </div>
      <div class="content" style="width: 400px; height: 623px">
      </div>
    </div>
  </body>
</html>