Edit Area not in sync

Permalink
Hi Everyone,

Any ideas on this?

When I go into edit mode for example the "Add to Main" is available, but it isn't shaded out and is un-clickable, but a few pixels below it (about 7-10px) there is a shaded area just sitting there all by it's lonesome, which if I click on it, I'm able to edit the area.

This goes for the content in same area as well, the shaded part is off by the same distance as the Add to Main clickable area.

This is for every block created on the page, not just the Main.

 
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
Can you take a screenshot and post it up?

Could be overlapping of the block areas...
grfirst replied on at Permalink Reply 2 Attachments
I've attached 2 png files, been poking around a little, and I think it's in the ccm.css files, but i've never jacked with those before.

Out of about 9 sites, this is 1st time I've seen this.
JohntheFish replied on at Permalink Reply
JohntheFish
It looks like your theme not inserting the shim when the edit bar is showing.
citytech2 replied on at Permalink Reply
citytech2
Have this problem occurs from the very beginning of the installation? Or have you just install any add-on recently? I think it is the problem of css. If you recently install any add-on, then uninstall it, clear the cache & check whether the problem persists.

Citytech
grfirst replied on at Permalink Reply
Yea, i'm thinking it's css as well. I haven't installed any addons yet, this is a fresh install.

I initially installed on WAMP when this error occurred, but I then re-installed on remote server and same issue.

One issue I corrected was the header was overlapping part of the Dashboard's dropdown menu. This seems to be corrected by removing "z-index: 500;" from the #header in my style css.

But the misplaced shaded area still exists, talk about a brain teaser.
grfirst replied on at Permalink Reply
Still checking to see if anyone has any other ideas on how I can pinpoint this discrepancy.

I'm now unable to add blocks to a layout I created, because the shaded add area falls upon the main Add area, making it unclickable :(.

Appreciate everyone's assistance so far, but I still haven't found a resolution.
JohntheFish replied on at Permalink Reply
JohntheFish
Temporarily swap back to a default theme. Plain or Greek Yogurt. See if you still have the glitch.
grfirst replied on at Permalink Reply
Did that John, all went back to normal, switched back to current issue theme, and problem was there again.

I figured out a way to work with my layout, I just create the layout, move it to the top, then I'm able to access it.

Tedious, but it works, would hate to pass this off to a client though.
JohntheFish replied on at Permalink Reply
JohntheFish
That confirms the issue is with your theme. Have a look at the header code in the default theme, the part about checking permissions and spacing. Compare it to the corresponding code in your own theme's header.

I suspect that it is either missing or corrupted (typo?).
grfirst replied on at Permalink Reply
Just compared the headers, even went as far as replacing my theme's header with green yogurt's header (changing css links of course), and no change. Edit areas still off.
JohntheFish replied on at Permalink Reply
JohntheFish
A couple of things come to mind:

- Try the same with the footers.

- Check the css to make sure rules associated with offsetting content when the dashboard toolbar is showning or in edit mode to make sure the relevant rules are present and are not being dominated by anything that undoes the offset.
grfirst replied on at Permalink Reply
Well now John, I believe we're going in right direction now. I just removed the entire style.css file, and of course all my sytling and background graphics disappeared, but the editable areas are all in place as should be.

Hard part is there's about 2100 lines in this css to cypher through and troubleshoot, but I'm pretty sure now this is where the problem is :).
JohntheFish replied on at Permalink Best Answer Reply
JohntheFish
If you use the developer console to inspect the elements, it will tell you which sheet and line the governing rules are coming from.

Combine that with adding or removing your style sheet and that should enable you to deduce the rule and line number.
grfirst replied on at Permalink Reply
Found it and here's the code
html { background: #f8fafb }
body {
   position: relative;
   height: 100%;
   color: #525a61;
   font: normal 12px/1.7em verdana;
   text-align: left;
}


Removed the relative positioning and it all lines up properly now. I just did it the old fashion way, removing chunks of css style until I narrowed it down.

Thanks for all your help, will mark as best answer.