Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>It can be a bit tricky to get your CSS to apply properly in any SharePoint web part, especially content editor web parts.</p> <p>The main reason for that is that SharePoint generates a bunch of tables and sticks your web part inside that table.</p> <p>SharePoint adds the following HTML structure too all web part zones : </p> <pre><code>&lt;table cellspacing="0" cellpadding="0" border="0" width="100%"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td valign="top" id="MSOZoneCell_WebPartWPQ3"&gt; &lt;!--Your web part HTML starts here in most cases--&gt; </code></pre> <p>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.</p> <p>You will need to override some rules like <code>.ms-WPHeader</code> <code>.ms-WPBody</code> (for your web part header and body) in order to get your styles to apply.</p> <p>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.</p> <p>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.</p> <p><strong>EDIT</strong> 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 : </p> <pre><code>&lt;table cellspacing="0" cellpadding="0" border="0" width="100%"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td valign="top" id="MSOZoneCell_WebPartWPQ3"&gt; &lt;div class="my-content"&gt;Your content&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>Then create a css rule like this one : </p> <pre><code>.ms-WPBody .my-content { font-size : 12pt; /*Other rules you want to override*/ } </code></pre> <p>This will be more specific than what SharePoint is applying, and therefore your stylesheet will win.</p> <p>As for your border question, it's really hard to know what rule is failing without seeing a live example or code.</p> <p>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...</p> <pre><code>.ms-WPBorder, .ms-WPBorderBorderOnly { border: none !important; } .ms-PostTitle td { border: none !important; } td.ms-PostTitle { border: none !important; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload