Asp.net page position

Hi All,
I have an asp.net page that is jumping to the middle of the page when it loads and on postbacks, and I have no idea why.  There is no code-behind file.  Anyone have any thoughts?

Here is the code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="faq.aspx.vb" Inherits="faq" %>
<%@ Register Assembly="ASPNetVideo.NET2.AJAX" Namespace="ASPNetVideo" TagPrefix="ASPNetVideo" %>

<!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">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title></title>
    
    <link href="CSS/Style.css" type="text/css" rel="stylesheet" />
    <script language="JavaScript" src="CSS/css.js" type="text/javascript"></script>    
    <script language="JavaScript" type="text/javascript">
    <!-- Begin
    function popUp(URL) {
    day = new Date();
    id = day.getTime();
    eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=350,left = 440,top = 275');");
    }
    // End -->
    </script>
</head>
<body>
    <form id="form1" runat="server" defaultbutton="GoButton">
    <div class="Canvas">
    <div class="FAQHeader">
       <div class="FAQLogo">
            <a href="Default.aspx"><img src="Images/FAQLogo.jpg" alt="" /> </a>
        </div>
    </div>
    <div class="FAQContent">
    
<!-- ****************       Two Column Layout     *********************-->

    <div class="FAQLeftColumn" >
  
    <div class="FAQMenu" id="awmAnchor-menu">
        
<!-- DO NOT MOVE! -->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR menu ******** -->
<script type="text/javascript">    var MenuLinkedBy = "AllWebMenus [4]", awmMenuName = "menu", awmBN = "788"; awmAltUrl = "";</script>
<script charset="UTF-8" src="jscript2Menu/menu.js" type="text/javascript"></script>
<script type="text/javascript">    awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR menu ******** -->
       
    </div>
    
    <img width="250px" height="200px" src="Images/VideoImage.jpg" alt="VideoImage" />
    <div class="FAQPlayVideo">Learn more about Rx Optical<br />
        <a href="javascript:popUp('Video.aspx')" class="FAQPlayVideo" >Play Video</a>
    </div>
        
        <div class="FAQZipCodeLocator">
        <b>Find a location</b><br />
        <table><tr><td>
        <asp:TextBox ID="TextBox1" runat="server" Width="75"></asp:TextBox></td><td>
        <asp:ImageButton runat="server" ID="GoButton" ImageUrl="Images/goButton.jpg" /></td></tr></table>
        <b><i>enter ZIP code</i></b>
        </div>
        
    <div class="FAQNeedAssistanceContainer">
    <p class=""><span style="color:#A99741; font-size:12px;"><b>Need assistance? 1-800-792-2737</b></span><br />
    <span style="color:#A99741; font-size:11px;"><a href= "Privacy.aspx" class="NeedAssistanceLink">Privacy Policy </a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<br />
    &copy;2010  All Rights Reserved</span></p>
    </div>
</div>


    <div class="FAQRightColumn">
    <span style="font-size: 19px; font-weight:bold; color:#3f397e;">
    Answers to your questions
    </span>
  
</div>
       
       
    <div class="FAQFooter"></div>
    
    </div>
    </div>
    </form>
</body>
</html>

Open in new window

LVL 1
jwoodhamsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alfred A.Commented:
Hi,

If your web pages is based on "flowlayout", there might be controls in there that resizes on postback, causing them to be push downwards.

You can try controlling your divs with the float style example <div style="float:right;">
0
jwoodhamsAuthor Commented:
Thanks Alfred,  I have looked at my css file and I dont see anything that stands out.  I am not a CSS expert however.  I am attaching the CSS file if you want to take a look at it.  The page exhibits the same behavior in IE and in FF.  
/************************       FAQ PAGE      *************************/

.FAQRightColumn
{
	width:520px;
	/*height:1900px;*/
	margin-top:20px;
	padding-left:30px;
	padding-top:0px;
	float:right;
	line-height:17px;
	border:solid 0px green;
}

.FAQLogo	/*   Modified in IE    */
{
	padding:50px;
	border: solid 0px red;
}

.FAQHeader  
{
	width:800px;
	height:128px;
	border: solid 0px black;
	background:url(../Images/faqHeader.jpg) repeat-y;
	background-position:right;   
}

.FAQFooter
{
	width:800px;
	height:50px;
	border: solid 0px black;
	clear:both;
}

.FAQMenu /*Modified in IE*/
{
	width:220px;
	height:350px;
	float:left;
	border:solid 0px blue;
	position:relative;
	margin-left:0px;
	margin-bottom:0px;
	margin-top:-30px;
	vertical-align:top;
}


.FAQExtraMenuItems
{ 
	color:#a99741;
	text-decoration:none;
	margin-left:50px;
	border:solid 0px blue;
}

a.FAQExtraMenuItems:link
{
	color:#a99741;
	text-decoration:none;
	margin-left:50px;
}

a.FAQExtraMenuItems:active
{
	color:#a99741;
	text-decoration:none;
	margin-left:50px;	
}

a.FAQExtraMenuItems:hover
{
	color:#3f4d94;
	text-decoration:none;
	margin-left:50px;
}



.FAQPlayVideo
{
	width:230px;
	height:50px;
	color:#a99741;
	padding:0px 0px 0px 20px;
	background-color:#666666;
}

a.FAQPlayVideo:link
{
	color:#a99741;
	font-size:11px;
	text-decoration:none;
	margin-left:-20px;
}

a.FAQPlayVideo:active
{
	color:#a99741;
	font-size:11px;
	text-decoration:none;
	margin-left:-20px;	
}

a.FAQPlayVideo:hover
{
	color:#3f4d94;
	font-size:11px;
	text-decoration:Underline;
	margin-left:-20px;
}

a.FAQPlayVideo:visited
{
	color:#a99741;
	font-size:11px;
	text-decoration:none;
	margin-left:-20px;
}

.FAQZipCodeLocator	/*   Modified in IE  */
{
	width:186px;
	height:70px;
	border:solid 0px black;
	background-color:#d4ddde;
	margin-top:20px;
	font-size:12px;
	padding:10px 0px 0px 50px;
}

.FAQNeedAssistanceContainer		/*   Modified in IE  */
{
	width:200px;
	height:120px;	
	padding:10px 0px 0px 0px;
	border:solid 0px green;
	position:relative;
	line-height:15px;
	margin-left:20px;
}

.FAQLeftColumn
{
	width:247px;
	margin-top:50px;
	float:left;
	border:solid 0px red;
}

.FAQDataList
{
	border:solid 0px red;
	margin-top:0px;
	color:#5d78b4;
	font-size:12px;
}

.FAQContent
{
	width:800px;
	background:url(../Images/faqBG.jpg);
	background-repeat:no-repeat;
}

Open in new window

0
Alfred A.Commented:
Hi,

I tried simulating your web pages based on the given css and aspx, and it seems to have the outlines properly placed.

Is the div.FAQRightColumn where "Answers to your questions" is the one acting up?

I noticed that the image width (250 px) is bigger than the .FAQLeftColumn (247 px) this might be also why it is acting up.

I suggest to adjust your widths appropriately like determining the boundaries of your whole page and making sure that your controls/items in the web page fits in the boundary.
0
Introduction to R

R is considered the predominant language for data scientist and statisticians. Learn how to use R for your own data science projects.

jwoodhamsAuthor Commented:
Thanks Alfred1

I have figured out that page is positioning depending on where the FAQZipCodeLocator Class is located on the page.  So when the page renders, it adjust the position to keep the FAQZipCodeLocator element above the fold.  Do you know why this is happening?

Thanks

Jay
0
Alfred A.Commented:
Hi Jay,

It seems to be OK in my simulated web site.  The container within the FAQZipCodeLocator seems to be accomodating it.  Can you provide us a snapshot of what it looks like originally and what it looks like once it loads on postback?

Also, why is your margin-top for div.FAQLeftColumn (50 px) and div.FAQMenu  (-30px)not in line?  I mean your div.FAQMenu is inside div.FAQLeftColumn.

I also noticed that your div.FAQLeftColumn has a float:left and div.FAQRightColumn has a float:right.

In doing a two column layout, are the width sizes sufficient enough to render it side-by-side?  If the widths are bigger than the container of the columns, there is a tendency to wrap the one with the div.FAQRightColumn below.
0
jwoodhamsAuthor Commented:
It looks the same on postback as is does when it loads.  I wish I remebered exactly why each column was floated.  I know that it solved a layout issue at one time but it was quite some time ago.  I am worried that I am just going to have to rebuild this page from the begining.  Here is a screenshot of how the page loads and posts back.
screenshot.jpg
0
Alfred A.Commented:
Hi,

Did you made some adjustments after noticing the problem?  This might be a case when the widths of a container is increased, it will wrap it at a certain location depending on the structure of the page.  If a container fits an area, it should not be a problem.  Just some tip based on my experience, there are cases sometimes that a <br /> or even a &nbsp; can cause a container or control to move out of position in a page.

So, I guess it is working again, right?  Also, have you tested this in other browsers (i.e. Firefox or Safari)?  There are cases where it works in Firefox but doesn't work in I.E and vice-versa.
0
jwoodhamsAuthor Commented:
I have tested in other browsers and the results are the same.  The only way that I got it to work was to make sure that the FAQZipCodeLocator element renders above the fold.  so I moved the image file under the FAQZipCodeLocator element and now it is fine but, that doesn't really solve the problem, it is just a work around.  And a designer that is really particular about their design might not like the change.  I have put a border around all the elements on the page to see how they layout and everything seems to be fine but, the page will still not allow the FAQZipCodeLocator to appear below the fold.  I appreciate all of your help.  Do you have any other suggestions of what I might try to resolve this issue?

Thanks

Jay
0
Alfred A.Commented:
Hi,

Just some clarification, which one should be "above the fold", the "Find a location" container area or the "VideoImage.jpg"?

Is the screenshot above the correct output?
0
Alfred A.Commented:
Hi,

Also, the image file you are talking about is the VideoImage.jpg file, right?  Correct me if I am wrong, so you moved the <img width="250px" height="200px" src="Images/VideoImage.jpg" alt="VideoImage" /> under the <div class="FAQZipCodeLocator">?  Is this right?
0
Alfred A.Commented:
Also,  my understanding of "Above the fold" is a graphic design concept that refers to the location of an important news story or a visually appealing photograph on the upper half of a web page, so the VideoImage.jpg is above the fold, right?

0
jwoodhamsAuthor Commented:
Sorry, let me clarify.  Our design department refers to the fold as the bottom of the screen.  Any content that would be rendered below the visible part of the browser screen is referred to as below the fold.  Any content that is visible would be above the fold.  I am not sure if that is a term common among designers or just with us.  Sorry about that.  Anyway, the screenshot is how the page renders incorrectly.  The position of the page should start at the top header and place the zip code locator "below the fold" and the image (VideoImage.jpg) should appear "above the fold".  however, it does not work like it should.  What it is doing, is rendering the page as if it has scrolled down 150px or so in order to put both the image and the zip code locator "above the fold".  So, a quick work around is to move the image below the zip code locator but, that drives the designers crazy.  For some reason, the browser (IE and FF) will render the image "below the fold" however it will not allow the zip code locator to be renedered "below the fold".  The scroll position of the browser adjust to make sure of that.  I don't know why.  
0
Alfred A.Commented:
Ok.  Thanks for the clarification.  I actually mixed the jargons because what I was thinking before was the one used by our graphics designer contractor.

However, for a web page, the area on a web page that is viewable without the user having to vertically scroll the bar is for me "above the fold"

0
Alfred A.Commented:
Is there a way for you to reduce the height of the .FAQMenu from 350px to a lesser value?

Also, is it possible to reduce the margin-top of .FAQLeftColumn from 50px to let say 20px?

I believe if you reduce the heights of some of your elements on the left, it should render appropriately,  I was trying to simulate your code and it seems to be working.  Unfortunately, I don't have images on some elements, so my simulation is not really exact.  Also check the margins as well.  The FAQLeftColumn Container is really below the FAQMenu.  I don't know if this is right.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jwoodhamsAuthor Commented:
Thanks so much, I will work on it this afternoon,  You are right about the menu.  The client was very paticular about this menu and they used some third party software to develop it in javascript so the menu references its own file for layout and it did not match the position that it needed to be, so we are compensating with our own css file to reposition the menu.  Yeah, it has been a nightmare.

Thanks for you help so far.
0
jwoodhamsAuthor Commented:
Thanks for your help.  This is a CSS issue and to fix it we are going to have re-write the CSS files
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.