Forum Moderators: not2easy
This problem is not there if romve the float from the following
#citySelector {
float:left;
margin-top:6px;
}
Below is my page if someone can suggest something.
thanks
Vik
<!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=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!--
* {
padding:0px;
margin:0px;
}
body {
background-color:#036da1;
}
a.listbox {
background-color:#FFFFFF;background-position:right;
background-repeat:no-repeat;
border: 1px #eeeeee solid;
color:#666666;
cursor:pointer;
display:block;
font:12px/20px Trebuchet, Trebuchet MS, Verdana, sans-serif;
margin-right:30px;
padding:1px 35px 1px 10px;
text-decoration:none;
color:#00aad9;
text-decoration:none;
}
a.listbox:hover {
color:#666666;
text-decoration:underline;
}
#citySelector {
float:left;
margin-top:6px;
}
#cityListDiv {
display:none;
position:absolute;
background-color:#EEEEEE;
width:200px;
z-index:101;
clear:both;
}
.dropDownList {
background-color:#FFFFFF;
border:2px solid #EEEEEE;
padding:5px 5px 10px 5px;
}
.dropDownList ul {
max-height:300px;
overflow:auto;
}
.dropDownList ul li {
list-style:none;
border-bottom:#CCCCCC 1px dashed;
}
.dropDownList ul li a {
padding-left:10px;
list-style:none;
display:block;
font:12px/20px Trebuchet, Trebuchet MS, Verdana, sans-serif;
}
.dropDownList ul li a:hover {
background-color:#EEEEEE
}
.dropDownListHeading {
display:block;
background-color:#0099CC;
font:12px/25px Trebuchet, Trebuchet MS, Verdana, sans-serif;
font-weight:bold;
padding-left:10px;
color:#FFFFFF;
cursor:pointer;
margin-bottom:10px;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function toggleDisplay(id){
var me = document.getElementById(id);
if (me.style.display=="none"){
me.style.display="block";
}
else if (me.style.display=="block"){
me.style.display="none";
}else{
me.style.display="block";
}
}
// -->
</script>
</head>
<body>
<div id="citySelector"> <a onclick="javascript:toggleDisplay('cityListDiv');" class="listbox">select a city</a>
<div id="cityListDiv">
<div class="dropDownList">
<div onclick="javascript:toggleDisplay('cityListDiv');" class="dropDownListHeading">Select Your City</div>
<ul>
<li><a href="#">city 1</a></li>
<li><a href="#">city 2</a></li>
<li><a href="#">city 3</a></li>
<li><a href="#">city 4</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
It’s because IE 6 hasn’t assigned hasLayout to the anchor. It’s… a fault, I suppose. There are certain ways to get IE 6 to display this properly:
Setting a width: if you explicitly set a width to the anchor, IE will trigger hasLayout and it will display as you intended.
Setting a height: ditto on the height :)
Setting
This is a proprietary property just for IE, where you can zoom in on a page (try setting 1.5, 2 etc,) but in this instance if we just set it to 1, it will trigger hasLayout. zoom: 1;
All of these, if not suitable in the main stylesheet, should be put in a conditional commented stylesheet :)
