Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Content within web page shifts when drop down list of menu options appear

Content within web page shifts when drop down list of menu options appear Options
Previous Topic · Next Topic
SMolda
Posted: Saturday, September 8, 2007 1:23:17 PM
Rank: Newbie
Groups: Member

Joined: 9/8/2007
Posts: 4
I am using the menu control and the content within web page shifts when the drop down list of menu options appear (or I move from one menu item to another). I have it setup as a horizontal menu with drop downs. You can see it at www.posaeaglestest.org.

Any help would be greatly appreciated,

Thanks
Back to top
 
eo_support
Posted: Saturday, September 8, 2007 1:30:25 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Ah....sometimes you get that when you use "float". IE is notorious for having weird problems with float layout. So I would try without float first and see if it works. If it still doesn't, please post your .aspx contents (along with CSS rules) and we will take a look and see if we can find a workaround.
Back to top
 
SMolda
Posted: Tuesday, September 18, 2007 10:20:03 PM
Rank: Newbie
Groups: Member

Joined: 9/8/2007
Posts: 4
Thanks for your help. As requested, below is the information you asked for. The shifting occurs when the screen resolution is set to 800 x 600 but does not shift when screen resolution is set to 1024 x 768.

Link to page that is working properly: http://www.posaeaglestest.org/AboutPOSA_MissionStatement.aspx

Source code for AboutPOSA_MissionStatement.aspx:

<%@ Page Language="C#" masterpagefile="Main.master" title="Welcome Back POSA Eagles to our" %>
<asp:Content id="Content1" runat="server" contentplaceholderid="Body">
<h1 class="style1">Mission Statement</h1>
<p class="style8"><font face="Verdana" size="2">
<strong style="font-weight: 400">
Palos Orland Swim Association (POSA) is to offer an environment where our
athletes can excel to the best of their abilities in competitive age group
swimming, while developing the traits of integrity, sportsmanship and
teamwork. <br />
<br />
</strong>
</font></p>
</asp:Content>


Link to one of the pages in error: http://www.posaeaglestest.org/Meets_DualMeets.aspx

Source code for Meets_DualMeets.aspx:

<%@ Page Language="C#" masterpagefile="Main.master" title="Welcome Back POSA Eagles to our" %>
<asp:Content id="Content1" runat="server" contentplaceholderid="Body">
<h1 class="style1">&nbsp;Dual Meets</h1>
<p>Coming soon.......<br />
</p>
</asp:Content>
Back to top
 
eo_support
Posted: Wednesday, September 19, 2007 6:57:14 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You still have two float images there:

<img alt="POSA Banner 1" src="Images/POSA/POSABanner-1.jpg" width="978" height="75" style="float: left" class="style9" /><img alt="POSA Eagles Banner 2" src="Images/POSA/POSABanner-2.jpg" width="975" height="28" class="style9" />

Remove float from them and it should no longer shift.

Thanks
Back to top
 
SMolda
Posted: Wednesday, September 19, 2007 7:26:10 AM
Rank: Newbie
Groups: Member

Joined: 9/8/2007
Posts: 4
Thanks for the quick reply. I really need to get this resolved. I removed the float on the master page associated with the site and I am still having the problem. It's not happenning to every page???

The link to one of the pages that I am having issues with is: http://www.posaeaglestest.org/Meets_DualMeets.aspx

Any additional help you can prvide is appreciated.

Thanks in advance for your help.
Back to top
 
eo_support
Posted: Wednesday, September 19, 2007 8:29:32 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Sorry about the float...it's indeed a tricky issue. In fact it only occurs on IE 6. The problem does not occur in IE 7 either.

After much test, it appears that the root of the problem is the width of the two images. Those two images have a width of 978 and 975 respectively. When IE originally tries to center "Dual Meets", it does that based on screen width, which is correct; However, appearently IE noticed these two values and changes its mind about how to center the text when sub menu is displayed.

The easiest way around this problem is to do this:

Code: HTML/ASPX 
<div style="position:absolute;left:10px;top:10px;">
   your two images goes here
</div>
<div style="width:100px;height:103px">
</div>


The first div is used to take the two images out of normal page flow by declaring it as "position:absolute". This way IE will ignore its width when it tries to center the text; The second div is used as a "spacer" so that the first div and other page contents won't stack on top each other --- as such the second div has a height value that is the total of the height of the two images. Also, you may need to change the left and top value of the first div so that it fits with your design.

Please let us know it this works for you.

Thanks
Back to top
 
SMolda
Posted: Wednesday, September 19, 2007 9:44:10 AM
Rank: Newbie
Groups: Member

Joined: 9/8/2007
Posts: 4
Thanks again for the quick response. I did what you suggested and it still did not work. I then tried removing a with statement on the Marquee control that is directly under the pictures that you indicated and it appears to have corrected it. Figure that!

Thanks so much for your help because I really like the control and I wanted to make it work.

Regards
Back to top
 
eo_support
Posted: Wednesday, September 19, 2007 10:00:20 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
That's totally bizarre! But glad to hear that you got it working and thanks for the update!
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.