[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 309
  • Last Modified:

ASP .NET Menu control shifting 1 pixel to the right when button clicked

I have a problem. I am using the menu control on a webpage that uses masterpages. When I click on 'link1' it brings up a contentplaceholder that has a Button control on it. When I click the Button Control the menu control shifts to the right 1 pixel.  Then if I click the menu the menu control will shift back to the left 1 pixel. Any ideas what is causing this?

I have uploaded the project to http://www.bertino.net/downloads

Any help would be appreciated. Thanks!
0
bertino12
Asked:
bertino12
  • 5
  • 5
1 Solution
 
DropZoneCommented:
Could it be that a css border is being drawn when the button is clicked?  Is this a Button control with an Image?

   -dZ.
0
 
bertino12Author Commented:
Nope this button control is just the standard one. No css border is being drawn.
0
 
DropZoneCommented:
Could you post the offending part of the HTML rendered?  I'd like to investigate what is causing it.

   -dZ.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
bertino12Author Commented:
Sure this is my masterpage:

<%@ Master Language="VB" AutoEventWireup="false" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>TEST</title>
</head>
<body>
    <form id="form1" runat="server">
        <center>
            <table style="width: 100%; vertical-align: top" border="0">
                <tr>
                    <td align="left">
                       
                        <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"
                            DynamicVerticalOffset="2" Height="20" style="position:fixed"
                            StaticEnableDefaultPopOutImage="false"
                            StaticItemFormatString="&amp;nbsp &amp;nbsp {0}">
                           
                            <StaticMenuStyle BorderStyle="None" BackColor="Gainsboro" />
                       
                            <StaticMenuItemStyle Font-Names="Times New Roman" ForeColor="Black"
                                BorderColor="Gainsboro" BorderStyle="Solid" BorderWidth="1px"
                                Font-Size="10pt" />
                           
                            <DynamicMenuStyle BorderStyle="Outset" BorderWidth="1px"
                                BorderColor="Gray" BackColor="Gainsboro" />
                           
                            <DynamicMenuItemStyle Font-Names="Times New Roman" Font-Size="8pt"
                                BorderStyle="Solid" BorderWidth="1px" BorderColor="Gainsboro" />
                           
                            <StaticHoverStyle BackColor="Ivory" BorderStyle="Solid" BorderWidth="1px"
                                BorderColor="Gainsboro" />
                           
                            <DynamicHoverStyle BackColor="Ivory" BorderStyle="Solid" BorderWidth="1px"
                                BorderColor="Gainsboro" />
                           
                            <DynamicItemTemplate>
                                &nbsp;&nbsp;
                                <asp:Label ID="Label2" runat="server" Font-Names="Tahoma"
                                    ForeColor="Black" Text='<%# Eval( "Text" ) %>'>
                                </asp:Label>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                            </DynamicItemTemplate>
                       
                            <Items>
                                <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" Value="Home" />
                                <asp:MenuItem NavigateUrl="~/test1.aspx" Text="test1" Value="test1">
                                </asp:MenuItem>                    
                            </Items>
                        </asp:Menu>

                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                        </asp:ContentPlaceHolder>
                    </td>    
                </tr>
            </table>

        </center>
    </form>
</body>
</html>


This is my content page with the button:

<%@ Page Language="vb" AutoEventWireup="false" CodeFile="test1.aspx.vb" Inherits="test1" masterpagefile="~/MasterPage.master" smartnavigation="True"%>

<asp:content id="Content1" contentplaceholderid="ContentPlaceHolder1" runat="server">
 
        <table width="50%">
            <tr>        
                <td style="background-color: #a9a9a9">
                    <asp:Button ID="Button1" runat="server" Text="Button" />
                </td>
            </tr>
        </table>

</asp:content>

When I click Button1 the menu control on the master page shifts a pixel to the right.
0
 
DropZoneCommented:
Well, I actually wanted to see the final output HTML rendered by the application for the page.  In any case, I see a mixture of css style attributes and deprecated HTML layout attributes (e.g. style="width:100%" and width="50%"), and this sort of thing usually causes layout issues in some browsers (specially IE).

If you could run your application, open up the page in the browser, then use View|Source to get the source generated and post it here (or at least the relevant part), perhaps I can see something more.

    -dZ.
0
 
bertino12Author Commented:
Okay,

Before:
----------------------------------------------------------------------------------------------------------------------


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="ctl00_Head1"><title>
      TEST
</title><style type="text/css">
      .ctl00_Menu1_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
      .ctl00_Menu1_1 { text-decoration:none; }
      .ctl00_Menu1_2 { height:20px; }
      .ctl00_Menu1_3 { color:Black;font-family:Times New Roman;font-size:10pt; }
      .ctl00_Menu1_4 { border-color:Gainsboro;border-width:1px;border-style:Solid; }
      .ctl00_Menu1_5 { background-color:Gainsboro;border-style:None; }
      .ctl00_Menu1_6 { font-family:Times New Roman;font-size:8pt; }
      .ctl00_Menu1_7 { border-color:Gainsboro;border-width:1px;border-style:Solid; }
      .ctl00_Menu1_8 { background-color:Gainsboro;border-color:Gray;border-width:1px;border-style:Outset; }
      .ctl00_Menu1_9 {  }
      .ctl00_Menu1_10 { background-color:Ivory;border-color:Gainsboro;border-width:1px;border-style:Solid; }
      .ctl00_Menu1_11 {  }
      .ctl00_Menu1_12 { background-color:Ivory;border-color:Gainsboro;border-width:1px;border-style:Solid; }

</style></head>
<body>
    <IFRAME id="__hifSmartNav" name="__hifSmartNav" style="display:none" src="/test/WebResource.axd?d=aRp0ecf7HkHnf7v4hyBZHw2&amp;t=633197397855016299"></IFRAME>
<form name="aspnetForm" method="post" action="test1.aspx" id="aspnetForm" __smartNavEnabled="true">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTIwMDIzMDY0MjdkZEAzYUcSaiEFKEY6Rx23muHWCIvp" />
</div>

<script type="text/javascript">
<!--
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
// -->
</script>


<script src="/test/WebResource.axd?d=CbD1vB86R0G8-XOwHYGYJw2&amp;t=633197397855016299" type="text/javascript"></script>


<script src="/test/WebResource.axd?d=nEN9FvP6BjoaSo0DWXvx9g2&amp;t=633197397855016299" type="text/javascript"></script>
<script src="/test/WebResource.axd?d=g0MZwAVqkpAEvvCRd_Xs0w2&amp;t=633197397855016299" type="text/javascript"></script>
        <center>
            <table style="width: 100%; vertical-align: top" border="0">
                <tr>
                    <td align="left">
                       
                        <a href="#ctl00_Menu1_SkipLink"><img alt="Skip Navigation Links" src="/test/WebResource.axd?d=D4JGPna5AiNFmnyXVVul9w2&amp;t=633197397855016299" width="0" height="0" style="border-width:0px;" /></a><table id="ctl00_Menu1" class="ctl00_Menu1_5 ctl00_Menu1_2" cellpadding="0" cellspacing="0" border="0" style="position:fixed">
      <tr>
            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu1n0"><table class="ctl00_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr>
                        <td style="white-space:nowrap;"><a class="ctl00_Menu1_1 ctl00_Menu1_3" href="Default.aspx">&nbsp &nbsp Home</a></td>
                  </tr>
            </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu1n1"><table class="ctl00_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr>
                        <td style="white-space:nowrap;"><a class="ctl00_Menu1_1 ctl00_Menu1_3" href="test1.aspx">&nbsp &nbsp test1</a></td>
                  </tr>
            </table></td>
      </tr>
</table><a id="ctl00_Menu1_SkipLink"></a>

                    </td>
                </tr>
                <tr>
                    <td>
                       
 
        <table width="50%">
            <tr>        
                <td style="background-color: #a9a9a9">
                    <input type="submit" name="ctl00$ContentPlaceHolder1$Button1" value="Button" id="ctl00_ContentPlaceHolder1_Button1" />
                </td>
            </tr>
        </table>


                    </td>    
                </tr>
            </table>

        </center>
   
<div>

      <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKYydeABwKA4sljuCblsi6Vp1Xlm+ePI04P5ilXrHg=" />
</div>

<script type="text/javascript">
<!--
var ctl00_Menu1_Data = new Object();
ctl00_Menu1_Data.disappearAfter = 500;
ctl00_Menu1_Data.horizontalOffset = 0;
ctl00_Menu1_Data.verticalOffset = 2;
ctl00_Menu1_Data.hoverClass = 'ctl00_Menu1_12';
ctl00_Menu1_Data.hoverHyperLinkClass = 'ctl00_Menu1_11';
ctl00_Menu1_Data.staticHoverClass = 'ctl00_Menu1_10';
ctl00_Menu1_Data.staticHoverHyperLinkClass = 'ctl00_Menu1_9';
// -->
</script>
</form>
</body>
</html>




After:
----------------------------------------------------------------------------------------------------------------------




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="ctl00_Head1"><title>
      TEST
</title><style type="text/css">
      .ctl00_Menu1_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
      .ctl00_Menu1_1 { text-decoration:none; }
      .ctl00_Menu1_2 { height:20px; }
      .ctl00_Menu1_3 { color:Black;font-family:Times New Roman;font-size:10pt; }
      .ctl00_Menu1_4 { border-color:Gainsboro;border-width:1px;border-style:Solid; }
      .ctl00_Menu1_5 { background-color:Gainsboro;border-style:None; }
      .ctl00_Menu1_6 { font-family:Times New Roman;font-size:8pt; }
      .ctl00_Menu1_7 { border-color:Gainsboro;border-width:1px;border-style:Solid; }
      .ctl00_Menu1_8 { background-color:Gainsboro;border-color:Gray;border-width:1px;border-style:Outset; }
      .ctl00_Menu1_9 {  }
      .ctl00_Menu1_10 { background-color:Ivory;border-color:Gainsboro;border-width:1px;border-style:Solid; }
      .ctl00_Menu1_11 {  }
      .ctl00_Menu1_12 { background-color:Ivory;border-color:Gainsboro;border-width:1px;border-style:Solid; }

</style></head>
<body>
    <IFRAME id="__hifSmartNav" name="__hifSmartNav" style="display:none" src="/test/WebResource.axd?d=aRp0ecf7HkHnf7v4hyBZHw2&amp;t=633197397855016299"></IFRAME>
<form name="aspnetForm" method="post" action="test1.aspx" id="aspnetForm" __smartNavEnabled="true">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTIwMDIzMDY0MjdkZEAzYUcSaiEFKEY6Rx23muHWCIvp" />
</div>

<script type="text/javascript">
<!--
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
// -->
</script>


<script src="/test/WebResource.axd?d=CbD1vB86R0G8-XOwHYGYJw2&amp;t=633197397855016299" type="text/javascript"></script>


<script src="/test/WebResource.axd?d=nEN9FvP6BjoaSo0DWXvx9g2&amp;t=633197397855016299" type="text/javascript"></script>
<script src="/test/WebResource.axd?d=g0MZwAVqkpAEvvCRd_Xs0w2&amp;t=633197397855016299" type="text/javascript"></script>
        <center>
            <table style="width: 100%; vertical-align: top" border="0">
                <tr>
                    <td align="left">
                       
                        <a href="#ctl00_Menu1_SkipLink"><img alt="Skip Navigation Links" src="/test/WebResource.axd?d=D4JGPna5AiNFmnyXVVul9w2&amp;t=633197397855016299" width="0" height="0" style="border-width:0px;" /></a><table id="ctl00_Menu1" class="ctl00_Menu1_5 ctl00_Menu1_2" cellpadding="0" cellspacing="0" border="0" style="position:fixed">
      <tr>
            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu1n0"><table class="ctl00_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr>
                        <td style="white-space:nowrap;"><a class="ctl00_Menu1_1 ctl00_Menu1_3" href="Default.aspx">&nbsp &nbsp Home</a></td>
                  </tr>
            </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu1n1"><table class="ctl00_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr>
                        <td style="white-space:nowrap;"><a class="ctl00_Menu1_1 ctl00_Menu1_3" href="test1.aspx">&nbsp &nbsp test1</a></td>
                  </tr>
            </table></td>
      </tr>
</table><a id="ctl00_Menu1_SkipLink"></a>

                    </td>
                </tr>
                <tr>
                    <td>
                       
 
        <table width="50%">
            <tr>        
                <td style="background-color: #a9a9a9">
                    <input type="submit" name="ctl00$ContentPlaceHolder1$Button1" value="Button" id="ctl00_ContentPlaceHolder1_Button1" />
                </td>
            </tr>
        </table>


                    </td>    
                </tr>
            </table>

        </center>
   
<div>

      <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKYydeABwKA4sljuCblsi6Vp1Xlm+ePI04P5ilXrHg=" />
</div>

<script type="text/javascript">
<!--
var ctl00_Menu1_Data = new Object();
ctl00_Menu1_Data.disappearAfter = 500;
ctl00_Menu1_Data.horizontalOffset = 0;
ctl00_Menu1_Data.verticalOffset = 2;
ctl00_Menu1_Data.hoverClass = 'ctl00_Menu1_12';
ctl00_Menu1_Data.hoverHyperLinkClass = 'ctl00_Menu1_11';
ctl00_Menu1_Data.staticHoverClass = 'ctl00_Menu1_10';
ctl00_Menu1_Data.staticHoverHyperLinkClass = 'ctl00_Menu1_9';
// -->
</script>
</form>
</body>
</html>


0
 
DropZoneCommented:
Eeek!  I see that you are using SmartNav :).  I also see that there is a lot of css style manipulation there, so it could be the SmartNav itself that is causing the problem (it has been known to be flaky and crappy, so it may be better if perhaps you could avoid it at all).  Also, I see a style definition for ctl00_Menu1_10 and ctl00_Menu1_12 that set a border, although I do not see these used directly in the output (perhaps its in one of the javascript files, I don't know).

All in all, I cannot really reproduce it with that output alone, as it apparently depends on some other files.  Do you have a public web site where you can deploy this so that I can see it in action?

Other than that, I'm sorry I can't offer any more help.  I suggest you try testing it with Firefox with the WebDeveloper extension (which is what I use, among other things).  This extension offers many tools to analyze css issues.

    -dZ.
0
 
bertino12Author Commented:
Thanks, setting smart navigation to false fixed the problem. I have no idea why though :(
0
 
DropZoneCommented:
SmartNav sucks.  Really.  Its flakey.  It has some nice features, but it also has some horrible things it tries to do, and since there is no real way to choose which things to allow it to do, its best to disable it completely.

Was there anything in particular that you needed from SmartNav that you will miss?  If it was the automatic scrolling of the page, I have some code that can do that (which I currently use).

    -dZ.
0
 
bertino12Author Commented:
I have never had that turned on in my code, I guess it auto generated and I missed it. I always used another method for maintaining scroll bars as well. Hopefully MS will fix smart navigation since its a neat concept. Thanks for your time and help!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now