Pièces Web se chevauchant de manière indésirable

Question

sur notre environnement SharePoint 2010 Enterprise, chaque page a un comportement étrange avec les zones de partie Web. En mode édition, il ressemble essentiellement à ceci:

En mode non-édition, il ressemble même aux colonnes de la bibliothèque de texte et de documentation se cachent sous les zones de partie Web adjacentes. Que se passe-t-il dans le monde ici?

Nous avons essayé les suggestions sur Ce blog pour ajouter des marges CSS et un remplissage de CSS à la classe "MS-SPZONE", mais cela n'a aucun effet si une partie Web comporte plusieurs colonnes dans une vue de liste (chevauchement toujours).

Edit: Notez qu'il s'agit d'un modèle de page en fonction d'une mise en page de page personnalisée, et que la mise en page de la page utilise également certaines CSS personnalisées, toutes faites par une tierce partie, qui est probablement pourquoi ce problème se produit en premier lieu ( Je suppose que les mises en page de page par défaut SP ne se chevauchent pas de zones comme la nôtre!)

Edit: Voici ce que je pense être le CSS personnalisé pertinent pour la mise en page de page (mode non-édition)

.col-50
{
    float: left;
    width: 49.9%;
}
.col-fluid-1
{

    float: none;
    width: 100%;    
    margin-right:auto;
}
.col-fluid-2
{
    zoom: 1;
    margin-right: 215px;
}
.right-wp-zone-col
{

    float: right;
    width: 200px;
    border-left: 0 solid transparent;
}
.edit-mode-border
{
    border:transparent 1px solid;
    padding:8px;
    margin:1px;
}

Answer 1

You need to make divs to be rendered as tables in edit mode:

<div class="container convertTable">
<div class="row convertTable">
<div class="col-md-6 convertTable">

</div>
<div class="col-md-6 convertTable">

</div>
</div>
<div class="row convertTable">
<div class="col-md-12 convertTable">

</div>
</div>
</div>

here is jquery code:

<!--MS:<Publishing:EditModePanel runat="server">-->
            <script type="text/javascript">//<![CDATA[
jQuery( document ).ready(function() {
var pageEditTableClass="pageEdit-table", pageEditFullWidthClass="pageEdit-fullWidth";

jQuery("table div.container.convertTable").removeClass("container").addClass(pageEditTableClass).addClass(pageEditFullWidthClass);
jQuery("table div.row.convertTable").removeClass("row").addClass(pageEditTableClass).addClass(pageEditFullWidthClass);
jQuery("table div.col-md-12.convertTable").removeClass("col-md-12");
jQuery("table div.col-md-3.convertTable").removeClass("col-md-3").addClass("tableCol-3");
jQuery("table div.col-md-4.convertTable").removeClass("col-md-4").addClass("tableCol-4");
jQuery("table div.col-md-5.convertTable").removeClass("col-md-5").addClass("tableCol-5");
jQuery("table div.col-md-6.convertTable").removeClass("col-md-6").addClass("tableCol-6");
jQuery("table div.col-md-7.convertTable").removeClass("col-md-7").addClass("tableCol-7");

jQuery("table div.col-md-9.convertTable").removeClass("col-md-9").addClass("tableCol-9");
});
//]]>
</script>
<!--ME:</Publishing:EditModePanel>-->

put the script in EditeModePanel to make script work only in Edit Mode

css:

.cell-margin {
    margin: 5px 0px 5px 0px;
}

.tableCol-3 {
    display: table-cell;
    min-width: 24.9%;
}
.tableCol-4 {
    display: table-cell;
    min-width: 33.3%;
}
.tableCol-5 {
    display: table-cell;
    min-width: 41.6%;
}
.tableCol-6 {
    display: table-cell;
    min-width: 49.9%;
}
.tableCol-7 {
    display: table-cell;
    min-width: 58.3%;
}
.tableCol-9 {
    display: table-cell;
    min-width: 74.9%;
}

Answer 2

Open the site in IE or Chrome and use the developer tools (press F12 in either one). You can use the "select element by click" (ie) or "select an element in the page" (Chrome) to visually select the items and see dynamically what CSS is being applied. It will also show what file(s) those CSS rules come from. As was stated previously, I bet there is some custom CSS getting loaded somewhere.

With the developer tools, you can even tinker with the CSS live to identify exactly which changes need to be applied.

Answer 3

DIVS and TABLES do not tend to play nicely together so if you have laid out your zones using DIVs SharePoint will render the web parts as TABLES.

I know the general preference is to avoid tables where possible but try putting your zones in a TABLE and I am pretty sure it will resolve the problem.

Answer 4

from my understanding there are two places that could turn out this kind of result! one is the css as others have noted and the other is the page layouts! the page layouts is what holds the body content! it could be changed or the css could have been changed!

The site in question, has it been modified or not? im talking about page layouts or css (custom)? or is this result from ootb version?

if you dont know you need to change the reference for the page layouts in the masterpage, for css you could change it within the site collection where you change the masterpage!

when i hit that issue along time ago it was partly due to the layouts page rather than the css as i put in some direct css on some html tags lol, it was due to the css tag position that efected other layout positions for all webparts!

you could also get that effect when ammending the layouts within sharepoint designer desing view aswell! changing the layouts reference to the default layouts.aspx would be the first thing that i did to see direct changes :).