Direct edit mode moves page elements around

If your HTML/XHTML code is sufficiently complex, or you have a lot of elements on the page, direct edit mode can break your page layout.

This can usually be fixed with CSS.

One solution is to place any elements that are getting moved around inside their own DIV tags, to contain whatever changes the opencms inline styles are making to the elements.

Another solution is to override some of the opencms inline styles in CSS, using the "!important" attribute.

For example, you could add the following to your CSS:

.ocms_de_bt {
	padding: 0 !important;
	border: 0 !important;
	margin: 0 !important;
	width: auto !important;
}
.ocms_de_bt table, .ocms_de_bt td, .ocms_de_bt tr  {
	width: auto !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
.ocms_de_norm {
	width: auto !important;
}
.ocms_de_over {
	width: auto !important;
}