Hi guys,
I am having the same problem.
BTW great work Kyle on the demos. I didn’t try much with it yet because I think the problem lies with my CSS.
On this template, Wayfinder works fine:
http://intrigue.websitewelcome.com/~hhi/index.php?id=2 It works naturally without any chunks.
On this other template, Wayfinder won’t do the drop-down:
http://intrigue.websitewelcome.com/~hhi/index.php?id=3
Here is the template code:
<!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>
{{SiteMetaChunk}}
<base href="[(site_url)]"/>
<title> [*pagetitle*] | [(site_name)]</title>
<link rel="stylesheet" type="text/css" href="[(base_url)]assets/templates/corporateblue/layout.css" />
<style type="text/css">
<!--
@import url("layout.css");
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
{{LogoChunk}}
</div>
<div id="main-menu">
<div id="navigation">
[[Wayfinder? &startId=`0`]]
</div>
</div>
<div id="content">
<div id="left">
[*#content*]
</div>
</div>
<div id="right">
[*#Box1*]
<hr class="hr1" />
[*#Box2*]
<hr class="hr1" />
[*#Box3*]
<hr class="hr1" />
</div>
<div class="hr1">
<hr />
</div>
<div id="footer">
{{Footer}}
</div>
</div>
</body>
</html>
Here is the layout css:
/** BASIC */
html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background: #273840 url(images/homepage01.jpg) repeat-x left top;
font-size: 11px;
text-align: justify;
color: #273840;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
h2 {
font-size: 14px;
text-transform: uppercase;
}
h2.bigger {
font-size: 18px;
text-transform: uppercase;
}
h3 {
margin: 0px;
padding: 0px;
font-size: 11px;
text-transform: uppercase;
}
h4 {
margin: 0px;
padding: 0px;
font-size: 11px;
}
p, ol, ul {
margin-top: 0px;
}
.img1 {
float: left;
margin: 4px 15px 0px 0px;
border: 2px solid #608B9F;
}
.hr1 {
clear: both;
margin-top: 10px 0px 10px 0px;
border: 1px dashed #608B9F;
}
.hr1 hr {
display: none;
}
/** WRAPPER */
#wrapper {
width: 800px;
height: 100%;
min-height: 100%;
margin: 0px auto;
padding: 30px;
background-color: #FFFFFF;
}
html>body #wrapper {
height: auto;
}
/** HEADER */
#header {
margin-bottom: 30px;
}
#header h1 {
margin: 0px;
padding: 0px;
font-size: 30px;
}
#header h2 {
margin: 0px;
padding: 0px;
font-size: 12px;
text-transform: lowercase;
}
/** MAIN-MENU */
#main-menu {
margin: 0px 0px 30px 0px;
background: #4F7383 url(images/homepage06.gif) no-repeat right top;
text-transform: uppercase;
}
#main-menu ul {
height: 28px;
margin: 0px;
padding: 11px 0px 0px 7px;
background: transparent url(images/homepage02.gif) no-repeat left top;
list-style: none;
}
#main-menu li {
display: inline;
}
#main-menu a {
padding: 0px 8px 0px 15px;
background: transparent url(images/homepage03.gif) no-repeat left center;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}
#main-menu .first a {
background: none;
}
#main-menu ul {
}
/** CONTENT */
#content {
}
#left {
float: left;
width: 600px;
}
#right {
float: left;
width: 170px;
margin: 0px 0px 0px 20px;
}
/** FOOTER */
#footer {
clear: both;
padding: 20px 0px 0px 0px;
}
#footer ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
#footer li {
display: inline;
}
#footer a {
padding: 0px 10px;
}
#footer p {
text-align: center;
font-size: 9px;
}
You can see I didn’t delete any of the main-menu CSS that the template came with. I don’t exactly know what I’m doing there, so I’ve left it alone.
Thank you for any suggestions!