SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have used a starter masterpage from Randy Drisgill and added my header area that includes the SiteLogoImage control area as well. I did use the "s4-notdlg" almost on every div. The problem that i am seeing is that system dialogs still show up behind and additionally the Site Action div shows up behind the Site Logo image only in IE but works ok in Chrome/FF. Has anyone experienced this issue? Code:

<div id="header-wrapper">
   <div id="header">        
      <div class="headerlogo s4-notdlg">
           <SharePoint:SPLinkButton ID="SPLinkButton1" runat="server" NavigateUrl="~sitecollection/">
               <SharePoint:SiteLogoImage ID="SiteLogoImage1" CssClass="s4-notdlg" LogoImageUrl="/Style Library/sitename/logo.png" runat="server"/>
share|improve this question
up vote 1 down vote accepted

This sounds like two separate issues to me. Firstly, the s4-notdlg class should be applied to the parent elements/containers for the objects, not the individual object(s). You would want to hide the entire header row, not the logo tag itself. SharePoint will hide the top-most instance(s) in the DOM that have the s4-notdlg class, so putting it on each individual object is a waste (and possibly confusing to the JavaScript that processes it). Given the structure you posted, I'd put s4-notdlg on the header div, and nowhere else.

As for your alignment issues, you're probably seeing a byproduct of the different rendering methods between IE and standards compliant browsers. Remember that every browser renders things a little bit differently, and IE is always the difficult one since it often chooses to ignore standards (IE9 is a little better than previous versions, but SharePoint supports 7, 8, and 9, so whatever markup you create should also be compatible with all three versions). If you've defined floats or alignment on one element and not the elements next to or after it, FF/Chrome/Safari will often auto-correct those errors, but IE will not.

share|improve this answer
Thank you for reply. I did go overboard with s4-notdlg but was not sure how SP processes that b/c it happens dynamically. I will correct that. However, the issue with z-index varying between browsers, that happens on a SP default control for Site Logo. I wonder if anyone else experienced it. – Roman Mar 19 '12 at 17:07
Unless you've defined z-index, it won't be a z-index issue. The vast majority of OOTB SharePoint markup will use floats to position elements to the left or right. As an example, the left panel has a left float, requiring the content area to have a left margin equal to the width of the left panel, so they appear side by side. If the left margin wasn't there, it's sit on top of the left panel, creating the illusion of a z-index error, but in actually it's a float error. – webdes03 Mar 19 '12 at 19:09
I did locate the issues. It was an explicit z-index set to 2000. I am somehow missed the propagation. – Roman Mar 27 '12 at 0:49

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.