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
ouble;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&t=633739633393582448" type="text/javascript"></script>
<script src="/testnav/WebResource.axd?d=UlttiAkjsPQu3uew-JZ8Aw2&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&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>
Before you post, read our: 
