This will be a continuing blog post documenting CSS issues with SharePoint 2010. Once I feel that I have captured all of the gotcha’s then I will place these items in a list for so you can search.
Background Images showing in Dialog Boxes
This is a major pain. When I have a background image that I am using on the site, it shows up in the dialog box. This is not new with 2010, this has been an ongoing battle with me and SharePoint.
Here is my current CSS class and a screen shot of the image intruding.
.mywrapper {background: url("bg.gif") repeat-y left top; }
Randy Drisgill created a blog post dealing with Custom Master pages and Dialog Boxes on using the CSS class called s4-notdlg, this is a good workaround when you don’t want large blocks to show – like the left nav area. The .s4-notdlg renders a display none. You wont find this style in the CORE4.css style sheet, this is in the dlgframe.css style sheet.
What to do…
My issue is bigger, its a wrapper that goes around all of the main content area of my site that displays a background image and when I use the .s4-notdlg everything within my wrapper disappears.
Through some digging I found that as long as you use the .ms-dialog in front of a class you can reverse the effects. I found the exact equation that I needed to use and the fix for my problem is to create a class like this:
.ms-dialog .mywrapper { background-image: none;}
When I render my site, and add something to a list, the pesky background image is no longer there. Yay!
For some background issues I think using the .ms-dialog in front of a reversal CSS code block is a good work around.
Thanks for reading, and please let me know if this post has helped.