Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy is SharePoint dispalying my HTML and CSS content improperly?
    primarykey
    data
    text
    <p>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.</p> <p>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: <a href="http://lh3.ggpht.com/_1lstp_CvQTA/TOw6NMS-N8I/AAAAAAAACPg/jkczXGOVYes/HosedInSharePoint.jpg" rel="nofollow">Click here to view</a></p> <p>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).</p> <p>When I examine the code using IE's Developer Tools, Sharepoint appears to be ignoring <code>#CAPMenu li</code>'s declaration of <code>height:0;</code>. If I disable <code>height:0;</code> 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 <code>height:0;</code> makes no change...</p> <p>Please help! This is not the first design SharePoint has kept me from using.</p> <p>Edit on 20101130: I found an article (<a href="http://friendlybit.com/html/default-html-in-sharepoint-2007/" rel="nofollow">http://friendlybit.com/html/default-html-in-sharepoint-2007/</a>) about the state of the code SharePoint 2007 publishes from its masterpage and the article starts with what I think is mashing my code...</p> <blockquote> <p>Things start out really bad, without a doctype on the first line:<br> <code>&lt;HTML xmlns:o="urn:schemas-microsoft-com:office:office"</code> dir="ltr" __expr-val-dir="ltr">'<br> This mean that all default pages will render in quirks mode, making rendering unreliable across browsers.</p> </blockquote> <p>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 :-)</p>
    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. COAre 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.
      singulars
    2. CO@ 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?
      singulars
    3. CONot 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...).
      singulars
 

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