CODEWITHSUNDEEP
cssinternet-explorer-6
Assad Nazar
Assad Nazar

Reputation: 1464

form not showing up properly in chrome and IE6

Here is my page. I need to insert whole code here.

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

Here is the perfect view (on Firefox) Firefox Snapshot

Following problems are identified by me, Please let me know if there are some others too.

  1. IE8 and Chrome are showing some extra height (which is displaying a little part of 2nd form) IE8 Snapshot
  2. IE6 not showing the width specified in CSS.
  3. In IE6, initially tabs div is touching with the forms div. But on mouse over it adds some extra spacing. IE6 Snapshot

How can it be solved.

Upvotes: 0

Views: 729

Answers (1)

gutierrezalex
gutierrezalex

Reputation: 828

I am not sure what you mean by points 1 & 2, but 3 I got it fixed. I might have fixed 1 & 2(not sure).

Let me know how this works for you.

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

Upvotes: 1

Related Questions