I have created a simple page from which I want to create a Master Page using Design Manager. The HTML page is:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="MyCss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="ContainerBorder">
<div class="MainContainer">
<div class="Header">
Header
</div>
<div class="TopNavigation">
Top navigation
</div>
<div class="MainContentArea" style="background-color:yellow">
Main Content Area
</div>
<div class="Footer">
Footer
</div>
</div>
</div>
</body>
</html>
And MyCss.css is:
body {
width:1024px;
margin:0px auto;
font-family:13px/20px Calibri,Tahoma,sans-serif;
}
.ContainerBorder {
width:100%;
background-color:#EEEEEE;
}
.MainContainer {
width:992px;
margin:0px auto;
background-color:white;
}
.Header {
width:100%;
}
.TopNavigation {
width:100%;
}
.MainContentArea {
width:100%;
}
.Footer {
width:100%;
border-top:1px solid #888888;
}
If you render this page in a browser, you'll see the results I want to achieve. The body sits in the middle of the browser window with a 16px grey vertical border either side of the main container.
I then created the SharePoint Master Page from these files by first uploading the files to the Master Page Catalogue and then in Design Manager > Edit Master Pages > Convert an HTML file to a SharePoint Master Page.
The resultant SharePoint Master Page does not render correctly. Looking in the DOM Explorer in IE11, the div with id ms-designer-ribbon does adopt the body css in MyCss.css but the next div, id s4-workspace does not and the rendering is wrong from that point on.
What am I doing wrong?
Your help would be much appreciated.
Thanking you in anticipation.
Roger
rogerwithnell