Why is SharePoint dispalying my HTML and CSS content improperly?
I am trying to add content to a SharePoint content editor web part, but when I do, it displays as if it's ignoring parts of my CSS.
It displays fine in Firefox 3.6 and IE 8 when it's a stand-alone page, but goes all off when the same code is placed in the Content Editor web part: Click here to view
Often, things that are broken in SharePoint when viewed through IE will appear correctly when the same SharePoint page is viewed in FF; this time the menu was laid out correctly, but the text was the wrong color (should be white).
When I examine the code using IE's Developer Tools, Sharepoint appears to be ignoring #CAPMenu li's declaration of height:0;. If I disable height:0; when viewing the code outside of SharePoint or in SharePoint with Firefox, the menu falls apart a little. When I view the page in SharePoint through IE, the menu is already hosed and disabling height:0; makes no change...
Please help! This is not the first design SharePoint has kept me from using.
Edit on 20101130: I found an article (http://friendlybit.com/html/default-html-in-sharepoint-2007/) about the state of the code SharePoint 2007 publishes from its masterpage and the article starts with what I think is mashing my code...
Things start out really bad, without a doctype on the first line:
<HTML xmlns:o="urn:schemas-microsoft-com:office:office"dir="ltr" __expr-val-dir="ltr">'
This mean that all default pages will render in quirks mode, making rendering unreliable across browsers.
Edit on 20120921: We've since moved to 2010, and while better, SP will still butcher my code in its attempt to fix it. I eventually figured out I could link a CEWP to an HTML file saved to a site library and have the code in the file load in the web part. Because SharePoint can't edit the file, my code comes through clean and pristine :-)
Answer
It can be a bit tricky to get your CSS to apply properly in any SharePoint web part, especially content editor web parts.
The main reason for that is that SharePoint generates a bunch of tables and sticks your web part inside that table.
SharePoint adds the following HTML structure too all web part zones :
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td valign="top" id="MSOZoneCell_WebPartWPQ3">
<!--Your web part HTML starts here in most cases-->
It also applies a lot of CSS rules on that table and on the elements it contains. All the CSS rules for SharePoint are defined in the core.css file (which you can find in the 12 hive). While I don't recommend that you modify that file, you can analyse that rules from it that affect your code.
You will need to override some rules like .ms-WPHeader .ms-WPBody (for your web part header and body) in order to get your styles to apply.
The best way to find what styles are affecting your code is to use Firebug in firefox. Once you understand exactly why your code is broken (through firefox) you will most likely fix your page in all browsers at the same time (except for small things). Don't worry about cross browser compatibility at first, just worry about understanding the rules that come from core.css.
While it is true that !important hacks can make your code work faster, your CSS sheet will become unmaintainable in no time if you go down that road.
EDIT To make sure that your rule overrides .ms-WPBody (for the font-size for example) you can be more specific than SharePoint is. That is, say you have content inside a a web part :
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td valign="top" id="MSOZoneCell_WebPartWPQ3">
<div class="my-content">Your content</div>
</td>
</tr>
</tbody>
</table>
Then create a css rule like this one :
.ms-WPBody .my-content
{
font-size : 12pt;
/*Other rules you want to override*/
}
This will be more specific than what SharePoint is applying, and therefore your stylesheet will win.
As for your border question, it's really hard to know what rule is failing without seeing a live example or code.
However, you can try with these rules and see if they do anything for you. Use !important hacks if you need to find out which rule is the problem. The override it properly and remove the !important : This is assuming that you don't want any border...
.ms-WPBorder, .ms-WPBorderBorderOnly
{
border: none !important;
}
.ms-PostTitle td
{
border: none !important;
}
td.ms-PostTitle
{
border: none !important;
}