PDA

View Full Version : IE7 display problem



kade119
Mar 21st, 2007, 07:58 PM
if i delete the ie5 script, everything works except for the drop menu..any thoughts?





/* all lists */
#DropDownMenu a,
#DropDownMenu a:link,
#DropDownMenu a:visited {
font-family: "myriad-pro", arial;
text-decoration: none;
}

#DropDownMenu,
#DropDownMenu ul {
width:700px;
}

/* Nested ULs */
#DropDownMenu li ul {
position:absolute;
top:138px;
left:-900px;
background-image: url("dropmenu.png");
background-repeat: no-repeat;

}
/* All LIs */
#DropDownMenu li {
float:left;
width:auto;
margin:120px 0px 0px 0px;
list-style-type:none;

}
#DropDownMenu li a {
padding:.1em .6em;
height:2em;
color:#9F9F9F;
line-height:1em;
border-bottom:0px;
font-weight:600;
font-size:11pt;

}
#DropDownMenu li a:hover {
color:#FFBA00;
}


#DropDownMenu li ul li a {
line-height:1.7em;
height:1.7em;
font-weight:600;
font-size:9pt;
color:#F0F0F0;
border-right:0px;
}


#DropDownMenu li ul li a:hover
{
color:white;
}


/* we reset the margin for the children */
#DropDownMenu li ul li {
margin:0;
border-bottom:0;
border-right:2px
}
#DropDownMenu li:hover ul,
#DropDownMenu li.msieFix ul {left:9px}


html>body #container
{
position: relative;
clear: none;
width: 814px;
margin: 0 auto;
height: 800px;
clear: none;
height: 582px;
background-image: url("bgpage.jpg");
background-repeat: no-repeat;
background-position: center;
}


html>body{
background-color: white;
}





<!DOCTYPE html 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>company</title>

<style type="text/css" media="screen">
<!--
@import url(css/dropmenu.css);
img {border:0}
</style>
<link rel="stylesheet" href="/css/p/dropdowndemo4msie.css" type="text/css" />
<script type="text/javascript" src="/articles/dropdown/styles4msie.js"></script>

<script type="text/javascript" src="/articles/dropdown/js4msie.js"></script>
<!--[if IE 5]>
<style type="text/css" media="screen">
* html #DropDownMenu li ul {top:2.2em}
* html #DropDownMenu li ul li a {line-height:1.4em;height:1.4em}
</style>
<![endif]-->
</head>
<body onload="TJKSetEvents()">
<noscript>
<!--[if IE 5]>
<style type="text/css" media="screen">
* html #DropDownMenu li ul {top:0}
* html #TJKDDM #current ul {top:0}
* html #DropDownMenu ul a:hover {line-height:17px}
</style>
<![endif]-->
</noscript>



<div id="container">


<ul id="DropDownMenu">
<li></li>
<li></li>
<li><a href="javascript:;">Home</a></li>
<li class="trigger"><a href="javascript:;">About Us</a>
<ul>

<li><a href="javascript:;">Who We Are</a></li>
<li><a href="javascript:;">Introduction</a></li>
</ul>
</li>
<li class="trigger"><a href="javascript:;">Our Portfolio</a>

<ul>
<li><a href="javascript:;">Graphic Design</a></li>
<li><a href="javascript:;">Imaging</a></li>
<li><a href="javascript:;">Web Development</a></li>
<li><a href="javascript:;">Programming</a></li>
</ul>
</li>
<li class="trigger"><a href="javascript:;">Services</a>
<ul>
<li><a href="javascript:;">Graphic Design</a></li>
<li><a href="javascript:;">Imaging</a></li>
<li><a href="javascript:;">Web Development</a></li>
<li><a href="javascript:;">Programming</a></li>
</ul>
</li>
<li class="trigger"><a href="javascript:;">Support</a>
<ul>
<li><a href="javascript:;">Contact Us</a></li>
<li><a href="javascript:;">Downloads</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

jlhaslip
Mar 21st, 2007, 11:02 PM
cssplay.co.uk has a nice selection of css drop-down menus

twodayslate
Mar 22nd, 2007, 03:31 AM
cssplay.co.uk has a nice selection of css drop-down menus

I will second that. They have a great selection!