Heather Solomon's Blog

SharePoint 2007 Branding

Article Categories
Post Categories


  Jump to: Follow speheather on Twitter Follow Heather Solomon on Facebook
Heather's SharePoint 2010 Blog is located at blog.sharepointexperience.com
Loading
In SharePoint 2007, you may run into display issues with the form fields for Search Center. I am not referring to the Search inputs usually located in the header area, but the actual Search Center site (http://site.com/SearchCenter) and the search area located near the top of the page under the horizontal navigation:



If you apply a custom master page file and don't mirror the exact formatting that comes default with SharePoint, you are likely to run into display issues with your Search link:


As you can see, the word "Search" has been chopped.  This is because there are hard coded widths in the code that renders as a part of this page.  You will also notice that there is a chunky padding to the top and left of the search area.

<div style="height:100%; width:100%;padding-left: 18px; padding-top: 50px; padding-bottom: 10px;">
    <center>
        <div style="WIDTH: 390px" >
        .....
                <td valign="top">
                        <div WebPartID="92a6483d-031f-4d6b-8481-ec03fc9ec614" HasPers="false" id="WebPartWPQ1" allowDelete="false" style="width:420px;" >
                                <div id="SRSB">
                                        <div id="ctl00_m_g_92a6483d_031f_4d6b_8481_ec03fc9ec614" style="width:420px;">

Since these are hardcoded, the only option you have for changing it is to create a new Feature or your own User Control for Search and use that instead of what is provided by default for SharePoint.

So my workaround for this issue is to add a blank image in the container where this code is located (usually in the master page). Set the width of the blank image to something long enough to push out that set width at the DIV level and fully display your Search text.  This does not address the padding issue, and at this point I don't have a solution for that. For the chopped text issue, your code would look like:

<tr>
    <td valign="top" class="ms-titlearea"><!-- Spacer image here to correct Search Center Fixed width issue --><img src="/_layouts/images/blank.gif" width="700" height="1"><br />
        <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
            <asp:SiteMapPath SiteMapProvider="SPContentMapProvider" id="ContentMap" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional" runat="server"/> &nbsp;
        </asp:ContentPlaceHolder>
    </td>
</tr>

Resulting in:

posted on Tuesday, January 30, 2007 11:22 AM

Copyright © 2005-2011. Heather Solomon.
Site design by Heather Solomon. Yes it is dated and purple. If I changed it, no one would recognize it! Check out my new home at sharepointexperience.com.

Blog Stats:
Posts - 390
Stories - 39
Comments - 1795
Trackbacks - 183
Follow speheather on Twitter

Follow Heather Solomon on Facebook

Branding/UI/UX Courses for SharePoint taught by Heather Solomon

VIEW COURSE SCHEDULE