Odd problem and I don't know if anyone here can help or not. The website for where I work is based on a Dreamweaver template and the end users can edit the content using Contribute (v2).
The navigation panel is on the left and is a DIV container with two nested DIVs. The first DIV is for sitewide links and the second DIV is for links pertinent to where the browser currently is on the site (at least that's the idea anyway but users feck that up all the time).
Anyway the DIVs all render fine within the browser. BUT when the department staff go to edit the page in Contribute the DIVs are overlapping and totally unusable (screenshots are coming as soon as I install Contribute on my workstation).
I'm pretty sure that this is a bug within Contribute but I'm not ruling out a problem with the CSS positioning either. I'm not very up on CSS and haven't had the time to fully investigate the problem. Here's the structure of the navigation bar and the layout/formatting CSS follows.
Code:
<div id="navBar">
<div id="search">
<form action="http://www.google.com/search">
<label>search</label>
<input name="q" type="text" size="18">
<input name="btnG" type="submit" value="go">
</form>
</div>
<div id="sectionLinks">
<h3>Section Links</h3>
<ul>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<ul>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
</ul>
</div>
</div>
Positional CSS for the DIVs is defined as:
Code:
#navBar{
float: left;
width: 20%;
height: 100%;
margin: 0px;
padding: 0px;
}
#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
font-size: 90%;
}
.relatedLinks{
position: relative;
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
visibility: visible;
}
Formatting CSS is:
Code:
/************* #search styles ***************/
#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #B3864F;
font-size: 90%;
}
#search form{
margin: 0px;
padding: 0px;
}
#search label{
display: block;
margin: 0px;
padding: 0px;
}
/*********** #navBar link styles ***********/
#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #B3864F;}
/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}
/*********** #sectionLinks styles ***********/
#sectionLinks h3{
padding: 10px 0px 2px 10px;
}
#sectionLinks a {
display: block;
border-top: 1px solid #B3864F;
padding: 2px 0px 2px 10px;
}
#sectionLinks a:hover{
background-color: #FCC374;
}
/*********** .relatedLinks styles ***********/
.relatedLinks h3{
padding: 10px 0px 2px 0px;
}
.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}
Don't know why that made me laugh but it literally did.
