форма не отображается должным образом в Chrome и IE6 - PullRequest
0 голосов
/ 13 апреля 2011

Вот моя страница.Мне нужно вставить весь код здесь.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#tabs ul li:first a').addClass("active");
        $('#forms').find('form').hide().fadeIn(1500);
        $("#tabs ul li").click(function() {
            $("#tabs ul li").removeClass("active");
            $(this).addClass("active");
            $("#forms form").hide();
            var activeTab = $(this).find("a").attr("href");
            $(activeTab).fadeIn();
            return false; 
        });
    });
</script>
<style type="text/css">
* { margin:0; padding:0; }
body { background:#27476B; }
.clear { clear:both; }
#wrapper { width:510px; height:331px; overflow:hidden; padding:10px; }
#tabs ul { padding-left:15px; list-style:none; }
#tabs ul li { display:block; float:left; text-align:center; }
#tabs ul li a { padding:3px 20px 2px 20px; color:#fff; text-decoration:none; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; }
#tabs ul li a:hover { background:#AEBAC1; } 
#tabs ul li a.active, #tabs ul li.active a:hover { background:#AEBAC1; color:#333; }
#forms form { background:#AEBAC1; border:2px solid #333; padding-left:5px; }
.twocol { display:block; float:left; width:250px; margin-bottom:10px; }
.twocol label { margin-top:.33em; display:block; width:240px;}
.twocol select, .twocol input[type="text"] { background:#456A87; color:#fff; display:block; width:240px; font-size:16px; }
.twocol span { padding:0 8px 0 5px; }
.search { width:500px; text-align:center; margin-bottom:5px; }
</style>
</head>

<body>
    <div id="wrapper">
        <div id="tabs">
            <ul>
                <li><a href="#properties">Properties</a></li>
                <li><a href="#developments">Developments</a></li>
                <li><a href="#agents">Agents</a></li>
            </ul>
        </div>
        <div class="clear"></div>
        <div id="forms">
        <!--
                Search Form for Properties
        -->
          <form id="properties" name="properties" method="post" action="">
          <div class="twocol">
              <label for="city">City:</label>
              <select name="city" size="1">
                <option>-</option><option>asdfadf</option><option>-</option>
              </select>

              <label for="bedrooms">Bedroom:</label>
              <select name="bedrooms" size="1">
                <option>-</option>
              </select>

              <label for="minprice">Minimum Price:</label>
              <select name="minprice" size="1">
                <option>-</option>
              </select>

              <label for="minarea">Minimum Area:</label>
              <select name="minarea" size="1">
                <option>-</option>
              </select>

              <label for="propertytype">Property Type:</label>
              <select name="propertytype" size="1">
                <option>-</option>
              </select>

          </div>
          <div class="twocol">
              <label for="location">Location:</label>
              <select name="location" size="1">
                <option>-</option>
              </select>

              <label for="addedwithin">Added Within:</label>
              <select name="addedwithin" size="1">
                <option>-</option>
              </select>

              <label for="maxprice">Maximum Price:</label>
              <select name="maxprice" size="1">
                <option>-</option>
              </select>

              <label for="maxarea">Maximum Area:</label>
              <select name="maxarea" size="1">
                <option>-</option>
              </select>

              <label for="searchfor">Search For:</label>
              <input name="searchfor" type="radio" value="sale" /><span>Sale</span>
              <input name="searchfor" type="radio" value="purchase" /><span>Purchase</span>
              <input name="searchfor" type="radio" value="rental" /><span>Rental</span>
          </div>
          <hr class="clear" /><br />
          <div class="search">
            <input type="submit" value="Search" />
          </div>
          </form>
        <!--
                Search Form for Developments
        -->
        <form id="developments" name="developments" method="post" action="">
            <div class="twocol">
                <label for="city">City:</label>
                <select name="city" size="1">
                    <option>-</option><option>asdfadf</option><option>-</option>
                </select>
            </div>
            <div class="twocol">
                <label for="developmentname">Development name:</label>
                <input type="text" name="developementname" />
            </div>
            <hr class="clear" /><br />
            <div class="search">
                <input type="submit" value="Search" />
            </div>
        </form>
        </div>
    </div>
</body>
</html>

Вот идеальный вид (в Firefox) Firefox Snapshot

Следующие проблемы определены мной, пожалуйста, дайте мне знать, если есть некоторыеи другие тоже.

  1. IE8 и Chrome показывают некоторую дополнительную высоту (которая отображает небольшую часть второй формы) IE8 Snapshot
  2. IE6 не показывает ширину, указанную в CSS.
  3. В IE6 изначально вкладки div соприкасаются с формами div.Но при наведении мыши это добавляет некоторый дополнительный интервал.IE6 Snapshot

Как это можно решить.

1 Ответ

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

Я не уверен, что вы подразумеваете под пунктами 1 и 2, но 3 я все исправил.Я мог бы исправить 1 и 2 (не уверен).

Дайте мне знать, как это работает для вас.

http://jsfiddle.net/3uMyA/3/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...