View Single Post
Old 07-28-2008, 06:15 PM   #1
confucious
 
Join Date: Jun 2008
Posts: 26
Default Spry drop down menu displaying wrong

I am having supreme trouble with my spry menu!

I have created a CSS two column, header and footer template and inserted logo etc at top in a table. Now I want to put a spry menu below, either in the header or just below the header and above the two body sections. I can insert a menu into a separate Ap Div, or even into the header below the table, but my menu displays as just words heaped on top of eachother when I preview in any browser (though it looks fine in Dreamweaver CS3). I am thinking there is a CSS conflict perhaps?? I have changed a lot of the attributes of the spry menu css...could this be the problem? Is it that the main body sections are floated left and right? Here is the code:
Any help would be GREATLY appreciated!!!

<!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>
<link href="root folder/twoColFixLtHdr.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
-->
</style>
<link href="css rules/shoppingcart.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style4 {font-size: 14px}

#apDiv8 {
position:absolute;
left:6px;
top:160px;
width:960px;
height:31px;
z-index:1;
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style6 {font-size: 12px}
-->
</style>
</head>

<body class="twoColFixLtHdr">
<div id="apDiv8">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
<div id="container">
<div id="header">
<table width="949" border="0" cellpadding="10">
<tr>
<th width="280" height="154" scope="col"><img src="root folder/imagesandlogos/burapalogo.jpg" alt="logo" width="250" height="112" align="left" /></th>
<th width="358" scope="col"><p align="center" class="style6 style4">Burapa carries only the finest </p>
<p align="center" class="style6 style4">quality home and personal style </p>
<p align="center" class="style6 style4">product from Thailand, Laos,</p>
<p align="center" class="style6 style4">Nepal and Tibet</p></th>
<th width="92" scope="col"><p align="center"><img src="root folder/imagesandlogos/smallshoppingcart.jpg" alt="shoppingcart" width="65" height="44" align="top" /></p>
<p align="center"><span class="style6">my </span></p>
<p align="center" class="style6">shopping </p>
<p align="center" class="style6">cart</p></th>
<th width="56" nowrap="nowrap" scope="col"><p><img src="root folder/imagesandlogos/planesmaller.jpg" alt="shipping" width="50" height="37" /></p>
<p align="center" class="style6">shipping</p>
<p align="center" class="style6">faqs</p>
<p align="center">&nbsp;</p></th>
<th width="51" nowrap="nowrap" scope="col"><p><img src="root folder/imagesandlogos/Mail1.gif" alt="contact" width="38" height="47" /></p>
<p class="style6">contact</p>
<p class="style6">info</p>
<p>&nbsp;</p></th>
</tr>
</table>
<p>
<p align="center" class="style4">&nbsp;</p>
</div>
<div class="fltlft" id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container -->
</div>

<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
confucious is offline   Reply With Quote