Issues with Display:None when using CSS
I have an issue with the way the CuteSEditor renders when in a div with display:none in a css file, and their support is telling me it is a bug in the way Firefox handles display:none. I have the code:
<%@ Page Language="C#" %>
<%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
<html>
<link rel="stylesheet" type="text/css" href="Test.css" />
<head>
<title>ASP and ASP.NET WYSIWYG Editor - Edit Static Html Example </title>
</head>
<body>
<form id="Form1" runat="server">
<div id="divMain" visible="true" runat="server">
<div style="margin: 0 10px 13px 10px;" >
<input type="hidden" name="pg5$V$CuteEditorTest" value="0" />
<ul style="border-bottom: 1px solid #A4A4A4; margin: 0; font-size: 85%; white-space: nowrap; padding-bottom: 3px;">
<li style="display: inline; border: solid 1px #A4A4A4; border-bottom: none; background: #e1e1e1; visibility: hidden; margin:0; padding: 0;"> </li>
<li style="display: inline; border: solid 1px #A4A4A4; border-bottom: none; border-color: #A4A4A4; background: #ffffff; z-index: 3; position:relative; top: 1px; padding: 4px 4px 3px 4px;">
<a href="#" onclick="tabClick(this,1);preventDefault(event);">First Tab</a>
</li>
<li style="display: inline; border: solid 1px #A4A4A4; border-bottom: none; padding: 2px 4px 3px 4px; background: #e1e1e1; margin: 0 5px 0 0;">
<a href="#" onclick="tabClick(this,2);preventDefault(event);">Second Tab</a>
</li>
</ul>
<div style="display: block;">
<CE:EDITOR id="Editor3" EditorWysiwygModeCss="../example.css" runat="server" Height="200" AutoConfigure="Simple"></CE:EDITOR><br>
</div>
<div class="nodisplay">
<CE:EDITOR id="Editor4" EditorWysiwygModeCss="../example.css" runat="server" Height="250" AutoConfigure="Simple"></CE:EDITOR><br>
</div> </div>
<script type="text/javascript">
function tabClick(o, i) {
var c = removeTextNodes(o.parentNode.parentNode.parentNode.childNodes);
c[0].value = i - 1;
for (x = 2; x < c.length; x++) {
c[x].style.display = x - 1 == i ? 'block' : 'none';
}
c = removeTextNodes(c[1].childNodes);
for (x = 0; x < c.length; x++) {
c[x].className = '';
}
o.parentNode.className = 'selected';
}
function removeTextNodes(nodeList) {
var r = [];
for (i = 0; i < nodeList.length; i++)
if (nodeList[i].nodeType != 3)
r[r.length] = nodeList[i];
return r;
}
function preventDefault(event, value) {
if ((event != null && typeof (event.type) === "string") && (value === false || value == null)) {
if (event.preventDefault) {
event.preventDefault();
}
else if ("returnValue" in event) {
event.returnValue = false;
}
else {
throw new Error("The browser does not support known DOM Level II event cancellation.");
}
}
return value;
}
</script>
</div>
</form>
</body>
</html>
And the css file:
.nodisplay { display: none}
The CuteEditor renders fine on the Selected tab, but when you select the second tab there is no text area. If Instead of using the Style=nodisplay file I put the style="display:none" on the div, the code works. But for my project, I need to have the style stored in a css file.
I have an issue with the way the CuteSEditor renders when in a div with display:none in a css file, and their support is telling me it is a bug in the way Firefox handles display:none. I have the code:
<pre><nowiki><%@ Page Language="C#" %>
<%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
<html>
<link rel="stylesheet" type="text/css" href="Test.css" />
<head>
<title>ASP and ASP.NET WYSIWYG Editor - Edit Static Html Example </title>
</head>
<body>
<form id="Form1" runat="server">
<div id="divMain" visible="true" runat="server">
<div style="margin: 0 10px 13px 10px;" >
<input type="hidden" name="pg5$V$CuteEditorTest" value="0" />
<ul style="border-bottom: 1px solid #A4A4A4; margin: 0; font-size: 85%; white-space: nowrap; padding-bottom: 3px;">
<li style="display: inline; border: solid 1px #A4A4A4; border-bottom: none; background: #e1e1e1; visibility: hidden; margin:0; padding: 0;"> </li>
<li style="display: inline; border: solid 1px #A4A4A4; border-bottom: none; border-color: #A4A4A4; background: #ffffff; z-index: 3; position:relative; top: 1px; padding: 4px 4px 3px 4px;">
<a href="#" onclick="tabClick(this,1);preventDefault(event);">First Tab</a>
</li>
<li style="display: inline; border: solid 1px #A4A4A4; border-bottom: none; padding: 2px 4px 3px 4px; background: #e1e1e1; margin: 0 5px 0 0;">
<a href="#" onclick="tabClick(this,2);preventDefault(event);">Second Tab</a>
</li>
</ul>
<div style="display: block;">
<CE:EDITOR id="Editor3" EditorWysiwygModeCss="../example.css" runat="server" Height="200" AutoConfigure="Simple"></CE:EDITOR><br>
</div>
<div class="nodisplay">
<CE:EDITOR id="Editor4" EditorWysiwygModeCss="../example.css" runat="server" Height="250" AutoConfigure="Simple"></CE:EDITOR><br>
</div> </div>
<script type="text/javascript">
function tabClick(o, i) {
var c = removeTextNodes(o.parentNode.parentNode.parentNode.childNodes);
c[0].value = i - 1;
for (x = 2; x < c.length; x++) {
c[x].style.display = x - 1 == i ? 'block' : 'none';
}
c = removeTextNodes(c[1].childNodes);
for (x = 0; x < c.length; x++) {
c[x].className = '';
}
o.parentNode.className = 'selected';
}
function removeTextNodes(nodeList) {
var r = [];
for (i = 0; i < nodeList.length; i++)
if (nodeList[i].nodeType != 3)
r[r.length] = nodeList[i];
return r;
}
function preventDefault(event, value) {
if ((event != null && typeof (event.type) === "string") && (value === false || value == null)) {
if (event.preventDefault) {
event.preventDefault();
}
else if ("returnValue" in event) {
event.returnValue = false;
}
else {
throw new Error("The browser does not support known DOM Level II event cancellation.");
}
}
return value;
}
</script>
</div>
</form>
</body>
</html>
</nowiki></pre>And the css file:
<pre><nowiki>.nodisplay { display: none}</nowiki></pre>
The CuteEditor renders fine on the Selected tab, but when you select the second tab there is no text area. If Instead of using the Style=nodisplay file I put the style="display:none" on the div, the code works. But for my project, I need to have the style stored in a css file.
Modified by cor-el
All Replies (1)
A good place to ask questions and advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the mozillaZine forum site in order to post at that forum.