Problem editing "editable" areas in theme
Permalink
I have a problem on one of my c5 sites, where the content blocks are displaying themselves as being "editable", but when you click on them, the command menu doesn't appear. I've found other discussions here on this topic, but no solution so far.
The content areas are enclosed in <div> tags, which point to class definitions in the header (no external css on this one). Moving the content areas outside the <div> tags corrected the problem with editing, but then you have a fouled-up page layout.
I also found the article on keeping "greedy" template styles from interfering with concrete5, and tried the solution provided there, but that did not fix this problem.
An example of a <div> tag the page uses is:
<div class="Object49">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" valign="top"><?php $cc = new Area('Main'); $cc->display($c); ?>
</td>
</tr>
</tbody>
</table>
</div>
"Object 49" is defined in the header like this:
div.Object49 { position:absolute; top:79px; left:170px; z-index:11; }
div.Object49 table { width: 400px; height:518px }
(PS: I didn't write this originally, I'm just migrating an existing site to concrete5.)
I'm still very new to concrete5 (although LOVING it immensely!)... what could be in those div tags that is fouling up concrete5?
I hope someone can toss me some ideas on this. I've been searching documentation, forum posts, language references, moving things around, and generally beating my head against the wall all day on this.
Thanks!
The content areas are enclosed in <div> tags, which point to class definitions in the header (no external css on this one). Moving the content areas outside the <div> tags corrected the problem with editing, but then you have a fouled-up page layout.
I also found the article on keeping "greedy" template styles from interfering with concrete5, and tried the solution provided there, but that did not fix this problem.
An example of a <div> tag the page uses is:
<div class="Object49">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" valign="top"><?php $cc = new Area('Main'); $cc->display($c); ?>
</td>
</tr>
</tbody>
</table>
</div>
"Object 49" is defined in the header like this:
div.Object49 { position:absolute; top:79px; left:170px; z-index:11; }
div.Object49 table { width: 400px; height:518px }
(PS: I didn't write this originally, I'm just migrating an existing site to concrete5.)
I'm still very new to concrete5 (although LOVING it immensely!)... what could be in those div tags that is fouling up concrete5?
I hope someone can toss me some ideas on this. I've been searching documentation, forum posts, language references, moving things around, and generally beating my head against the wall all day on this.
Thanks!
...or do I need to take this topic elsewhere?
I also tried changing the classes to use id's instead of class names, and limiting the scope of the style to just one page element.
That seems to work in the default c5 themes, but even this is not working on mine.
I'm still staring at it to find what I need to do differently, but even the tiniest bit of insight or idea of something else to try would be greatly appreciated.
That seems to work in the default c5 themes, but even this is not working on mine.
I'm still staring at it to find what I need to do differently, but even the tiniest bit of insight or idea of something else to try would be greatly appreciated.
Currently 5/22/09 any area has to be in an element that has a z-index of 0 to be able to register the click to bring up the edit dialog.
If you have elements that are layered for whatever reason and the layout of your site is dependent on this, it is best to do a css include like:
inside your css style tags to move stuff out of the way when in edit mode...again only if your layout is dependent on this.
If you have elements that are layered for whatever reason and the layout of your site is dependent on this, it is best to do a css include like:
<?php if ($c->isEditMode()) { ?>#header{z-index:0; margin-top:-300px;} <?php } ?>
inside your css style tags to move stuff out of the way when in edit mode...again only if your layout is dependent on this.
Many thanks to scottc for these two suggestions:
- If the class definition for the div contains a z-index, that value needs to be 0 (zero).
- Try hiding some elements by setting the top margin to -200px when the element is in edit mode.
In this case, just setting the z-index to 0 fixed my problem.
Hope this helps someone else who runs into this problem.
THANKS AGAIN, SCOTTC.
- If the class definition for the div contains a z-index, that value needs to be 0 (zero).
- Try hiding some elements by setting the top margin to -200px when the element is in edit mode.
In this case, just setting the z-index to 0 fixed my problem.
Hope this helps someone else who runs into this problem.
THANKS AGAIN, SCOTTC.
Setting the z-index to 0 only worked for one content area. When I set the z-index of all the other div classes to 0, editing was still not possible on them.
Since these elements are not layered (not even sure why z-indexes were set on these in the first place), I just removed the z-index attributes entirely. Now all the content areas are fully functioning.
Since these elements are not layered (not even sure why z-indexes were set on these in the first place), I just removed the z-index attributes entirely. Now all the content areas are fully functioning.
I have experienced the same once and indeed, it's the z-index property.
Make sure all z-indexes you set are below 10 and everything should work fine.
Make sure all z-indexes you set are below 10 and everything should work fine.
I had the same problem with an editable area and after changing div's z-index to 0 (values less than 10 also worked). It was all good on Firefox but Google Chrome still wouldn't get into editing.
I haven't tried if the z-index fix would work in Opera or Safari - any insight much appreciated.
I haven't tried if the z-index fix would work in Opera or Safari - any insight much appreciated.
editing is still broken.
I took out the rule in the style sheet that now says:
#page div.Object49 { position:absolute; top:79px; left:170px; z-index:11; }
Refreshed, and hey, it works now! I can edit what is inside the <div class="Object49"></div> tags. So apparently the problem has something to do with my use of absolute positioning. But now I'm back to having a trashed layout.
Maybe I can just go back to using tables to layout my pages. *sigh*