I am having a problem with my new skin that I cannot overcome - my body styles are appearing in the FCK Editor.
I encountered this when I first started using DNN, and curbed the problem with a simple table fix. I would simply put in a table with a width and height property of 100% (for both), and style it as I would the body, and then place my layout within that table.
I am now designing in XHTML Div layouts, and cannot overcome the problem.
In my skin.css file, i have set the the following styles to the "body" class:
body {
margin: 0px;
padding: 0px;
height: 100%;
background-image: url('images/bodybg.jpg');
background-position: center top;
background-repeat: no-repeat;
background-color: #015bb1;
}
When I have the Admin Skin (4.9.1) or Edit Skin (5.0.0) set to my skin, if I click "Edit Text" on a Text/HTML module, the body styles display in the editing area of the FCK editor! I checked out the DOM Selection source, and found that the FCK Editor has its own "body" like so (in file: fckeditor.htm):
<body>
<table style="height: 100%; table-layout: fixed;" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr id="xToolbarRow" style="">
<td id="xToolbarSpace" style="overflow: hidden;">etc, etc, etc...
I have tried to overcome this in a similar way as I used to with tables, by placing an out in my skin, like so:
<div class="skinbody">
<div class="skinwidth">
</div>
</div>
And then setting my CSS like so:
body {
margin: 0px;
padding: 0px;
height: 100%;
}
html {
height: 100%;
}
.skinbody {
width: 100%;
height: 100%;
margin: 0px auto;
background-image: url('images/bodybg.jpg');
background-position: center top;
background-repeat: no-repeat;
background-color: #015bb1;
}
.skinwidth {
width: 960px;
margin: 0px auto 0px auto;
background-color: #fff;
}
BUT, the 100% height here is only read by browsers as 100% of the browser window height.
I've even tried overwriting the Class/ID of the editing area in my skin.css file with: (the class can be originally seen in /Providers/HtmlEditorProviders/Fck/FCKeditor/editor/skins/Office2003/fck_editor.css)
#xEditingArea {
background-color: #fff;
}
.xEditingArea {
background-color: #fff;
}
But this does nothing. It seems the body is definitely the problem. I checked out if the same happens in the default MinimalExtropy Skin, and it does. This "error" also appears in the "body" of the fckimagegallery dialogue, the image preview in the fck image properties dialogue, etc.
I think this is one for the DotNetNuke Skinning Team. How do I curb this..? Please help. I can send you my skin files if need be...
Thanks
Jon