Ask a Question related to Macromedia Contribute General Discussion, Design and Development.
-
G_Monroe #1
CS3 Contribute Editor CSS Display Errors
While re-designing our sites to be table-less and be more "skin-able" via CSS,
I've found a couple of editor display bugs that make modern page layouts look
bad in Contribute. In particular, float right divs with navigation items in
them and no support for min-height. Attached is a DW template that illustrates
this.
Any suggestions on how to work around this bug?
In addition, another minor bug (missing feature). which is not illustrated in
the attached code, is that Contribute does not display JSP include files like
Dreamweaver does. E.g.: you've got a line like:
<%@ include file="sideNav.jsp" %>
The contents of sideNav.jsp are not displayed in the editor. Hmm, is that
because it's not considered a dependency when the edit copy is made?
Here's a code to demo this.
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>CSS3 Dreamweaver V9 Build 3481 Style Display Errors #1</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #002b70;
padding: 0px;
margin: 0px;
}
#header {
height: 100px;
}
#mainNavBar {
height: 18px;
width: 100%;
background-color: #002b70;
font-size: 11px;
margin: 0px;
padding: 0px;
clear: both;
color: #FF0000;
font-weight: bold;
}
#mainNavBar A,
#mainNavBar A:visited,
#mainNavBar A:active
{
color: #FF0000;
text-decoration: none;
}
#mainNavBar A:hover
{
color: #CCCCCC;
text-decoration: underline;
}
#mainNavBar #mainNavLeft { /* Left hand (main) menu section */
float: left;
margin: 0px;
margin-left: 6px;
border: 0px none;
padding: 0px;
}
#mainNavBar #mainNavLeft ul {
padding: 0px;
margin: 0px;
border: 0px none;
font-weight: 600;
font-size: 11px;
}
#mainNavBar #mainNavLeft li {
float: left;
display: block;
list-style-type: none;
text-decoration: none;
padding: 1px 8px 0 8px;
height: 16px; /* Nav width - tab border */
}
#mainNavBar #mainNavRight { /* Right hand (logoff, etc) menu section */
float: right;
margin-right: 6px;
background-color: inherit;
}
#mainNavBar #mainNavRight ul {
margin: 0px;
padding: 0px;
border: 0px none;
font-weight: 600;
font-size: 9px;
}
#mainNavBar #mainNavRight li {
float: left;
display: block;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
padding: 2px 1px 0px 1px;
list-style-type: none;
}
#mainContent {
margin: 10px;
padding: 0px;
min-height: 600px; /* IE ignores */
height: auto !important; /* older IE ignores important */
height: 600px; /* older IE treats as min-height / newer IE uses
important tag */
border: 0px none;
clear: both; /* Clear floats */
}
#footer {
margin: 0px;
padding: 10px;
height: 15px;
text-align: center;
border: solid 1px #000000;
clear: both; /* Clear floats */
}
.style1 {
color: #FF0000;
font-weight: bold;
}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body>
<div id="header">
</div>
<div id="mainNavBar">
<div id="mainNavLeft">
<ul>
<li><a href="javascript:alert('To do done!');">Home</a></li>
<li><a href="javascript:alert('To do done!');">Section1</a></li>
<li><a href="javascript:alert('To do done!');">Section2</a></li>
</ul>
</div>
<div id="mainNavRight">
<ul>
<li><a href="javascript:alert('To do done!');">Right Submenu 1</a></li>
<li>|</li>
<li><a href="javascript:alert('To do done!');">Right Submenu 2</a></li>
<li>|</li>
<!-- TemplateBeginEditable name="Optional Right Nav Info" -->
<li><a href="javascript:alert('To do done!');">Right Submenu 3</a></li>
<li>|</li>
<!-- TemplateEndEditable -->
<li><a href="javascript:alert('To do done!');">Right Submenu 4</a></li>
</ul>
</div>
</div>
<div id="mainContent">
<p>This page illustrates two CSS display problems that the design view in
CSS3 Dreamweaver V9 Build 3481 has. This page will display fine in FireFox,
newer IE versions, and fairly close in older IE versions. However, DW does not
display it correctly in the design view.</p>
<p>First, Notice that some of the "<span class="style1">Right
Submenu</span>" items in the floated right nav is displaying below the
defined line. This happens if that region contains template editable regions
and/or ASP tags.</p>
<p>Second, the minimum height of this content section should be 600px as
defined by the #mainContent CSS. (min-height: 600px; height: auto !important;
height: 600px;) It appears that min-height is not working. Because the only way
to have this display a 600px high area is to cut the css down to height:
600px;</p>
<p> </p>
</div>
<div id="footer">Some footer text - which should be a minimum of 600px below
the nav bar because of the min-height and height: auto CSS.</div>
</body>
</html>
G_Monroe Guest
-
RSS Feed Editor in Contribute
Hi everyone, We ( the web developers at my company) want to give simple web editing back to non-web developers hands. We have been considering... -
Script errors in Contribute CS3
I created a site recently that uses code from Particletree for a Lightbox. (http://particletree.com/features/lightbox-gone-wild/) When I browse... -
Contribute 3.11 Errors
I have downloaded the Contribute 3.11 trial to update my Contribute 3. I've installed it on 3 different Macs running OS 10.3 and all 3 installations... -
Help with Contribute 3 errors
I have recently upgraded to Cont 3 from Cont 1 and was working fine until today when I'm getting error after error. 1. Javascript errors: onload... -
how can I get errors to display in a browser?
I have a test script, with deliberate errors. The broswer shows nothing, blank, empty. It used to show errors, now it does not. No idea what... -
lisa3711 #2 Re: CS3 Contribute Editor CSS Display Errors
My understanding was contribute uses IE engine...? We simply stoppped trying to load all the style sheets and only load ones for text editing for Contribute.
lisa3711 Guest
-
G_Monroe #3 Re: CS3 Contribute Editor CSS Display Errors
Another IMHO MAJOR bug in Contribute's (CS3 V4.1) is that it does not
understand font sizes specified as ems so it seems to ignore them in Edit mode.
E.g. the page like the one at the bottom of this posting, will display
correctly in the browser of CS3. But in edit mode, the Header1 styled
paragraph will not be 2x the normal text but just be bolded normal text. NOT
GOOD for a WYSIWYG editor... (FYI - DreamWeaver displays this correctly).
Am I missing something? Any hope that Adobe is working on getting
Contribute's editor to display CSS styles properly or do we have to wait until
CSS4?
Sample page:
<html>
<header>
<style type="text/css">
<!--
body { font-size: 1em; }
.Header1 { font-size: 2em; font-weight: bold; margin: .67em 0; }
-->
</style>
</header>
<body>
<p class="Header1">A Header that should be twice the normal font size</p>
<p>Some normal text</p>
</body>
</html>
G_Monroe Guest
-
RiderAlberta #4 Re: CS3 Contribute Editor CSS Display Errors
I've got a similar problem... (maybe)... where after publishing to the blog site, the formatting is lost.
I'm using 4.1 for Mac.
RiderAlberta Guest
-
ThinkInk #5 Re: CS3 Contribute Editor CSS Display Errors
Maybe you can try using ems and set the font size in de body tag to 62.5%:
<html>
<header>
<style type="text/css">
<!--
body { font-size: 62.5%; }
.Header1 { font-size: 2em; font-weight: bold; margin: .67em 0; }
-->
</style>
</header>
<body>
<p class="Header1">A Header that should be twice the normal font size</p>
<p>Some normal text</p>
</body>
</html>
ThinkInk Guest
Reply With QuoteSimilar Questions and Discussions
Posting Permissions
- You may not post new threads
- You may post replies
- You may not post attachments
- You may not edit your posts
