4

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 :-)

Pete
  • 391
  • 1
  • 8
  • 20
  • 1
    Are you using SharePoint 2010? Older versions generate invalid HTML, and are rendered by browsers in what's known as "quirks mode". This means that, for example, Internet Explorer (regardless of which version you are using) uses IE6's rendering engine, in a special mode which makes it render pages like IE5. This was "by design", as SharePoint's HTML was quite broken and dependant on IE6's engine, and MS didn't fix it until the latest version. – salgiza Nov 24 '10 at 14:54
  • @ salgiza: Thanks for the info. Tell me if I understand what you are saying correctly: My styles would be applied last in the cascade in a normal web-page-rendering situation, but because it's in SharePoint's box, SharePoint get's the final say on what gets sent to the browser for rendering? – Pete Nov 24 '10 at 16:04
  • 1
    Not exactly. Before IE6 implemented a "standards" mode, the CSS engine implemented by Microsoft didn't conform to what the CSS standard said. If you are using SharePoint 2007 or earlier, anything not supported by IE6 (we are talking about the year 2001) won't work in IE. Moreover, you can't be sure that what will work, will be rendered as you expect (as IE6 in quirks mode didn't conform to the CSS standard), so it will be very, very, hard to get CSS that renders identically in IE and the rest (Firefox, Chrome, Safari, Opera...). – salgiza Nov 24 '10 at 17:13
  • @ salgiza: Again, thanks. God willing, my employer will roll out SP 2010 before the year's out. In the meantime, are you saying I might be stuck using images for my menu? – Pete Nov 24 '10 at 17:21
  • You definitely don't have to use images for your menu. You can force standard mode in your master page (or quirks mode if that's what you want). Either way, the HTML generated by SharePoint isn't "broken". There are tons of sites out there that use SharePoint (pre 2010) and that work fine on all browsers (including IE6) – Hugo Migneron Nov 24 '10 at 18:40
  • Hugo - Can you tell me how I would force standard mode? Is there a way to this with out editing the masterpage? – Pete Nov 30 '10 at 17:04

2 Answers2

6

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;
}
Hugo Migneron
  • 4,867
  • 1
  • 32
  • 52
  • 1
    @ Hugo: Thanks for your answer. I see some of what you're referring to... I've been scoping this issue through both Firebug and MS Developer Tools. In Firebug and Dev Tools, I see .ms-WPBody is applying 'font-size:8pt;' even though I'm under the impression my styles should be overriding .ms-WPBody; I've tried it with both an external style sheet called out in the web-part HTML and as with the styles applied internally... Are you aware of a way to force SharePoint to respect my authoritay? – Pete Nov 24 '10 at 16:27
  • @ Hugo: Also, I'm not seeing any styles that would be throwing my borders and such out of whack. – Pete Nov 24 '10 at 16:36
  • @ Hugo Migneron: Got it. Directly addressing '.ms-WPBody' and '.my-content' got the right font-size and color. Unfortunately, the styles addressing the border had no affect. At this point I'm prone to believe the border/height/line-height issue is as salgiza said: the final code generated by my version of SharePoint is too crufty to do what I'm asking of it, namely respect my declaration of 'height:0;' and 'line-height:0;'... So, sounds like I get to make an image map! Yay! Thanks for all your helpful information; it will definitely come in handy in future grievances. – Pete Nov 24 '10 at 21:35
  • @ Hugo: to see a live example, go to http://jsfiddle.net/peteralexisthompson/anUQC/. I can't show you it breaking, though, because it of course works outside of SharePoint... Ugh. – Pete Nov 24 '10 at 21:39
  • I just added !important to all my CSS rules to make them work in a CE web part :P – Navin Israni Jan 06 '15 at 10:58
0

Sharepoint is a CMS software & the dynamically generate their code for pages & similarly they assign a CSS class to the tags. And those classes have some property defined in a style-sheet. In order to override those style use '!important' keyword in your style-sheet. for example

.class{ property:value !important; }

hope this might help you, even if I haven't worked with Sharepoint ever.

Jogendra
  • 111
  • 4
  • 1
    !important hacks don't need to be used to override SharePoint styles. They should be avoided whenever possible. You don't need !important hacks to override styles defined in the CMS stylesheet, you just need to be as, or more specific in your own stylesheet. – Hugo Migneron Nov 24 '10 at 14:29