CSS очень сложная проблема: проблема высоты с Xhtml - PullRequest
Новая
       21

CSS очень сложная проблема: проблема высоты с Xhtml

0 голосов
/ 13 января 2011

Хорошо, поэтому вопрос прост:

У меня есть переменная ширина и высота div, и я хочу расположить рядом с ним еще один «элемент», который в основном представляет собой планку, состоящую из 3 компонентов (верхняя фиксированная, средняя переменная высота, нижняя фиксированная), как и любой полоса прокрутки. И, как и любая полоса прокрутки, я хочу, чтобы всегда был размер div, к которому он «привязан», независимо от его размера и размера.

Код ниже делает это (я не нашел лучшего способа, если вы это сделаете, пожалуйста, скажите мне :))

Но теперь вот трюк. Если вы измените имя файла с test.html на test.xhtml (вот и все!), Он перестанет работать. Посмотрите пример (в Firefox) и убедитесь сами (в Chrome это работает)

http://stefan.apsaa.eu/test/test.html - затем просто поместите "x" перед test.html и снова нажмите enter .... в firefox ....

так. если вы, ребята, знаете, как это исправить, или знаете лучший способ, который работает как с xhtml, так и с html, я был бы признателен

Просто чтобы прояснить: я хочу переменную ширину и высоту :) (полоса прокрутки была дана только в качестве примера) 

<?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>

Ответы [ 2 ]

1 голос
/ 13 января 2011

Ваш сервер отправляет «Content-Type» «text / html» для файла с простым расширением «.html» и «application / xhtml + xml» для файла «.xhtml». Это заставляет Firefox более строго относиться к документу.

Валидатор W3C жалуется на вашу страницу.

0 голосов
/ 13 января 2011

Если у вас есть такая разметка: 

<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, как это должно работать: 

.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;
}

Обновление:

ОК, вот как его изменить, чтобы он имел переменную высоту (был сбит с толку полосой прокрутки): 

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

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

Обновление 2:

Обновлен пример с использованием тех же классов CSS, которые вы опубликовали: 

<!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>
...