Background images for anchor tags included as part of CSS via custom Theme do not appear in non-IE browsers


I created a custom theme for SharePoint and in it a custom style sheet. Below I am enlisting the issue I faced with background property of anchor elements and the resolution I found.Some good reference articles for creating custom themes :

http://sharepoint.microsoft.com/blogs/GetThePoint/Lists/Posts/Post.aspx?ID=122

http://www.heathersolomon.com/blog/articles/brandsppart2.aspx

For the purpose of an example , consider this style element (in my case , it references an image from a custom theme ) :

#siteLogo a {

      background: #94b7d7 url('_themes/FB/FBLogo.gif') no-repeat top left;

      width:200px;

      height:60px;

      }

Create a custom master page based on any OOB master page (make a copy of OOB Blueband.master)
- remove the DOCTYPE declaration on top
- Add an anchor tag in Placeholder Main, such as :

<tr>

            <td id="GlobalTitleAreaImage" class="ms-titleimagearea" width="50%" align="left">

            <!-- changed logo for FB Sharepoint Template -->

                  <div id="siteLogo">

                        <a href=http://www.microsoft.com target="_blank"></a>

                  </div>

            </td>

      </tr>

You will notice that when such a custom theme is applied to the site, it will display fine in IE (background images will come up fine), but in non-IE browsers, (I tested in FireFox) , images will not come up.

CAUSE :
The root cause of the issue is that CustomSite.master doesn’t have a <!DOCTYPE tag.
Per the W3 visual formatting model - <
http://www.w3.org/TR/CSS2/visuren.html>
Anchors are inline elements and shouldn’t have an explicit height\width. However, since IE ignores even if the master page has no doctype declaration , IE (without a doctype) displays images while FireFox does not.

SOLUTION :
So, the solution could be to follow either of below approaches :

Approach1 :

Include display and float elements along with anchor style elements. For e.g. I induced below highlighted change in my custom CSS file ,and was able to get the image displayed in FireFox :

#siteLogo a {

      background: #94b7d7 url('_themes/FB/FBLogo.gif') no-repeat top left;

      width:200px;

      height:60px;

      display:block;

      float:left;

      }

Approach2:

Use DocType declaration in custom master page. So far, I tested by adding doctype element in my custom master page (all out-of-the-box masterpages have doctype elements) :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

There is some good information on DOCTYPE tag and SharePoint master pages available at below links:

http://www.heathersolomon.com/blog/archive/2007/02/21/6213.aspx

http://www.sharepointkings.com/2009/10/moss-2007-master-page-doctype-issue.html


Skip to main content