...

View Full Version : IE Safari Absolute Positioning



TonyMarz
12-07-2009, 06:10 PM
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-style:Double;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>

Excavator
12-07-2009, 06:14 PM
Hello TonyMarz,
It's impossible to tell what's causing it without seeing the code. A link to the site is always best.

TonyMarz
12-07-2009, 06:16 PM
The site name is www.gusbowhunting.com. I can post the HTMl if that would be helpful

Jahren
12-07-2009, 06:19 PM
that would be helpful yes :)

TonyMarz
12-07-2009, 06:26 PM
I added some of the code to the original message

Excavator
12-07-2009, 06:54 PM
That is a lot of absolute positioning which is not really needed. (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/)

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.

Excavator
12-07-2009, 07:01 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum