Разверните элемент Parent Div до ширины элементов с помощью CSS и HTML. - PullRequest
Новая
       21

Разверните элемент Parent Div до ширины элементов с помощью CSS и HTML.

2 голосов
/ 10 марта 2011

В настоящее время я разрабатываю бэкэнд-интерфейс для своего клиента и попал в кирпичную стену.Похоже, что Internet Explorer (все версии, включая 9 бета) и Chrome не отображают страницу должным образом.Firefox и Safari отлично отображают страницу.Я нахожу довольно странным, что он работает на Safari, но не на Chrome ... в любом случае, это не имеет значения.

Как выглядит форма в Safari и Firefox - это желаемый результат:

enter image description here

Как выглядит форма во всех браузерах, кроме Safari и Firefox - это нежелательно:

enter image description here

Мне нужен способ сделать фонрасширить до ширины, которая установлена ​​в CSS в этих других браузерах.Любые советы и подсказки были бы очень благодарны, так как я застрял на этом около 5 часов сегодня, и это начинает очень расстраивать меня.

После некоторой помощи, я сузил проблему доПлагин jQuery «столбцы одинаковой высоты», но мне нужен эффект, который есть, поэтому наверняка есть способ заставить эту работу работать в других браузерах.

Мой HTML-код: 

<head>
    <meta charset="UTF-8">
    <title>User Login</title>
    <link rel="shortcut icon" href="images/favicon.png" />
    <link rel="stylesheet" href="stylesheets/reset.css" type="text/css" />
    <link rel="stylesheet" href="stylesheets/styles.css" type="text/css" />
    <script src="javascript/jquery.js" type="text/javascript"></script>
    <script src="javascript/jquery.equalHeightColumns.js" type="text/javascript"></script>

    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="" />

    <script type="text/javascript">

        $(document).ready(function() {
            $("#form_left, #form_right, #form_right input").equalHeightColumns();

         });

    </script>

</head>

<body>

    <a href="forgot_password.html" class="loginmeta">Forgot Password?</a>

    <div id="container">

        <div id="header">
            <h1><a href="#">User Login</a></h1>
        </div>

        <div id="form">

            <form name="login" action="#" method="post">

                <div id="form_left">
                    <label for="">Username</label>
                    <input type="text" id="username" />

                    <label for="">Password</label>
                    <input type="password" id="password" />
                </div>

                <div id="form_right">
                    <input type="submit" name="submit" value="Log In" />
                </div>

                <div class="clear"></div>

            </form>

        </div>      

    </div>  

</body>

и CSS: 

//*
TYPE
*/
a.loginmeta                 { position: absolute; 
                          right: 20px; top: 20px; 
                          color: #4a4f5b; 
                          font-size: 12px; }
a.loginmeta:hover           { color: #5d6472; }

/*
    STRUCTURE   
*/
body                        { background:         url('../images/page_background.png') repeat; }
#container                  { width: 480px; display: block;
                          margin: 100px auto 0 auto; }

/*
    FORM
*/      

form                        { width: 480px; margin: 30px 0 15px     0; }

form label                  { color: #919191;
                          text-transform: uppercase;
                          display: block;
                          margin-bottom: 10px; }

form input                  { background: #ffffff;
                          border: 1px solid #d1d1d1;
                          font-size: 17px;
                          color: #414141;
                          padding: 10px; margin-bottom: 10px; 
                          width: 328px; }

#form_left, #form_right     { -webkit-border-radius: 5px;
                          -moz-border-radius: 5px;
                          border-radius: 5px;
                          -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
                          -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
                          box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
                           }

#form_left                  { float: left;
                          width: 350px; 
                          background: url('../images/form_background.png') repeat-x bottom left #f3f3f3;
                          padding: 20px 20px 10px 20px; }

#form_right                 { float: right;
                          background: url('../images/form_background.png') repeat-x bottom left #f3f3f3; padding-bottom: 30px; }

#form_right input           { width: 80px;
                          font-size: 12px;
                          text-transform: uppercase;
                          color: #939393;
                          background: none;
                          border: none;
                          margin: 15px 0;
                          padding: 0; }                           



***

Спасибо!

1 Ответ

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

Я не знаю, помогает ли это, но поскольку ваша проблема, похоже, связана с плагином, возможно, вы могли бы попробовать это вместо этого: 

var columnMaxHeight = 0;
$("COLUMN_SELECTOR").each(function() {
    var columnHeight = $(this).height();
    if (columnMaxHeight < columnHeight) {
        columnMaxHeight = columnHeight;
        $(this).height(columnMaxHeight);
    }
});
...