When I try to set a top maring or top padding for the menu it pushes my #container downwards, and I need the menu to lay on top of the bgimage a little bit.. anyone know where they are conflicting?
HTML Code:
<!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>Untitled Document</title>
<style type="text/css" media="screen">
<!--
@import url(css/dropmenu.css);
img {border:0}
a:link {text-decoration:none}
-->
</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>
</head>
<body>
<div id="container">
<ul id="DropDownMenu">
<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>
<!-- /menu -->
</body>
</html>
Code:
/* all lists */
#DropDownMenu a,
#DropDownMenu a:link,
#DropDownMenu a:visited {
font-size:.9em;
color:#666666;
font-family: arial, "myriad-pro";
}
#DropDownMenu,
#DropDownMenu ul {
width:750px;
background-image: url(dropmenu.png);
background-repeat: no-repeat;
}
/* Nested ULs */
#DropDownMenu li ul {
position:absolute;
top:1.2em;
left:-900px
}
/* All LIs */
#DropDownMenu li {
float:left;
width:auto;
margin:0;
padding:0;
list-style-type:none;
font-weight:600;
border-bottom:0px;
}
#DropDownMenu li a {
padding:.1em .4em;
height:2em;
color:#999999
line-height:1em;
border-bottom:0px;
}
#DropDownMenu li a:hover {
background-image:none;
color:#555555
border-bottom:0px
}
#DropDownMenu li ul li a {
line-height:1.7em;
height:1.7em;
font-weight:400;
border:none;
color:#D3D3D3;
background-image:none;
}
#DropDownMenu li ul li a:hover
{
color:#FFFFFF;
}
/* we reset the margin for the children */
#DropDownMenu li ul li {
margin:0;
border-bottom:0;
border-right:0px
}
#DropDownMenu li:hover ul,
#DropDownMenu li.msieFix ul {left:9px}
html>body #container
{
position: relative;
clear: none;
width: 700px;
margin: 0 auto;
height: 635px;
clear: none;
height: 635px;
background-image: url(bg1page.jpg);
background-repeat: no-repeat;
background-position: center;
}
Threaded Mode
