No replies
gdsandman
Offline
newbie
Portland
Last seen: 12 years 37 weeks ago
Portland
Joined: 2006-08-21
Posts: 2
Points: 0

I built a CSS driven drop down menu. it works well in firefox but in IEwin the positioning is all messed up. i have tried everything that i know of, but i still lack the expertise in CSS. if someone cold look at this and see i left something out that would be nice.

CSS

body, html {
	margin:0px;
	padding:0px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:center;
	height:100%;
    color:black; 
    background:black;
	behavior: url(csshover.htc);
}

/* WinIE behavior call */

#wrapper {
	width:700px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	background-color:white;
	margin-bottom:-59px;
}

/* commented backslash hack v2 \*/ 

html, body { 
	height:100%; 
} 
/* end hack */
#clearfooter {
	height:60px;
	clear:both;
}
#footer { 
	width:700px; 
	height:50px; 
	border-top:10px solid #066222; 
	margin-left:auto;
	margin-right:auto;
	background-color:black;
	color:white;
	font-size:10px;
	padding-top:5px;
	clear:both;
}
img {
    margin-top:0px;
    height:245px;
    width:700px;
    margin-bottom:10px;
}
#menu {
	width: 700px;
	background: black;
	float: left;
	position: absolute;
	top: 246px;
	margin-left: auto;
	margin-right: auto;
	height: 0px;
	left: 188px;
	vertical-align: middle;
	display: inline-block;
}
#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 140px;
    float: left;
}
#menu a, #menu h2 {
    font: bold 11px/16px arial, helvetica, sans-serif;
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    margin: 0;
    padding: 2px 3px;
}

#menu h2 {
    color: #fff;
    background: #000;
    text-transform: uppercase;
}

#menu a {
    color: #000;
    background: #efefef;
    text-decoration: none;
}

#menu a:hover {
    color: #066222;
    background: #fff;
}
#menu li {
    position: relative;
}
#menu ul ul {
    position: absolute;
}
#menu ul ul ul {
    top: 0;
    left: 100%;
}

div#menu ul ul,div#menu ul li:hover ul ul,div#menu ul ul li:hover ul ul{
    display: none;
}
div#menu ul li:hover ul,div#menu ul ul li:hover ul,div#menu ul ul ul li:hover ul{
    display: block;
}
#menu ul li {
    float: left; width: 100%;
}
#menu ul li a {
    height: 1%;
} 
#menu a, #menu h2 {
    font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}



body {
behavior: url(csshover.htc); /* call hover behaviour file */
font-size: 100%; /* enable IE to resize em fonts */
} 
#menu ul li {
float: left; /* cure IE5.x "whitespace in lists" problem */
width: 100%;
}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif; 
/* if required use em's for IE as it won't resize pixels */
} 



/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#logo {
	position:absolute;
	top:0px;
	margin-left:0px;
	height:40px;
	width:362px;
	padding-left:5px;
	padding-top:15px;
	color:#088a13;
	font-size:19px;
	font-weight:900;
    font-style:italic;
}
#sublogo {
	font-size:10px;
	margin-left:15px;
	margin-top:3px;
    color:white;
    font-style:normal;
}
h3 {
	font-size:12px;
	font-weight:bold;
	color:black;
}
h2 {
	color:black;
	font-size:90%
}
#content {
	padding:10px;
	font-size:80%;
}

HTML

<body>
<div id="wrapper">
	<img src="images/top1.gif"/> 
	<div id="content">
		<h2>Welcome to our site</h2>
	<p>Green Diamond Sand is one of the leading specialty sand manufacturers in the United States. Operating since 1954, the Green Diamond name represents the natural color and the hardness of diamonds.</p>

<p>An increase in invironmental consiousness has resulted in the industry phasing out silica-type products and replacing them with new varieties that are recyclable and environmentally safe. Our product does not contain free silica, thus eliminating the chance of respiratory silicosis. It also does not contain any heavy metals or chemicals that are harmful to the environment, meeting the standards of the US Navy, OSHA, EPA, and the state of California.</p>
	
<p>Explore this site further to learn more about the unique properties of our products and how they could benifit your business.</p>
  <div>

	<div id="menu">
<ul>
  <li><h2>home</h2>
    <ul>
      <li><a href="http://www.#.com" title="home" rel="nofollow">Home</a>
        </ul>
	  </li>
	</ul>
  </li>
</ul>

<ul>     	
  <li><h2>products</h2>
    <ul>
      <li><a href="http://www.#.com" title="abrasive products">Abrasives</a></li>
      <li><a href="http://www.#.com" title="foundry sands" rel="nofollow">Foundry</a>
      <li><a href="http://www.#.com" title="roofing granules" rel="nofollow">Roofing</a>
	  <li><a href="http://www.#.com" title="construction sands" rel="nofollow">Construction</a>
	  <li><a href="http://www.#.com" title="agricultural sands" rel="nofollow">Agricultural</a>
	  <li><a href="http://www.#.com" title="golf sands" rel="nofollow">Golf</a>
	  <li><a href="http://www.#.com" title="rock products" rel="nofollow">Rock</a>
	  <li><a href="http://www.#.com" title="ballast products" rel="nofollow">Ballast</a>
	  <li><a href="http://www.#.com" title="recycle" rel="nofollow">Recycle</a>
        </ul>
      </li>
      </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>about</h2>
    <ul>
      <li><a href="http://www.#.com" title="company info" rel="nofollow">Green Diamond Sand</a></li>
      <li><a href="http://www.#.com" title="oregon locations" rel="nofollow">Plant Locations</a>
	  <li><a href="http://www.#.com" title="distribution" rel="nofollow">Distibution</a>
	  <li><a href="http://www.#.com" title="the future" rel="nofollow">The Future</a>
        </ul>
      </li>
      </ul>
      </li>
    </ul>
  </li>
</ul>	

<ul>
  <li><h2>contact</h2>
    <ul>
      <li><a href="http://www.#.com" title="sales contacts" rel="nofollow">Sales</a></li>
      <li><a href="http://www.#.com" title="company contacts" rel="nofollow">Company</a>
        </ul>
      </li>
      </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>downloads</h2>
    <ul>
      <li><a href="http://www.#.com" title="msds, spec sheets, screen analysis" rel="nofollow">Downloads</a></li>
        </ul>
      </li>
      </ul>
      </li>
    </ul>
  </li>
</ul>												
</div>
   	<div id="clearfooter"></div>
</div>

<div id="footer">© greendiamondsand.com</div>

</body>
</html>