none
Layout issues between IE and Google Chrome

    Question

  • Good morning everyone,

    I am having issues with a customized SharePoint site rendering differently in IE vs. Chrome/Firefox. The problem in particular is with custom navigation in the master page. There is a div container that is overlapping with the primary navigation. See below:

    I have tried setting the properties of the div to float right, which put it too far to the right in IE and caused it to go off the page. I have also tried setting the div container which contains those two "SITE NAVIGATION" and "PROGRAM RESOURCES" links to absolute positioning; and relative, but relative positioning did nothing and absolute positioning overlapped them in IE but rendered better in Chrome/Firefox.

    Besides the positioning properties of the div container these links are in, I am unsure of how to go about fixing this next and/or if it is even possible.

    Thanks in advance for your assistance.

    Monday, September 09, 2013 1:16 PM

Answers

  • The class name 'megamenu1' is a hint that these are not standard SharePoint style definitions. Look at Heather's chart in the section 'Top Navigation Bar (Global Navigation)' to see the classes that would normally be used to style the top nav area. Is the CSS file you're editing the one referenced at the SharePoint:CSSRegistration tag and containing the classes shown in the master page's menu code? If so, then can you identify which classes might map to SharePoint's menu classes and simply replace the class names in the custom CSS with the proper ones. Since the registered CSS will load after the default, your definitions will override the original ones. It's helpful to become familiar with the standard layout when designing a replacement. There's a pretty good article on MSDN about customizing the menu here:

    http://msdn.microsoft.com/en-us/library/hh528515(v=office.14).aspx

    and another one that goes into some nice detail about styling SharePoint 2010 in general here:

    http://msdn.microsoft.com/en-us/library/hh537937(v=office.14).aspx

    BTW, this all gets much easier in 2013 :-)


    If puzzles are good for your BRAIN then SharePoint will keep it really healthy!


    Ramona Maxwell MCPD SharePoint 2010, MCITP SQL Server 2008

    Tuesday, September 10, 2013 7:33 PM
  • If in IE it looks properly, but is broken in Chrome, most probably it will be also broken in other browsers (IE is still very specific browser). Such issues are much faster to troubleshoot using developer tools available in browsers. E.g. in Chrome dev tools are available by F12 (like in IE and FF). They alloy you to dynamically change css styles without changing the code of masterpage or css. After you will find correct solution by applying css, you will just need to save changes in your css or masterpage.

    Blog - http://sadomovalex.blogspot.com
    Dynamic CAML queries via C# - http://camlex.codeplex.com

    Wednesday, September 11, 2013 11:47 AM

All replies

  • hi

    it is hard to guess without seeing the whole layout, but in general you should use float: left for divs which show items in global navigation. Try to add one more parent div for left items (like VIP Scoreboard) with float: left. May be after that right items, which currently overlap them, will be aligned correctly.


    Blog - http://sadomovalex.blogspot.com
    Dynamic CAML queries via C# - http://camlex.codeplex.com

    Monday, September 09, 2013 2:54 PM
  • Not much of any of the tweaking I did worked.

    This is the closest I have gotten it:

    "Site Navigation" and "Program Resources" is supposed to be side to side, horizontally.

    Such as like it is in IE:

    Tuesday, September 10, 2013 12:41 PM
  • Good Morning, are you overriding the default SharePoint menu styles or creating your own? Generally it works better to have your custom styles override SharePoint's default CSS. You can view Heather Solomon's CSS chart to see which classes control the particular menu to wish to override with your own CSS (which must load after the default CSS for your master page):

    http://sharepointexperience.com/csschart/csschart.html

    You can also test whether the pages render properly in an earlier version of IE (IE 10 in particular sometimes renders SPS2010 pages with surprising results) by pressing F12 and under Browser Mode on the menu bar selecting an earlier version of IE.



    If puzzles are good for your BRAIN then SharePoint will keep it really healthy!


    Ramona Maxwell MCPD SharePoint 2010, MCITP SQL Server 2008

    Tuesday, September 10, 2013 4:52 PM
  • Thank you for the reply, Ramona. This is difficult to answer because I am a SharePoint Administrator, not a Developer. Therefore, this has been quite the challenge.

    I know there is code for these two links in the master page, and div containers are used to position them on the master page.

    This is the code from the master page for this troubled navigation:

    <!-- Beginning of Site Nav Code -->
    <div style="width:auto;width:390px\9;float:right;margin-left:20px;margin-top:20px;margin-top:0px\9">
    	<div>
    		<div id="SiteNav" class="useinIE">
    			<a href="#" id="megaanchor_1" style="" class="mainLink_1 headrightmargin">SITE NAVIGATION</a>
    			<div id="megamenu_1" class="megamenu_1" style="margin-top:9px\9">
    				<table width="100%">
    				<tr>
    				<td valign="middle" width="15%">
    					<table>
    						<tr>
    							<td>
    								<div class="icono">
    									<img src="projects-icon.png"/>
    								</div>
    							</td>
    						</tr>
    					</table>
    				</td>
    				<td width="5%"></td>
    				<td width="70%" valign="top" align="left">
    				
    							<div style="font-family: Calibri, sans-serif; color:#000;float:left">
    								<div class="treeview3"><a href="/sites/hm">HM SITE</a></div>
    								<div class="showhim2">
    									<div id="divGroup">
    									</div>						
    								</div>
    			  				</div>
    			
    				</td>
    				</tr>
    				</table>
    		
    			</div>
    				
    		</div>
    		<!-- End of Site Nav Code -->
    
    		<!-- Begin Program Resources Code -->
    		<div style="float:right;width: 300px;margin-top:-24px;margin-top:-38px\9;">
    			<a href="#" id="megaanchor" class="mainLink headrightmargin" style="">PROGRAM RESOURCES</a>
    			<div id="megamenu1" class="megamenu" style="margin-top:9px\9">
    			<div class="column">
    				<h3 id="h3Communications">Communications</h3>
    				<ul id="ulCommunications">
    					<li><a href="VIP.aspx" id="aCommunicationVIPRequest">VIP Requests</a></li>
    					
    				</ul>
    			</div>
    			
    			<div class="column">
    				<h3 id="h3Tools">Tools</h3>
    				<ul id="ulTools">
    					<li><a href="/sites/Incident%20Tickets" id="aToolsIncidentTickets">Incidents</a></li>
    				
    				</ul>
    			</div>
    			
    			
    			</div>
    		</div><!--End Mega Menu  -->
    	</div><!-- End Menu Section Div -->
    

    Tuesday, September 10, 2013 6:10 PM
  • The class name 'megamenu1' is a hint that these are not standard SharePoint style definitions. Look at Heather's chart in the section 'Top Navigation Bar (Global Navigation)' to see the classes that would normally be used to style the top nav area. Is the CSS file you're editing the one referenced at the SharePoint:CSSRegistration tag and containing the classes shown in the master page's menu code? If so, then can you identify which classes might map to SharePoint's menu classes and simply replace the class names in the custom CSS with the proper ones. Since the registered CSS will load after the default, your definitions will override the original ones. It's helpful to become familiar with the standard layout when designing a replacement. There's a pretty good article on MSDN about customizing the menu here:

    http://msdn.microsoft.com/en-us/library/hh528515(v=office.14).aspx

    and another one that goes into some nice detail about styling SharePoint 2010 in general here:

    http://msdn.microsoft.com/en-us/library/hh537937(v=office.14).aspx

    BTW, this all gets much easier in 2013 :-)


    If puzzles are good for your BRAIN then SharePoint will keep it really healthy!


    Ramona Maxwell MCPD SharePoint 2010, MCITP SQL Server 2008

    Tuesday, September 10, 2013 7:33 PM
  • If in IE it looks properly, but is broken in Chrome, most probably it will be also broken in other browsers (IE is still very specific browser). Such issues are much faster to troubleshoot using developer tools available in browsers. E.g. in Chrome dev tools are available by F12 (like in IE and FF). They alloy you to dynamically change css styles without changing the code of masterpage or css. After you will find correct solution by applying css, you will just need to save changes in your css or masterpage.

    Blog - http://sadomovalex.blogspot.com
    Dynamic CAML queries via C# - http://camlex.codeplex.com

    Wednesday, September 11, 2013 11:47 AM