Hello,
I have a headache trying to figure out how to make Cute Editor's full screen mode work inside of nested div tags. I used FCKeditor before I decided to buy CuteEditor for my project, and I had the same problem with that editor - until I realized that it was overriding the classes - so all I had to do to solve the problem was to add class definitions in addition to ID definitions inside the div declaration.
Below is the code for repeating the problem:
CSS Code:
html, body {
font: normal 12px tahoma, arial, verdana, sans-serif;
margin: 0;
padding: 0;
border: 0 none;
}
.body_menu {
/* image */
}
.body_nomenu {
/* image */
}
div#header {
/* image */
}
div#header_menu {
/* image */
}
div.header {
position:absolute;
width:100%;
height:277px;
left:0px;
top:0px;
}
div#outer { /*surrounds the page*/
position:absolute;
width: 100%;
margin-top: 125px;
margin-bottom: 0px;
padding: 0px;
border: 0 none;
}
div#menu_top {
z-index:120;
position:relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width:680px;
height:18px;
left:0px;
top:0px;
border: 0 none;
}
div#content_area {
position:relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
background:transparent none;
border-bottom: 1px solid black;
width:780px;
padding: 0px;
height: auto;
left:0px;
top:15px;
overflow:auto;
border: 0 none;
}
div#menu_left_container {
width: 180px;
padding: 0px;
margin-top: 0px;
float: left;
color: white;
border: 0 none;
}
div.menu_left_block {
width: 170px;
padding: 5px;
margin-top: 1px;
color: white;
border: 0 none;
}
div#content_right {
width: 570px;
padding: 5px;
margin-top: 0px;
float: right;
border: 0 none;
}
div#footer_top {
background:#e0e0e0 url(/images/footer_top.gif) no-repeat 50% 0;
height:5px;
overflow:hidden;
}
div#footer {
background:#e0e0e0 url(/images/footer.gif) repeat-y 50% 0;
height:auto;
overflow:auto;
}
div#footer_bottom {
background:#e0e0e0 url(/images/footer_bottom.gif) no-repeat 50% 0;
height:3px;
overflow:hidden;
}
div.footer {
position:relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width:100%;
left:0px;
top:50px;
text-align: center;
border: 0 none;
color: white;
}
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//SV" "http://www.w3.org/TR/html4/strict.dtd">
<?php
// include your editor code here
?>
<html>
<head>
<!-- Custom CSS and Libs -->
<link rel="stylesheet" href="http://cutesoft.net/css/abovestylesheet.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>TITLE</TITLE>
</head>
<body class="body_menu">
<div id="header_menu" class="header"> </div>
<div id="outer">
<div id="menu_top" class="menustyle">MENU</div>
<div id="content_area">
<div id="menu_left_container">
<div class="menu_left_block">Menu1</div>
<div class="menu_left_block">Menu2</div>
<div class="menu_left_block">Menu3</div>
</div>
<div id="content_right">
CONTENT
Editor:<br /><br />
<?php
$editor->Draw();
$editor=null;
?>
</div>
</div>
<div id="footer_top" class="footer"> </div>
<div id="footer" class="footer">FOOTER</div>
<div id="footer_bottom" class="footer"> </div>
</div>
</body>
</html>
Any help in finding the solution would be appreciated!
Thanks for your support!
//Aron