Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE Safari Absolute Positioning

    I have developed a site using VIsual Studio 2008. Bcause the site was small but loaded with graphics I used a simple ASP menu (Navigation tool / Menu) to support customers traversing from page to page. In IE everything works fine, note that I used absolute positioning. A family member used a mac book to look at the site using Safari. O.K. now the problem. In Safari the nav menu displays at the top left corner of the page. To minimize the number of styles used to render the sheet I copied 2 items to a new website project, the menu and a hyperlink. viewed the page in IE, results are as designed in studio. Loaded in Safari, the nav menu jumps to top left of the page. I dressed the menu with hover colors put a box around the menu with colors etc. Loaded page in IE and it looks like I designed it, including hover colors etc. In Safari the menu is rendered at the top left with no font dressings as defined in previous sentence. When the hyperlink is placed in the top left corner the menu displays underneath the hyperlink. Any ideas?

    The HTML from IE follows (This is a test page with minimal items)


    <!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><title>

    </title>
    <style type="text/css">
    .style1
    {
    width: 981px;
    height: 617px;
    }
    .style2
    {
    width: 199px;
    height: 149px;
    position: absolute;
    z-index: 1;
    left: 4px;
    top: 26px;
    }
    .style12
    {
    width: 139px;
    height: 161px;
    position: absolute;
    left: 0px;
    top: 269px;
    z-index: 1;
    bottom: -269px;
    }
    </style>
    <style type="text/css">
    .Menu1_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
    .Menu1_1 { color:Lime;font-family:Segoe Print;font-weight:bold;text-decoration:none; }
    .Menu1_2 { color:Lime;border-color:#FF3300;border-styleouble;font-family:Segoe Print;font-weight:bold; }
    .Menu1_3 { color:Red; }
    .Menu1_4 { }
    .Menu1_5 { color:#FF3300; }
    .Menu1_6 { color:#FF3300; }
    .Menu1_7 { color:Red; }
    .Menu1_8 { color:Red; }

    </style></head>
    <body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
    <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="/wEPDwULLTE1OTM1NDI5MTJkZA7na4sBUzYftzCMQmvjoRHZ/o2T" />
    </div>

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


    <script src="/testnav/WebResource.axd?d=dNl1iOeHxqMGSJqjFGd_vg2&amp;t=633739633393582448" type="text/javascript"></script>


    <script src="/testnav/WebResource.axd?d=UlttiAkjsPQu3uew-JZ8Aw2&amp;t=633739633393582448" type="text/javascript"></script>
    <div class="style1">

    <a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/testnav/WebResource.axd?d=Nf9ktZZKm4vLDOl7P-dOvA2&amp;t=633739633393582448" width="0" height="0" style="border-width:0px;" /></a><table id="Menu1" class="style12 Menu1_2" cellpadding="0" cellspacing="0" border="0" style="width: 151px; height: 175px; position: absolute; left: 13px; top: 192px">
    <tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n0">
    <td><table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
    <td style="white-space:nowrap;width:100%;"><a class="Menu1_1" href="Default.aspx">Home</a></td>
    </tr>
    </table></td>
    </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n1">
    <td><table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
    <td style="white-space:nowrap;width:100%;"><a class="Menu1_1" href="trophy1.aspx">Trophy 2009</a></td>
    </tr>
    </table></td>
    </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n2">
    <td><table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
    <td style="white-space:nowrap;width:100%;"><a class="Menu1_1" href="Trophy2.aspx">Trophy 2008</a></td>
    </tr>
    </table></td>
    </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n3">
    <td><table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
    <td style="white-space:nowrap;width:100%;"><a class="Menu1_1" href="Trophy3.aspx">Trophy Friends</a></td>
    </tr>
    </table></td>
    </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n4">
    <td><table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
    <td style="white-space:nowrap;width:100%;"><a class="Menu1_1" href="Video.aspx">Video</a></td>
    </tr>
    </table></td>
    </tr>
    </table><a id="Menu1_SkipLink"></a>
    <a id="HyperLink1" class="style2" target="_blank"><img src="images/dartonresize2.jpg" alt="HyperLink" style="border-width:0px;" /></a>

    </div>


    <script type="text/javascript">
    //<![CDATA[
    var Menu1_Data = new Object();
    Menu1_Data.disappearAfter = 500;
    Menu1_Data.horizontalOffset = 0;
    Menu1_Data.verticalOffset = 0;
    Menu1_Data.hoverClass = 'Menu1_8';
    Menu1_Data.hoverHyperLinkClass = 'Menu1_7';
    Menu1_Data.staticHoverClass = 'Menu1_6';
    Menu1_Data.staticHoverHyperLinkClass = 'Menu1_5';
    //]]>
    </script>
    </form>
    </body>
    </html>
    Last edited by TonyMarz; 12-07-2009 at 07:25 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    Hello TonyMarz,
    It's impossible to tell what's causing it without seeing the code. A link to the site is always best.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Site Identification

    The site name is www.gusbowhunting.com. I can post the HTMl if that would be helpful

  • #4
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    that would be helpful yes

  • #5
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I added some of the code to the original message

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    That is a lot of absolute positioning which is not really needed.

    The inline styling position: absolute; top: 226px; left: 3px; bottom: 210px; should place the menu in Safari the way it shows for me in FF3.5... I would questiong the need for bottom:210px; though.

    I don't have Safari the check your site in though.

    When posting code, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    Maybe Safari is having a conflict between your inline styling positioning your menu and your application of .style1 in your CSS which also positions your menu. The inline styling takes precedence and cancels the CSS styling in a modern browser but maybe in confuses Safari.

    Just a guess.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •