Forum Moderators: not2easy
Using aspx server technology (had to at this time - hope to change to php soon) and now same old battle with browsers - the site works OK on all but Safari (mac) and Opera (mac/PC) re: the site's simple menu with fly out. On Safari it's so bad it doesn't show the rollovers, and worse still when you click on the first/top menu item the entire menu disappears!
Any thoughts appreciated. Thanks much
KB
[edited by: SuzyUK at 9:35 am (utc) on May 26, 2007]
[edit reason] Please no URI's per TOS #13 [WebmasterWorld.com] [/edit]
is it possible you could isolate just a small sample of the generated menu code (HTML and CSS) to a separate page to confirm whether or not the problem exists once it's isolated. If so you can then post the code for the us
I did take a quick look and see that JS is involved so it could be that, but if you can do that someone should be able to help
Thanks
Suzy
Well, a friend DID manage to get the menus to work in Safari BUT now the default's main header image won't display -
he writes...
==============
I found some other information that suggested setting the ClientTarget attribute to "uplevel" when you detect the Safari or Opera browsers.
I went ahead and implemented that by creating a base class called BasePage (in the App_Code folder) and made every page load derive from it using the "Inherits" parameter. This seemed to solve the problem on Safari (I don't have Opera) without affecting IE7. Note that all new pages you create need to have the Inherits="BasePage" tag set in their <Page> element.
So all is good in that the submenus pop up as we would expect but there is a problem with the graphic on the default page. The main image doesn't load on the Safari browser unless I remove that ClientTarget="uplevel" statement. If I remove it, then the menus don't work.
==============
So here's a bit of the code for this home page -
========================
<!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" lang="en" xml:lang="en">
<head><link href="App_Themes/TruthAndLife/Styles.css" type="text/css" rel="stylesheet" /><title>
Welcome to Truth and Life
</title>
<!--[if IE 5]>
<style type="text/css">
td, th {
font-size: 0.76em;
}
#copy input {
height:1.5em;
}
</style>
<![endif]-->
<style type="text/css">
@import url(/Assets/CSS/TruthAndLife_Home.css);
#header {height:486px;}
.style1 {color: #333333}
</style>
<!--[if IE 7]>
<style type="text/css">
@import url(/Assets/CSS/TruthAndLife_ie7.css);
</style>
<![endif]-->
<style type="text/css">
.ctl00_mainMenu_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.ctl00_mainMenu_1 { text-decoration:none; }
.ctl00_mainMenu_2 { }
.ctl00_mainMenu_3 { border-style:none; }
.ctl00_mainMenu_4 { padding:6px 0px 6px 0px; }
.ctl00_mainMenu_5 { width:180px; }
.ctl00_mainMenu_6 { border-style:none; }
.ctl00_mainMenu_7 { width:188px;padding:6px 0px 6px 0px; }
.ctl00_mainMenu_8 { }
.ctl00_mainMenu_9 { border-style:none; }
.ctl00_mainMenu_10 { }
.ctl00_mainMenu_11 { border-style:none; }
.ctl00_mainMenu_12 { }
.ctl00_mainMenu_13 { border-style:none; }
.ctl00_mainMenu_14 { width:180px; }
</style></head>
<body>
<form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm">
<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="/##=" />
</div>
<script type="text/javascript">
<!--
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit ¦¦ (theForm.onsubmit()!= false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script>
<script src="/WebResource.axd?d=NUoZvo-0d3hS8UZi6iP-Qg2&t=632965646931268385" type="text/javascript"></script>
<script src="/WebResource.axd?d=GHZPit6Sts7vInwzIfijog2&t=632965646931268385" type="text/javascript"></script>
<div id="mainwrapper">
<div id="topShadow"> </div>
<div id="header">
<span id="mastheadImage">
<img id="ctl00_mastheadPh_mastheadImg" src="Images/homepage/masthead.jpg" alt="" style="height:486px;width:760px;border-width:0px;" />
</span>
<div id="menu">
<a href="#ctl00_mainMenu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=bbf9EcfPgkcWXILCrcNQQA2&t=632965646931268385" width="0" height="0" style="border-width:0px;" /></a><table id="ctl00_mainMenu" class="ctl00_mainMenu_5 ctl00_mainMenu_2" cellpadding="0" cellspacing="0" border="0">
<tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="FREE Bible Class on God's Master Plan" id="ctl00_mainMenun0">
<td><table class="menuNormal ctl00_mainMenu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="width:100%;"><a class="ctl00_mainMenu_1 menuNormal ctl00_mainMenu_3" href="/Seminar.aspx" style="border-style:none;font-size:1em;">FREE Class - God's Master Plan</a></td><td style="width:0;"><img src="Images/flyout.png" alt="Expand FREE Class - God's Master Plan" style="border-style:none;vertical-align:middle;" /></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="Righteousness B4 Peace Article" id="ctl00_mainMenun1">
<td><table class="menuNormal ctl00_mainMenu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="width:100%;"><a class="ctl00_mainMenu_1 menuNormal ctl00_mainMenu_3" href="/RP.aspx" style="border-style:none;font-size:1em;">Righteousness and Peace</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="Original teaching of the Bible" id="ctl00_mainMenun2">
<td><table class="menuNormal ctl00_mainMenu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="width:100%;"><a class="ctl00_mainMenu_1 menuNormal ctl00_mainMenu_3" href="/TrueGospel.aspx" style="border-style:none;font-size:1em;">The True Gospel</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="Who we are" id="ctl00_mainMenun3">
<td><table class="menuNormal ctl00_mainMenu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="width:100%;"><a class="ctl00_mainMenu_1 menuNormal ctl00_mainMenu_3" href="/About.aspx" style="border-style:none;font-size:1em;">The Christadelphians</a></td>
</tr>
</table></td>
</tr>
</table><div id="ctl00_mainMenun0Items" class="ctl00_mainMenu_0 subMenu ctl00_mainMenu_8">
<table border="0" cellpadding="0" cellspacing="0">
<tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="FREE GMP Class" id="ctl00_mainMenun4">
<td><table class="subMenuNormal ctl00_mainMenu_7" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="width:100%;"><a class="ctl00_mainMenu_1 subMenuNormal ctl00_mainMenu_6" href="/Seminar2.aspx" style="border-style:none;font-size:1em;">GMP Presentation</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="Presentation Info" id="ctl00_mainMenun5">
<td><table class="subMenuNormal ctl00_mainMenu_7" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="width:100%;"><a class="ctl00_mainMenu_1 subMenuNormal ctl00_mainMenu_6" href="/SeminarInformation.aspx" style="border-style:none;font-size:1em;">GMP information</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="Presentation Schedule" id="ctl00_mainMenun6">
<td><table class="subMenuNormal ctl00_mainMenu_7" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="width:100%;"><a class="ctl00_mainMenu_1 subMenuNormal ctl00_mainMenu_6" href="/SeminarSchedule.aspx" style="border-style:none;font-size:1em;">GMP Class Schedule</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="Class Registration" id="ctl00_mainMenun7">
<td><table class="subMenuNormal ctl00_mainMenu_7" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="width:100%;"><a class="ctl00_mainMenu_1 subMenuNormal ctl00_mainMenu_6" href="/SeminarRegistration.aspx" style="border-style:none;font-size:1em;">GMP Class Request</a></td>
</tr>
</table></td>
</tr>
</table><div class="subMenuNormal ctl00_mainMenu_7 ctl00_mainMenu_0" id="ctl00_mainMenun0ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/WebResource.axd?d=G5hSlNPYzhr9fhzZKpGnryaPN1ndz1KK0C4JsTzJKco1&t=632965646931268385" alt="Scroll up" />
</div><div class="subMenuNormal ctl00_mainMenu_7 ctl00_mainMenu_0" id="ctl00_mainMenun0ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
<img src="/WebResource.axd?d=oL4up4Jnc4ClLTuv3jXeqEcw1NyefIdbVBIY50wWhcU1&t=632965646931268385" alt="Scroll down" />
</div>
</div><a id="ctl00_mainMenu_SkipLink"></a>
</div>
</div>
<div id="bottomShadow"> </div>
</div>
<script type="text/javascript">
<!--
var ctl00_mainMenu_Data = new Object();
ctl00_mainMenu_Data.disappearAfter = 500;
ctl00_mainMenu_Data.horizontalOffset = 6;
ctl00_mainMenu_Data.verticalOffset = 0;
ctl00_mainMenu_Data.hoverClass = 'ctl00_mainMenu_14 subMenuHover';
ctl00_mainMenu_Data.hoverHyperLinkClass = 'ctl00_mainMenu_13 subMenuHover';
ctl00_mainMenu_Data.staticHoverClass = 'ctl00_mainMenu_12 menuHover';
ctl00_mainMenu_Data.staticHoverHyperLinkClass = 'ctl00_mainMenu_11 menuHover';
// -->
</script>
</form>
=======================
Sorry for so much code but you can't post links here.
Thanks
KB
[edited by: SuzyUK at 8:42 am (utc) on May 29, 2007]
[edit reason] removed long viewstate, formatting [/edit]
this is all bit over my head, the menu as I see it is completely JS driven, and it's tied up with the .NET code (webresource files?) - I don't think, by your description, that this is a CSS issue.
I took a look at your actual page in Opera, I can confirm the same as what you're saying about Safari, i.e. at the minute the header image is displaying, but the menus are not working properly.
I don't know how .NET generates those scripts or indeed what is tied up with them or those 'uplevel' settings you mention. Perhaps you might like to ask in the ASP.NET [webmasterworld.com] forum about script/image source issues that occur?
If you get script issues fixed and then think it would be easier to rewrite/recode the menu so it's not completely tied to .NET code/JS driven, rather mostly CSS based, then that we should be able to help with
Suzy
[edited by: SuzyUK at 9:34 am (utc) on May 29, 2007]
KB
