MAC Browsers and Compatibility with Windows Browsers

[HEX]

Have a site under development which works with both IE and Mozilla Firefox.
Three MAC users accessed site and two have a small problem with one page and the other recently went to the new Leopard release with Safari V3.0.4. browser. This user has big problems with a couple of pages. A couple of users have older Safari and one has Firefox. They experience the minor issue.

Is developing a site with Windows and targeting IE and Firefox as the standard site checkers not a good way to go? Or is trying to have a site also work in the MAC world considered mission impossible? This compatibility issue is mind boggling to me being a new person at this, and it's my first experience. Which worlds browsers best represents a testing check for a standard to follow?

The site is built using ASP Net 2.0. and VWD.

Thanks

[MMcCarthy]

I'm going to move this to the Software Development forum where I think it will get better attention.

Mary

[pbmods]

Heya, HEX.

Are these JavaScript errors or HTML/CSS rendering problems, or both?

[HEX]

Heya, HEX.

Are these JavaScript errors or HTML/CSS rendering problems, or both?

These are rendering problems. Also, the pages are XHTML 1.0 Transitional Doctype. They checked out as such via the W3C page check site. The minor problem is on a simple page. I didn't see it for myself so may have to figure a way to do that. The latest more serious problem w/ Safari V3.0.4 seems to be a positioning problem. Again, I can't yet see it for myself until I make some arrangment to do so.

Thanks

[jhardman]

These are rendering problems. Also, the pages are XHTML 1.0 Transitional Doctype. They checked out as such via the W3C page check site. The minor problem is on a simple page. I didn't see it for myself so may have to figure a way to do that. The latest more serious problem w/ Safari V3.0.4 seems to be a positioning problem. Again, I can't yet see it for myself until I make some arrangment to do so.

Thanks

The best browser for a testing check is firefox (NOT IE). It is currently the most-compliant of all browsers. Typically websites designed to work first with IE have big problems in other browsers and you will save yourself some headache by going with firefox first.

That said, I use safari at home and on occasion I have problems. These are usually minor rendering problems, but on occasion I see problems with positioning. I remember that I once tried to search for a particular car in a classified ad page. First I select make from a menu, then a daughter menu appears from which I am supposed to select model, etc. I was unable to select because the daughter menu appeared in quite a different place than intended and by the time I moved my cursor over there the daughter menu had disappeared. Even though the real problem was just a minor one - menu appeared in the wrong place - it completely distroyed the functionality of the site. This was very frustrating.

I'm not sure what the best solution is. You said you validated your code with w3c. Did you also validate the css and javascript? Perhaps if you showed your code or posted a link I could test it.

Jared

[HEX]

The best browser for a testing check is firefox (NOT IE). It is currently the most-compliant of all browsers. Typically websites designed to work first with IE have big problems in other browsers and you will save yourself some headache by going with firefox first.

That said, I use safari at home and on occasion I have problems. These are usually minor rendering problems, but on occasion I see problems with positioning. I remember that I once tried to search for a particular car in a classified ad page. First I select make from a menu, then a daughter menu appears from which I am supposed to select model, etc. I was unable to select because the daughter menu appeared in quite a different place than intended and by the time I moved my cursor over there the daughter menu had disappeared. Even though the real problem was just a minor one - menu appeared in the wrong place - it completely distroyed the functionality of the site. This was very frustrating.

I'm not sure what the best solution is. You said you validated your code with w3c. Did you also validate the css and javascript? Perhaps if you showed your code or posted a link I could test it.

Jared

Thanks. Appreciate your comments. I always check w/Firefox. First issue, Pics overlay last text on page. Code for the simple page problem:

 
 
<!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>
    LOGIN PAGE
</title></head>
<body style="border-left-color: #3366ff; border-bottom-color: #3366ff; border-top-style: double; border-top-color: #3366ff; border-right-style: double; border-left-style: double; border-right-color: #3366ff; border-bottom-style: double; background-color: #ffffcc;">
    <form name="form1" method="post" action="login.aspx?ReturnUrl=%2fDefault.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div>
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTIxMDc5ODM5MDRkGAEFHl9fQ29udHJvb HNSZXF1aXJlUG9zdEJhY2tLZXlfXxYCBRFMb2dpbjEkUmVtZW 1iZXJNZQUXTG9naW4xJExvZ2luSW1hZ2VCdXR0b26/CmFI7/Y MMPxhNQ8VkQNAN0OjIQ==" />
</div>
 
<script type="text/javascript">
<!--
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="/WebResource.axd?d=MFKssAxxzargrsObBfvMqw2&amp; t=633105126532343750" type="text/javascript"></script>
 
 
<script src="/WebResource.axd?d=FJj6wfd4Tg57aVzIE-U9YdK_yrZN sjm8XJrz1Jdkrnw1&amp;t=633105126532343750" type="text/javascript"></script>
<script src="/WebResource.axd?d=W3igURv1EMRupLXtBpj2ew2&amp; t=633105126532343750" type="text/javascript"></script>
<script type="text/javascript">
<!--
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
// -->
</script>
 
    <div style="color: #0066ff; background-color: #ffffcc; font-variant: small-caps; border-left-color: #0066ff; border-bottom-color: #0066ff; border-top-color: #0066ff; border-right-color: #0066ff;">
 
        <table cellspacing="0" cellpadding="4" border="0" id="Login1" style="background-color:#FFFBD6;border-color:#FFDFAD; border-width:1px;border-style:Solid;border-collapse:collapse;z-index: 100;
            border-left-color: #0066ff; left: 359px; border-bottom-color: #0066ff; color: blue;
            border-top-style: solid; border-top-color: #0066ff; border-right-style: solid;
            border-left-style: solid; position: absolute; top: 68px; border-right-color: #0066ff;
            border-bottom-style: solid">
    <tr>
        <td><table cellpadding="0" border="0" style="color:#333333;font-family:Verdana;font-size:0.8em;height:219px;width:246px;">
            <tr>
                <td align="center" style="color:White;background-color:#990000;font-size:0.9em;font-weight:bold;">Log In</td>
            </tr><tr>
                <td><label for="Login1_UserName">User Name:</label></td>
            </tr><tr>
 
                <td><input name="Login1$UserName" type="text" id="Login1_UserName" style="font-size:0.8em;" /><span id="Login1_UserNameRequired" title="User Name is required." style="color:Red;visibility:hidden;">*</span></td>
            </tr><tr>
                <td><label for="Login1_Password">Password:</label></td>
            </tr><tr>
                <td><input name="Login1$Password" type="password" id="Login1_Password" style="font-size:0.8em;" /><span id="Login1_PasswordRequired" title="Password is required." style="color:Red;visibility:hidden;">*</span></td>
            </tr><tr>
                <td><input id="Login1_RememberMe" type="checkbox" name="Login1$RememberMe" /><label for="Login1_RememberMe">Remember me next time.</label></td>
 
            </tr><tr>
                <td align="right"><input type="submit" name="Login1$LoginButton" value="Log In" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Login1$LoginButton&quot;, &quot;&quot;, true, &quot;Login1&quot;, &quot;&quot;, false, false))" id="Login1_LoginButton" style="color:#990000;background-color:White;border-color:#CC9966; border-width:1px;border-style:Solid;font-family:Verdana;font-size:0.8em;" /></td>
            </tr>
        </table></td>
    </tr>
</table>
        <span id="Label1" style="display:inline-block;font-size:16pt;font-weight:bold;width:226px;z-index: 101;
            left: 376px; color: #0033ff; font-style: italic; position: absolute; top: 32px;
            text-align: center; font-variant: small-caps">Members Login</span>
        <img alt="Court Picture" src="IMAGES/Tennis Men.JPG" style="z-index: 103; left: 42px; width: 314px;
            position: absolute; top: 69px; height: 230px" />
        <img alt="Court Picture" src="IMAGES/Tennis Ct1.JPG" style="z-index: 104; left: 619px; width: 308px;
            position: absolute; top: 66px; height: 231px" />
 
        <img alt="Tennis Office" src="IMAGES/Tennis Office.JPG" style="z-index: 106; left: 622px; width: 308px;
            position: absolute; top: 297px; height: 231px" />
        <img alt="Patio Picture" src="IMAGES/Tennis Social.JPG" style="z-index: 105; left: 43px; width: 314px;
            position: absolute; top: 299px; height: 231px" />
        <img alt="Tennis Dog" src="IMAGES/TENNISDOG.jpg" style="z-index: 107; left: 354px; width: 271px; position: absolute;
            top: 300px; height: 230px" />
        &nbsp;<br />
        <br />
        <br />
        <br />
        <br />
        <br />
 
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
 
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
 
        <br />
        <br />
        <br />
        <br />
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
 
        &nbsp;<span style="color: #0033ff"><strong>Lost your Password? &nbsp; <a href="Recover Password.aspx">
            Go To Password Recovery</a></strong><br />
        </span>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
        <span style="color: #0033ff"></span>
       </div>
 
 
<script type="text/javascript">
<!--
var Page_Validators =  new Array(document.getElementById("Login1_UserNameRequired"), document.getElementById("Login1_PasswordRequired"));
// -->
</script>
 
<script type="text/javascript">
<!--
var Login1_UserNameRequired = document.all ? document.all["Login1_UserNameRequired"] : document.getElementById("Login1_UserNameRequired");
Login1_UserNameRequired.controltovalidate = "Login1_UserName";
Login1_UserNameRequired.errormessage = "User Name is required.";
Login1_UserNameRequired.validationGroup = "Login1";
Login1_UserNameRequired.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
Login1_UserNameRequired.initialvalue = "";
var Login1_PasswordRequired = document.all ? document.all["Login1_PasswordRequired"] : document.getElementById("Login1_PasswordRequired");
Login1_PasswordRequired.controltovalidate = "Login1_Password";
Login1_PasswordRequired.errormessage = "Password is required.";
Login1_PasswordRequired.validationGroup = "Login1";
Login1_PasswordRequired.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
Login1_PasswordRequired.initialvalue = "";
// -->
</script>
 
<div>
 
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQLMnrjfAgKUvNa1DwL666vYDAKC0q+kBgKnz 4ybCLXPbMESdcCdZO3cEJhvJRuijEx2" />
</div>
 
<script type="text/javascript">
<!--
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
    ValidatorOnLoad();
}
 
function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else {
        return true;
    }
}
// -->
</script>
 
<script type="text/javascript">
<!--
WebForm_AutoFocus('Login1');// -->
</script>
 
</form>
</body>
</html>
 

[Banfa]

You can always get a test viewing of some paltforms/browsers at http://browsershots.org/

[jhardman]

Thanks. Appreciate your comments. I always check w/Firefox. First issue, Pics overlay last text on page.

Hex,

Don't feel bad, but you made a very simple, newbie-type mistake. The problem is that you used two different methods for positioning elements on the page. The pictures, the "member's login" legend, and the form are all positioned absolutely on the page; their exact x, y, and z coordinates are specified. On the other hand, the final line (...password recovery) is positioned by a series of line breaks and spaces. This is a big mistake partly because different browsers and different systems define the sizes of line breaks and spaces differently. Even positioning the elements with tables would be a better idea (OH NO! drhowarddrfine is going to lynch me!)

I'm not sure how this will translate to VWD, but this line needs to be positioned in the same way the "member's login" was done. Does that make sense? Every other element on the page appears the same between safari and firefox, but this one line is about a half inch higher in firefox than it is in safari (on my computer, it is quite possible that this might appear different on someone else's) because it was positioned with a method which is interpretable and sloppy.

OK, I'm ready to look at the second problem now.

Jared

[HEX]

Jared,

Many thanks. Had no clue items should be always positioned in same manner.
Sending one of two pages which are probably caused by the same mistake(s).
Sending in segments because it is to big to post.

[HTML]
<!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>
SIGN UP
</title>
.Menu1_0 { background-color:white;visibility:hidden;display:none;positio n:absolute; left:0px;top:0px; }
.Menu1_1 { color:#990000;font-family:Verdana;font-size:8pt;text-decoration:none; }
.Menu1_2 { color:#990000;background-color:#FFFBD6;font-family:Verdana; font-size:8pt;height:4px;width:166px; }
.Menu1_3 { }
.Menu1_4 { padding:2px 5px 2px 5px; }
.Menu1_5 { }
.Menu1_6 { padding:2px 5px 2px 5px; }
.Menu1_7 { background-color:#FFFBD6; }
.Menu1_8 { }
.Menu1_9 { background-color:#FFCC66; }
.Menu1_10 { }
.Menu1_11 { background-color:#FFCC66; }
.Menu1_12 { color:White; }
.Menu1_13 { color:White;background-color:#990000; }
.Menu1_14 { color:White; }
.Menu1_15 { color:White;background-color:#990000; }

</style>
<body style="border-left-color: #0066ff; border-bottom-color: #0066ff; border-top-color: #0066ff; border-right-color: #0066ff; border-top-style: double; border-right-style: double; border-left-style: double; border-bottom-style: double; background-color: #ffffcc;">
<form name="form1" method="post" action="SIGNUP.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUL... [Admin: key removed for display].....j0st8=" />
</div>

<script type="text/javascript">
<!--
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="/WebResource.axd?d=MFKssAxxzargrsObBfvMqw2&t= 633105126532343750" type="text/javascript">


<script src="/WebResource.axd?d=U9kPKL-_5tppbbo5ZezJmw2&t= 633105126532343750" type="text/javascript">
<div>
<div>
<table cellspacing="0" cellpadding="1" rules="cols" border="1" id="GridView1" style="width:467px;height:133px;font-weight:normal;font-size:11pt; color:Black;border-width:1px;border-style:solid;border-color:Tan; background-color:LightGoldenrodYellow;border-collapse:collapse; z-index: 119; left: 208px;
position: absolute; top: 152px; text-align: center; border-left-color: #0066ff; border-bottom-color: #0066ff; color: #0033ff;
border-top-color: #0066ff; border-right-color: #0066ff; font-style: italic;">[/HTML]

[HEX]

        <caption>
            LADIES EARLY SESSION - Monday, November 05, 2007
        </caption>
            <th align="center" scope="col">PosLinkNAMEPosLinkNAME
        </tr>
            <td align="center">01 Ray, Diane                45  
 
        </tr>
            <td align="center">02 Murphy, Melanie           46  
        </tr>
            <td align="center">03 Ayers, Sue                47  
        </tr>
            <td align="center">04 Newman, Shirley           48  
 
        </tr>
            <td align="center">05  49  
        </tr>
            <td align="center">06  50  
        </tr>
            <td align="center">07  51  
 
        </tr>
            <td align="center">08  52  
        </tr>
            <td align="center">09  53  
        </tr>
            <td align="center">10  54  
 
        </tr>
            <td align="center">11  55  
        </tr>
            <td align="center">12  56  
        </tr>
            <td align="center">13  57  
 
        </tr>
            <td align="center">14  58  
        </tr>
            <td align="center">15  59  
        </tr>
            <td align="center">16  60  
 
        </tr>
            <td align="center">17  61  
        </tr>
            <td align="center">18  62  
        </tr>
            <td align="center">19  63  
 
        </tr>
            <td align="center">20  64  
        </tr>
            <td align="center">21  65  
        </tr>
            <td align="center">22  66  
 
        </tr>
            <td align="center">23  67  
        </tr>
            <td align="center">24  68  
        </tr>
            <td align="center">25  69  
 
        </tr>
            <td align="center">26  70  
        </tr>
            <td align="center">27  71  
        </tr>
            <td align="center">28  72  
 
        </tr>
            <td align="center">29  73  
        </tr>
            <td align="center">30  74  
        </tr>
            <td align="center">31  75  
 
        </tr>
            <td align="center">32  76  
        </tr>
            <td align="center">33  77  
        </tr>
            <td align="center">34  78  
 
        </tr>
            <td align="center">35  79  
        </tr>
            <td align="center">36  80  
        </tr>
            <td align="center">37  81  
 
        </tr>
            <td align="center">38  82  
        </tr>
            <td align="center">39  83  
        </tr>
            <td align="center">40  84  
 
        </tr>
            <td align="center">41  85  
        </tr>
            <td align="center">42  86  
        </tr>
            <td align="center">43  87  
 
        </tr>
            <td align="center">44  88  
        </tr>
            <td align="center">PosLinkNAMEPosLinkNAME
        </tr>
 
    </table>
</div>
        <span id="Label8" style="display:inline-block;font-size:10pt;font-weight:bold; width:52px;z-index: 100; left: 95px;
            color: #0066ff; font-style: italic; position: absolute; top: 511px; text-align: center;
            font-variant: small-caps">Or </span>
        <input type="submit" name="DeLinkButton" value="DE-LINK" id="DeLinkButton" style="color:Blue;width:92px; font-weight: bold;
            z-index: 101; left: 75px; color: #0033ff; font-style: italic; position: absolute;
            top: 531px; background-color: #ffff99; font-variant: small-caps" />
        <a href="#Menu1_SkipLink">[img]/WebResource.axd?d=mvui TowRgeZIsnP5jv4a7Q2&t=633105126532343750[/img]
        <td>
            <tr>
                <td style="white-space:nowrap;width:100%;">[img]/WebResource.axd? d=kAc4CRfV2HRK8Mv3p7NkzQYxs%20h-jLVZt5uDAxOGQS bE1&t=633105126532343750[/img]
 
            </tr>
        </table>
    </tr>
        <td>
            <tr>
                <td style="white-space:nowrap;width:100%;">[img]/WebResource.axd? d=kAc4CRfV2HRK8Mv3p7NkzQYxs%20h-jLVZt5uDAxOGQS bE1&t=633105126532343750[/img]
            </tr>
        </table>
 
    </tr>
        <td>
            <tr>
                <td style="white-space:nowrap;width:100%;">Club Members Page
            </tr>
        </table>
    </tr>
        <td>
 
            <tr>
                <td style="white-space:nowrap;width:100%;">Public Page
            </tr>
        </table>
    </tr>
        <td>
            <tr>
                <td style="white-space:nowrap;width:100%;">Member List
            </tr>
        </table>
    </tr>
        <td>
            <tr>
                <td style="white-space:nowrap;width:100%;">Singles Players
            </tr>
        </table>
    </tr>
        <td>
            <tr>
                <td style="white-space:nowrap;width:100%;">Meetings
            </tr>
        </table>
    </tr>
        <td>
 
            <tr>
                <td style="white-space:nowrap;width:100%;">Upcoming Events
            </tr>
        </table>
    </tr>
        <td>
            <tr>
                <td style="white-space:nowrap;width:100%;">Poll Place
            </tr>
        </table>
    </tr>
        <td>
            <tr>
                <td style="white-space:nowrap;width:100%;">Ballot Box
            </tr>
        </table>
 
    </tr>
        <td>
            <tr>
                <td style="white-space:nowrap;width:100%;">Change Password
            </tr>
        </table>
    </tr>
        <td>
 
            <tr>
                <td style="white-space:nowrap;width:100%;">Financials
            </tr>
        </table>
    </tr>
        <td>
            <tr>
                <td style="white-space:nowrap;width:100%;">Club Championships
            </tr>
        </table>
    </tr>
        <td>
            <tr>
                <td style="white-space:nowrap;width:100%;">Fall Frolic Results
            </tr>
        </table>
 
    </tr>
        <td>
            <tr>
                <td style="white-space:nowrap;width:100%;">Robson Cup Results
            </tr>
        </table>
    </tr>
        <td>
 
            <tr>
                <td style="white-space:nowrap;width:100%;">Video Library
            </tr>
        </table>
    </tr>
        <td>
            <tr>
                <td style="white-space:nowrap;width:100%;">Charity Programs
 
            </tr>
        </table>
    </tr>
        <td>
            <tr>
                <td style="white-space:nowrap;width:100%;">Photo Archives
            </tr>
        </table>
 
    </tr>
        <td>
            <tr>
                <td style="white-space:nowrap;width:100%;">Prime Time Court Lottery
            </tr>
        </table>
    </tr>
        <td>
 
            <tr>
                <td style="white-space:nowrap;width:100%;">Governing Documents[img]/WebResource.axd?d=kAc4CRfV2HRK8Mv3p7 NkzQYxs%20h-jLVZt5uDAxOGQSbE1&t=633105126532343 750[/img]
            </tr>
        </table>
    </tr>
        <td>
            <tr>
                <td style="white-space:nowrap;width:100%;">Standing Committees
 
            </tr>
        </table>
    </tr>
        <td>
            <tr>
                <td style="white-space:nowrap;width:100%;">Print Bucket
            </tr>
        </table>
 
    </tr>
</table>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="Menu1n22">
            <td>
                <tr>
                    <td style="white-space:nowrap;width:100%;">LADIES EARLY
                </tr>
            </table>
 

[HEX]

[HTML]</tr>
<td>

<tr>
<td style="white-space:nowrap;width:100%;">LADIES LATE
</tr>
</table>
</tr>
<td>


<tr>
<td style="white-space:nowrap;width:100%;">LADIES EXTRA
</tr>
</table>
</tr>
<td>

<tr>
<td style="white-space:nowrap;width:100%;">MENS EARLY

</tr>
</table>
</tr>
<td>

<tr>
<td style="white-space:nowrap;width:100%;">MENS LATE
</tr>
</table>

</tr>
<td>

<tr>
<td style="white-space:nowrap;width:100%;">MENS EXTRA
</tr>
</table>
</tr>
<td>


<tr>
<td style="white-space:nowrap;width:100%;">MIXED EARLY
</tr>
</table>
</tr>
<td>

<tr>
<td style="white-space:nowrap;width:100%;">MIXED LATE

</tr>
</table>
</tr>
<td>

<tr>
<td style="white-space:nowrap;width:100%;">MIXED EXTRA
</tr>
</table>

</tr>
</table>

<img src="/WebResource.axd?d=KiVyn0Qqalgm6vYy-GtiolNt3_xsLo49 2kuo4GuPjiI1&t=633105126532343750" alt="Scroll up" />
</div>

<img src="/WebResource.axd?d=tPxB-qr7FhRH8VHGIlG9ZNZlpATtOomq KUqVIy6CZik1&t=633105126532343750" alt="Scroll down" />
</div>
</div>

<table border="0" cellpadding="0" cellspacing="0">
<tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="Menu1n31">

<td>

<tr>
<td style="white-space:nowrap;width:100%;">SUNDAY
</tr>
</table>
</tr>
<td>

<tr>

<td style="white-space:nowrap;width:100%;">MONDAY
</tr>
</table>
</tr>
<td>

<tr>
<td style="white-space:nowrap;width:100%;">TUESDAY
</tr>

</table>
</tr>
<td>

<tr>
<td style="white-space:nowrap;width:100%;">WEDNESDAY
</tr>
</table>
</tr>

<td>

<tr>
<td style="white-space:nowrap;width:100%;">THURSDAY
</tr>
</table>
</tr>
<td>

<tr>

<td style="white-space:nowrap;width:100%;">FRIDAY
</tr>
</table>
</tr>
<td>

<tr>
<td style="white-space:nowrap;width:100%;">SATURDAY
</tr>

</table>
</tr>
</table>

<img src="/WebResource.axd?d=KiVyn0Qqalgm6vYy-GtiolNt3_xsLo492 kuo4GuPjiI1&t=633105126532343750" alt="Scroll up" />
</div>

<img src="/WebResource.axd?d=tPxB-qr7FhRH8VHGIlG9ZNZlpATtOom qKUqVIy6CZik1&t=633105126532343750" alt="Scroll down" />
</div>
</div>

<table border="0" cellpadding="0" cellspacing="0">

<tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="Menu1n38">
<td>

<tr>
<td style="white-space:nowrap;width:100%;">Bylaws
</tr>
</table>
</tr>
<td>


<tr>
<td style="white-space:nowrap;width:100%;">Rules
</tr>
</table>
</tr>
</table>

<img src="/WebResource.axd?d=KiVyn0Qqalgm6vYy-GtiolNt3_xsLo492 kuo4GuPjiI1&t=633105126532343750" alt="Scroll up" />
</div>

<img src="/WebResource.axd?d=tPxB-qr7FhRH8VHGIlG9ZNZlpATtOom qKUqVIy6CZik1&t=633105126532343750" alt="Scroll down" />
</div>
</div>

<span id="Label5" style="display:inline-block;font-size:10pt;font-weight:bold;width:149px; z-index: 103; left: 47px;
color: #0066ff; font-style: italic; position: absolute; top: 426px; text-align: center;
font-variant: small-caps">(Once Per Session!)</span>
<input type="submit" name="SignUpButton" value="SIGN UP" id="SignUpButton" style="color:#0066CC;width:92px;font-weight: bold;
z-index: 104; left: 75px; color: #0033ff; font-style: italic; position: absolute;
top: 353px; background-color: #ffff99; font-variant: small-caps" />
<span id="Label7" style="display:inline-block;font-weight:bold;text-decoration:underline; width:127px;z-index: 105;
left: 692px; color: royalblue; font-style: italic; position: absolute; top: 171px;
text-align: center; font-variant: small-caps">Places To Go</span>
<input type="submit" name="ScratchButton" value="SCRATCH" id="ScratchButton" style="color:Blue;width:92px;font-weight: bold;
z-index: 107; left: 75px; color: #0033ff; font-style: italic; position: absolute;
top: 395px; background-color: #ffff99; font-variant: small-caps" />
<span id="LoginName1" style="display:inline-block;font-size:14pt;height:23px;width:146px; font-weight: bold;
z-index: 108; left: 425px; color: #0066ff; font-style: italic; position: absolute;
top: 33px; text-align: left; font-variant: small-caps">hex</span>


<span id="Label9" style="display:inline-block;height:22px;width:66px;font-weight: bold; z-index: 109; left: 359px;
color: #0066ff; font-style: italic; position: absolute; top: 33px; text-align: center;
font-variant: small-caps">Hello...</span>


[/HTML]

[jhardman]

that's OK, I can still see the code when I go to reply. I'll look it over and see what I see.

Jared

[MMcCarthy]

Jared

I had to remove some of the code from the last post to make it display so see this post for the last section.

Mary

[HTML]
<select name="DropDownList1" onchange="javascript:setTimeout('__doPostBack(\'Dr opDownList1\',\'\')', 0)" id="DropDownList1" style="font-size:10pt;width:62px;font-weight: bold;
z-index: 110; border-left-color: #0066ff; left: 90px; border-bottom-color: #0066ff;
color: #0033ff; border-top-style: double; border-top-color: #0066ff; border-right-style: double;
border-left-style: double; position: absolute; top: 486px; background-color: #ffffcc;
text-align: center; border-right-color: #0066ff; border-bottom-style: double; font-style: italic; font-variant: small-caps;">
<option selected="selected" value="NO">NO
<option value="01">01
<option value="02">02
<option value="03">03

<option value="04">04
<option value="05">05
<option value="06">06
<option value="07">07
<option value="08">08
<option value="09">09

<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15

<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21

<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27

<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
<option value="32">32
<option value="33">33

<option value="34">34
<option value="35">35
<option value="36">36
<option value="37">37
<option value="38">38
<option value="39">39

<option value="40">40
<option value="41">41
<option value="42">42
<option value="43">43
<option value="44">44
<option value="45">45

<option value="46">46
<option value="47">47
<option value="48">48
<option value="49">49
<option value="50">50
<option value="51">51

<option value="52">52
<option value="53">53
<option value="54">54
<option value="55">55
<option value="56">56
<option value="57">57

<option value="58">58
<option value="59">59
<option value="60">60
<option value="61">61
<option value="62">62
<option value="63">63

<option value="64">64
<option value="65">65
<option value="66">66
<option value="67">67
<option value="68">68
<option value="69">69

<option value="70">70
<option value="71">71
<option value="72">72
<option value="73">73
<option value="74">74
<option value="75">75

<option value="76">76
<option value="77">77
<option value="78">78
<option value="79">79
<option value="80">80
<option value="81">81

<option value="82">82
<option value="83">83
<option value="84">84
<option value="85">85
<option value="86">86
<option value="87">87

<option value="88">88
<option value="">

</select>
</div>
<select name="SessionList" onchange="javascript:setTimeout('__doPostBack(\'Se ssionList\',\'\')', 0)" id="SessionList" title="Select a Session for Sign Up" style="color:Blue;font-size:9pt;font-weight:normal;width:233px; font-weight: normal;
z-index: 111; border-left-color: #0066ff; left: 331px; border-bottom-color: #0066ff;
color: #0033ff; border-top-style: double; border-top-color: #0066ff; border-right-style: double;
border-left-style: double; position: absolute; top: 98px; background-color: #ffffcc;
text-align: center; border-right-color: #0066ff; border-bottom-style: double">
<option selected="selected" value="LADIES EARLY SESSION MONDAY">LADIES EARLY SESSION MONDAY
<option value="LADIES LATE SESSION MONDAY">LADIES LATE SESSION MONDAY

<option value="LADIES EXTRA SESSION MONDAY">LADIES EXTRA SESSION MONDAY
<option value="MENS EARLY SESSION TUESDAY">MENS EARLY SESSION TUESDAY
<option value="MENS LATE SESSION TUESDAY">MENS LATE SESSION TUESDAY
<option value="MENS EXTRA SESSION TUESDAY">MENS EXTRA SESSION TUESDAY
<option value="MENS EARLY SESSION THURSDAY">MENS EARLY SESSION THURSDAY
<option value="MENS LATE SESSION THURSDAY">MENS LATE SESSION THURSDAY

<option value="MENS EXTRA SESSION THURSDAY">MENS EXTRA SESSION THURSDAY
<option value="LADIES EARLY SESSION FRIDAY">LADIES EARLY SESSION FRIDAY
<option value="LADIES LATE SESSION FRIDAY">LADIES LATE SESSION FRIDAY
<option value="LADIES EXTRA SESSION FRIDAY">LADIES EXTRA SESSION FRIDAY
<option value="MIXED EARLY SESSION SATURDAY">MIXED EARLY SESSION SATURDAY
<option value="MIXED LATE SESSION SATURDAY">MIXED LATE SESSION SATURDAY

<option value="MIXED EXTRA SESSION SATURDAY">MIXED EXTRA SESSION SATURDAY

</select>
<span id="Label1" style="display:inline-block;font-weight:bold;width:229px;z-index: 112; left: 333px; color: red;
font-style: italic; position: absolute; top: 66px; text-align: center; font-variant: small-caps">First Make a Selection</span>
<span id="Label2" style="display:inline-block;color:#0066FF;font-size:10pt; font-weight:bold; width:69px;z-index: 113; left: 87px; color: #0066ff;
font-style: italic; position: absolute; top: 325px; text-align: center; font-variant: small-caps">You May</span>
<span id="Label6" style="display:inline-block;font-size:10pt;font-weight:bold;width:126px; z-index: 114; left: 58px;
color: #0066ff; font-style: italic; position: absolute; top: 463px; text-align: center;
font-variant: small-caps">Select a Linkee</span>
<span id="Label4" style="display:inline-block;font-size:10pt;font-weight:bold;width:53px; z-index: 115; left: 95px; color: #0066ff;
font-style: italic; position: absolute; top: 379px; text-align: center; font-variant: small-caps">Or</span>

<div>
<table cellspacing="0" cellpadding="4" border="0" id="DetailsView1" style="color:Blue;font-size:8pt;font-weight:bold;text-decoration:none; height:22px;width:155px;border-collapse:collapse;z-index: 116; border-left-color: #0066ff; left: 43px; border-bottom-color: #0066ff;
color: #0066ff; border-top-color: #0066ff; font-style: italic; position: absolute; top: 172px;
text-align: center; font-variant: small-caps; border-right-color: #0066ff;">
<caption>
Organized Play Dates Open For Sign Up
</caption>
<td style="color:Blue;background-color:#FFFF99;font-weight:bold;">Monday 11/5/2007
</tr>
<td style="color:Blue;background-color:#FFFF99;font-weight:bold;">Tuesday 11/6/2007

</tr>
<td style="color:Blue;background-color:#FFFF99;font-weight:bold;">Thursday 11/8/2007
</tr>
<td style="color:Blue;background-color:#FFFF99;font-weight:bold;">Friday 11/9/2007
</tr>
<td style="color:Blue;background-color:#FFFF99;font-weight:bold;">Saturday 11/10/2007

</tr>
</table>
</div>

<a id="LoginStatus1" href="javascript:__doPostBack('LoginStatus1$ctl00' ,'')" style="display:inline-block;font-weight:bold;width:135px;z-index: 118; left: 694px;
color: #0033ff; font-style: italic; position: absolute; top: 66px; text-align: center;
font-variant: small-caps">Members Logout</a>
<br />
<br />
<br />
<br />
<br />

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
















<br />



<script type="text/javascript">
<!--
var Menu1_Data = new Object();
Menu1_Data.disappearAfter = 500;
Menu1_Data.horizontalOffset = 2;
Menu1_Data.verticalOffset = 0;
Menu1_Data.hoverClass = 'Menu1_15';
Menu1_Data.hoverHyperLinkClass = 'Menu1_14';
Menu1_Data.staticHoverClass = 'Menu1_13';
Menu1_Data.staticHoverHyperLinkClass = 'Menu1_12';
// -->
</script>
</form>
</body>
</html>
[/HTML]

[jhardman]

This is not valid HTML (any version) at all. There is no way that this passed w3c's validator. Even looking at these few lines I would have to say it could never work.

            <th align="center" scope="col">PosLinkNAMEPosLinkNAME
        </tr>
            <td align="center">01 Ray, Diane                45  
 
        </tr>
            <td align="center">02 Murphy, Melanie           46  
        </tr>

...

    </tr>
        <td>
 
            <tr>
                <td style="white-space:nowrap;width:100%;">Video Library
            </tr>
        </table>
    </tr>
        <td>
            <tr>
                <td style="white-space:nowrap;width:100%;">Charity Programs
 
            </tr>
        </table>
    </tr>

The difference in behaviors (I almost spelled that ...iours, shows these Brits are a bad influence) is caused by different browsers taking a different approach when they come to invalid code. Safari tends to ignore it, IE tries to guess what you meant based on some complex algorithm. The fact that you got it to display how you wanted in any browser is a miracle. VWD is generating this terrible code? I would ask for your money back. The code keeps closing the row and the table and doesn't close the table cell, and that makes no sense.

On the third post of the code there is a long segment of <br> and &nbsp; which is the same as the problem I mentioned before.

Jared

[MMcCarthy]

Jared

It might be an idea to move this to one of the techncial forums as it has changed from a compatibility issue to a code one.

Mary

[jhardman]

I ran your page through w3c's validator which found 607 errors. Now some of these you probably don't need to worry about (not including a text encoding statement doesn't hurt anybody unless you need strange characters, and I haven't seen browsers mis-interpret ampersands in a URL querystring in years) but as I said earlier, many many tags are being closed unnecessarily. The page is not showing up correctly because of all these errors.

Jared

[jhardman]

Jared

It might be an idea to move this to one of the techncial forums as it has changed from a compatibility issue to a code one.

Mary

Sounds good to me, the HTML forum looks like the logical choice. I don't have moderator privileges in this forum, so you will need to do it.

Jared

[HEX]

Jared,

Thanks for your efforts. Went back to W3C site and again pasted in the code being presented to Firefox which displays OK there, and I got this message:

This Page Is Valid XHTML 1.0 Transitional!

I don't get it.

I must be out to lunch there as well. This page in question renders fine with Firefox and IE. This page renders badly with the Mac V3.0.4 Safari. The older Mac Safari's seem to accept it as well. The other older Mac Safari and Mac Firefox only had a problem with simple page where you pointed out the Positioning issue I need to fix. Appreciate I've some mistakes, but also I may have posted it wrong when I segmented it. I'm going back to fix the problem on the simple page you solved regarding positioning. Meanwhile the current page in question is too big to post or attach normally, so I could sent it to you another way?

Obviously, this world has a ways to go before it is uniform in handling bad pages.

[jhardman]

Hex,

A link would be fine and probably preferable, but if that doesn't work, post it all. I won't be able to see the whole code from the main view, but I can still see it when I hit "reply". Click on the edit button and type in as the reason for editing, "Please don't edit this post. The code needs to stay intact. Click 'reply' if you would like to see the code"

Jared

[HEX]

Jared,

Thanks. Do you wish me to try and segment again with each segment reply having the edit reason you mentioned? I can't get it all in one reply it's too big.

[MMcCarthy]

Jared,

Thanks. Do you wish me to try and segment again with each segment reply having the edit reason you mentioned? I can't get it all in one reply it's too big.

Can I make a suggestion.

Put it in a txt file. Then post a reply with at least 20 characters. Edit the reply and you will see an option to attach a file. upload the txt file there.

Mary

[HEX]

Can I make a suggestion.

Put it in a txt file. Then post a reply with at least 20 characters. Edit the reply and you will see an option to attach a file. upload the txt file there.

Mary

Mary,

Thanks. Once before went through this. If it's too big as an attachment or reply you get a nebulus error message about needing a subject. I forget what the limit was but the page exceeds it. Unlike the W3C site you can't get it all in.

[HEX]

Jared,

Thanks for your asistance. Was able to resolve the simple page problem with your help.

Have downloaded and installed the latest Safari which the one MAC user had page problems with and I can now see the problems. Playing with one of the pages to see if I can see what the trigger is. Again the page is one that worked with Firefox(testing browser) and IE and the older Safari browser. This page passed with W3C as well. It appears to be a positioning problem on a menu which is positioned absolutely. The other pages have the same issue, but one at a time for now. All other items on page are OK. Eliminated stuff to see if any change but no change. Think I see something else to deal with and am pursuing. Please understand I'm making an slow effort at this stuff.

Appreciate any thoughts you may have.

[jhardman]

Mary,

Thanks. Once before went through this. If it's too big as an attachment or reply you get a nebulous error message about needing a subject. I forget what the limit was but the page exceeds it. Unlike the W3C site you can't get it all in.

Hex,

and you can't link to it, huh? I will temporarily activate my email notification so you can send me an email. A couple of thoughts, I use version 2 of Safari, (latest is 3) so I may not be able to see the problem. Second, I am going on a trip tomorrow and I will not be able to check here regularly for a week, so if it isn't resolved before then, I probably won't be much help to you next week.

Jared

[drhowarddrfine]

Is developing a site with Windows and targeting IE and Firefox as the standard site checkers not a good way to go?

It is the best way to go. You should first check your site using Firefox and Safari, then IE.

Which worlds browsers best represents a testing check for a standard to follow?

Firefox is better due to the development tools. Otherwise, Opera with Safari right behind.

The site is built using ASP Net 2.0. and VWD.

.NET stuff tend to produce non-standard and superfluous markup.
I have a few minutes and will look at the post above, which I assume is the same as being PM'd to Jared.

[drhowarddrfine]

I have a few minutes and will look at the post above, which I assume is the same as being PM'd to Jared.

Well, that didn't work so I guess I mis-copied it. As Jared said, there are a ton of errors, including tags that aren't entered correctly.

Without the images, it's also difficult to debug. And I have to say it: never use tables for layout.

[MMcCarthy]

Mary,

Thanks. Once before went through this. If it's too big as an attachment or reply you get a nebulus error message about needing a subject. I forget what the limit was but the page exceeds it. Unlike the W3C site you can't get it all in.

Hi Hex.

If you zip the file you should be able to attach up to 100k.

Mary

[HEX]

Folks,

I know I'm way over my head, however what I was pursuing bore fruit. I can create a very simple page which illustrates the problem. This validates OK with W3C and renders fine with Firefox but not the new Safari. It's simply a page with a one item menu which has a sub menu. It appears Class info is causing problem when there is a sub menu. The sub menu class info has an absolute position reference which is apparently driving the new Safari to place the menu at that reference. Below is code sent to Browsers and following that is the ASP source. Comments?

Thanks

 
 
<!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>
    Untitled Page
</title><style type="text/css">
    .Menu1_0 { background-color:white;visibility:hidden;display:none; position:absolute;left:0px;top:0px; }
    .Menu1_1 { color:#990000;font-family:Verdana;font-size:0.8em;text-decoration:none; }
    .Menu1_2 { color:#990000;background-color:#FFFBD6;font-family:Verdana; font-size:0.8em; }
    .Menu1_3 {  }
    .Menu1_4 { padding:2px 5px 2px 5px; }
    .Menu1_5 {  }
    .Menu1_6 { padding:2px 5px 2px 5px; }
    .Menu1_7 { background-color:#FFFBD6; }
    .Menu1_8 {  }
    .Menu1_9 { background-color:#FFCC66; }
    .Menu1_10 {  }
    .Menu1_11 { background-color:#FFCC66; }
    .Menu1_12 { color:White; }
    .Menu1_13 { color:White;background-color:#990000; }
    .Menu1_14 { color:White; }
    .Menu1_15 { color:White;background-color:#990000; }
 
</style></head>
<body>
    <form name="form1" method="post" action="test.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="/wEPDwULLTEwNTEwMzgzNThkZKDH62jNiDbO/ y4TMgmxJKSJ1C6t" />
</div>
 
<script type="text/javascript">
<!--
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="/WebResource.axd?d=MFKssAxxzargrsObBfvMqw2&amp; t=633105126532343750" type="text/javascript"></script>
 
 
<script src="/WebResource.axd?d=U9kPKL-_5tppbbo5ZezJmw2&amp; t=633105126532343750" type="text/javascript"></script>
    <div>
        <a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=mvuiTowRgeZIsnP5jv4a7Q2&amp; t=633105126532343750" width="0" height="0" style="border-width:0px;" /></a><table id="Menu1" class="Menu1_2" cellpadding="0" cellspacing="0" border="0" style="z-index: 100; left: 376px; position: absolute;
            top: 167px">
    <tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="Menu1n0">
        <td><table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
 
            <tr>
                <td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_3" href="javascript:__doPostBack('Menu1','New Item')">New Item</a></td><td style="width:0;"><img src="/WebResource.axd?d=kAc4CRfV2HRK8Mv3p7Nkz QYxsh-jLVZt5uDAxOGQSbE1&amp;t=633105126532343750" alt="Expand New Item" style="border-style:none;vertical-align:middle;" /></td>
            </tr>
        </table></td>
    </tr>
</table><div id="Menu1n0Items" class="Menu1_0 Menu1_7">
    <table border="0" cellpadding="0" cellspacing="0">
        <tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="Menu1n1">
            <td><table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
 
                <tr>
                    <td style="white-space:nowrap;width:100%;"><a class="Menu1_1 Menu1_5" href="javascript:__doPostBack('Menu1','New Item\\New Item')">New Item</a></td>
                </tr>
            </table></td>
        </tr>
    </table><div class="Menu1_6 Menu1_0" id="Menu1n0ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
        <img src="/WebResource.axd?d=KiVyn0Qqalgm6vYy-GtiolNt3_xs Lo492kuo4GuPjiI1&amp;t=633105126532343750" alt="Scroll up" />
    </div><div class="Menu1_6 Menu1_0" id="Menu1n0ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
 
        <img src="/WebResource.axd?d=tPxB-qr7FhRH8VHGIlG9ZNZlpATt OomqKUqVIy6CZik1&amp;t=633105126532343750" alt="Scroll down" />
    </div>
</div><a id="Menu1_SkipLink"></a>
 
    </div>
 
<div>
 
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLY45XICwLb4urtDAKEspGXDB4GAqFLj/ JrGrY6c3/zCVc86/S1" />
</div>
 
<script type="text/javascript">
<!--
var Menu1_Data = new Object();
Menu1_Data.disappearAfter = 500;
Menu1_Data.horizontalOffset = 2;
Menu1_Data.verticalOffset = 0;
Menu1_Data.hoverClass = 'Menu1_15';
Menu1_Data.hoverHyperLinkClass = 'Menu1_14';
Menu1_Data.staticHoverClass = 'Menu1_13';
Menu1_Data.staticHoverHyperLinkClass = 'Menu1_12';
// -->
</script>
</form>
 
</body>
</html>
 
 

ASP Source

 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="MemberPages_test" %>
 
<!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 runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Menu ID="Menu1" runat="server" Style="z-index: 100; left: 376px; position: absolute;
            top: 167px" BackColor="#FFFBD6" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#990000" StaticSubMenuIndent="10px">
            <Items>
                <asp:MenuItem Text="New Item" Value="New Item">
                    <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                </asp:MenuItem>
            </Items>
            <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <DynamicHoverStyle BackColor="#990000" ForeColor="White" />
            <DynamicMenuStyle BackColor="#FFFBD6" />
            <StaticSelectedStyle BackColor="#FFCC66" />
            <DynamicSelectedStyle BackColor="#FFCC66" />
            <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <StaticHoverStyle BackColor="#990000" ForeColor="White" />
        </asp:Menu>
 
    </div>
    </form>
</body>
</html>
 
 

[drhowarddrfine]

The problem is some of that is created by the asp.net and javascript stuff and we have no way of recreating that. Do you have a link?

[HEX]

Thanks. Moved the page so it can be accessed.

Try http://www.sbtennis.us/test.aspx

[drhowarddrfine]

It looks like Safari is screwing this up. I don't have access to a Mac right now.

[HEX]

Thanks. I'm grateful for your efforts. This is my first web programming experience and it sure feels good to be able to have someone else looking over my shoulder. If this indeed is an issue which belongs to the new Safari, how does it get reported, etc?

[pbmods]

Heya, Hex.

Do you have a screenshot of what the page should look like?

[HEX]

Heya, Hex.

Do you have a screenshot of what the page should look like?

Don't have a screenshot. The page the link references is a tiny do nothing page used to illustrate the problem. I isolated the problem and then created the page to show it in simple terms. If you have access to Firefox or IE or old Safari, it will render OK as a tiny item about mid page. It takes access by the new Safari to show how the one item menu gets repositioned. Don't know why and I don't know what the resolution is at this point.

[drhowarddrfine]

[jhardman]

Don't have a screenshot. The page the link references is a tiny do nothing page used to illustrate the problem. I isolated the problem and then created the page to show it in simple terms. If you have access to Firefox or IE or old Safari, it will render OK as a tiny item about mid page. It takes access by the new Safari to show how the one item menu gets repositioned. Don't know why and I don't know what the resolution is at this point.

This is strange. The source in ff doesn't match the source in safari. I ran it through the validator and got the following error: "valign" is not a valid attribute. Then I searched through the source of the file in ff, and valign is not found. On the validator page it gave the context as

343750" alt="Expand New Item" valign="middle" /></td>

so I searched for the word "middle" and the onloy time this was used was in

343750" alt="Expand New Item" style="border-style:none;vertical-align:middle;"

This says essentially the same thing, but using the correct css attribute for vertical positioning. Then I got to wondering how the code looked to safari, and the line in question says:

343750" alt="Expand New Item" align="absmiddle" style="border-width:0px;"

Again, this says essentially the same thing, but I don't believe "absmiddle" is a valid value for the align attribute.

What is happening, as far as I can tell, is .NET is trying to send different versions of the page to different browsers. The ironic part is that safari should be able to handle the valid code that ff gets just fine, but .NET is second guessing it and sending it invalid code that it doesn't understand. anyway, I didn't know that .Net did that, but I now think this is a .NET issue (sorry, I'm the one who said to put it in the HTML forum in the first place)

Jared

[MMcCarthy]

Hey Jared

Do you want to leave it here and ask for help from .NET or move it to .NET?

Mary

[drhowarddrfine]

Yes, that's very possible, but, iirc, the same markup should display the same as you said. And you are right, there is no such thing as absmiddle. None of that should be in xhtml anyway. Like I said, asp.net does not write very good markup.

[jhardman]

Hey Jared

Do you want to leave it here and ask for help from .NET or move it to .NET?

Mary

Let's ask a .NET expert to weigh in here and if he or she thinks it would do better over there we can move it.

Jared

[MMcCarthy]

Let's ask a .NET expert to weigh in here and if he or she thinks it would do better over there we can move it.

Jared

I've asked the .NET people to drop in and have a look.

[HEX]

This is strange. The source in ff doesn't match the source in safari. I ran it through the validator and got the following error: "valign" is not a valid attribute. Then I searched through the source of the file in ff, and valign is not found. On the validator page it gave the context as

343750" alt="Expand New Item" valign="middle" /></td>

so I searched for the word "middle" and the onloy time this was used was in

343750" alt="Expand New Item" style="border-style:none;vertical-align:middle;"

This says essentially the same thing, but using the correct css attribute for vertical positioning. Then I got to wondering how the code looked to safari, and the line in question says:

343750" alt="Expand New Item" align="absmiddle" style="border-width:0px;"

Again, this says essentially the same thing, but I don't believe "absmiddle" is a valid value for the align attribute.

What is happening, as far as I can tell, is .NET is trying to send different versions of the page to different browsers. The ironic part is that safari should be able to handle the valid code that ff gets just fine, but .NET is second guessing it and sending it invalid code that it doesn't understand. anyway, I didn't know that .Net did that, but I now think this is a .NET issue (sorry, I'm the one who said to put it in the HTML forum in the first place)

Jared

Jared,

Again, thanks for your efforts. If ASP is the culprit here, which appears to be the case, then the only workaround in the ASP code is to not use submenu in the menu control. Maybe ASP folks will come up with something else. This stuff is perplexing and, in my view, this world needs much improvement. It shouldn't be this weird.

[Plater]

I would hope that IIS would send the same version of source code, but I know better. I also know that they probably attempted to "sift" the content sent to client based on the http headers sent.

If anyone wants to toy around with it, use a telnet session and play around with the headers to see if it sends you different content.

I would hope that IIS only uses the various ACCEPT headers to determine what to send (if decision making must happen at all) and NOT the client identification string. *sigh*

[Plater]

Well of course.
The User-Agent header greatly effects what is sent to the client.
All I had to do was change this:

User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; InfoPath.1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)
 

to this:

User-Agent: Mozilla/4.0 
 

And the http response sent back munged up html without any css script

[HEX]

Well of course.
The User-Agent header greatly effects what is sent to the client.
All I had to do was change this:

User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; InfoPath.1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)
 

to this:

User-Agent: Mozilla/4.0 
 

And the http response sent back munged up html without any css script

I'm not understanding this issue. Have no IIS, using VWD, ASP Net 2.0 only. MSDN says XHTMLConformance is Transistional by default. Current Web config omits any reference so it should be Transistional. The code sent to OS Firefox, IE browsers but not OS Safari checks out by W3C site as valid XHTML 1.0 Transistional. Why does ASP Net 2.0 server send different non-compliant code to the Safari browser? This was determined by contributor Jared. If the same code was sent to Safari that is being sent to Firefox and IE could it work?

So far according to Browser Shots most browsers render OK, but MAC Safari 3x and 2x do not, yet Mac Firefox OK. I'm a newbie so any help is appreciated.

Thanks

[Plater]

Ok, so where I say "IIS", replace that with "VWD"

The test server you linked us to was running IIS6 when it served up the page though.

[jhardman]

Well of course.
The User-Agent header greatly effects what is sent to the client.
All I had to do was change this:

User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; InfoPath.1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)
 

to this:

User-Agent: Mozilla/4.0 
 

And the http response sent back munged up html without any css script

So is it .NET causing the problem or IIS?

And is there a way to change the default data that is sent for different user-agents? Could we get it to send the same info for safari that it sends to ff? and if so, who should we ask to get good instructions?

Jared

[HEX]

Ok, so where I say "IIS", replace that with "VWD"

The test server you linked us to was running IIS6 when it served up the page though.

Thanks, appreciate your comments. Wasn't being picky, just ignorant about what you said I'm unexperienced. However, what I did was set Page.ClientTarget="uplevel" (alias for user agent mozilla,etc.) in the test page load event and then did some more testing. That made no difference. Tryed test with two menu controls, one with sub menu, one without. Both went to wrong position. Then, I tryed with just the menu with no submenu by itself. Again wrong position. However, ran that through W3C and this time the code to Safari was Valid! It no longer had the aforementioned "absmiddle" mentioned earlier in this thread. So that probably is a red herring.

I keep noticing Class info in the code being sent which has an absolute position which could take the menu to the position where it ends up, but that goes to all the browsers and isn't referenced in the new page. I wonder if for some reason Safari is using that.

<style type="text/css">
    .Menu2_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
    .Menu2_1 { color:#990000;font-family:Verdana;font-size:0.8em;text-decoration:none; }
    .Menu2_2 { color:#990000;background-color:#FFFBD6;font-family:Verdana;font-size:0.8em; }
    .Menu2_3 {  }
    .Menu2_4 { padding:2px 5px 2px 5px; }
    .Menu2_5 {  }
    .Menu2_6 { padding:2px 5px 2px 5px; }
    .Menu2_7 { background-color:#FFFBD6; }
    .Menu2_8 {  }
    .Menu2_9 { background-color:#FFCC66; }
    .Menu2_10 {  }
    .Menu2_11 { background-color:#FFCC66; }
    .Menu2_12 { color:White; }
    .Menu2_13 { color:White;background-color:#990000; }
    .Menu2_14 { color:White; }
    .Menu2_15 { color:White;background-color:#990000; }
 
</style>
 
 

So, I guess I'm back at the Safari ballpark. I was relying on ASP with auto detection and browser definitions to do the right thing because the default was suppose to only send valid transitional code. However, there is no Safari definition and it probably uses default definition and maybe that explained the 'absmiddle" rendering.

So now, if the code is valid transistional and client target was no help am I looking at Safari as the culprit? Or, probably some other thing I'm ignorant about?

Any thoughts?

Thanks

[HEX]

STANDBY. I moved the code for client target to page preint and it made a difference. Have submitted to browershots and am awaiting results to see if this clears up the whole matter or just another step forward.

 
 Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit
        If InStr(Request.ServerVariables("http_user_agent"), "Safari") Then
            Page.ClientTarget = "uplevel"
        End If
 End Sub 
 
 

[HEX]

The browser shots look good. Maybe a slight difference with the MAC screens. Next will put the code into my real pages with menu controls, and see what I can get.
Still don't fully comprehend why this is necessary for only Safari. Who really has responsibility for this issue, ASP, Safari, or ignorant me?

Thanks to all contributors on this for their expertise and patience thus far. Will post results.

[HEX]

That did it. Everything looks as expected now. It's mind boggling to have to put code in pages that have a menu control just for Safari. I'm too inexperienced to grasp the reason why this is the case. Not sure who is not compatible with who. Who owns responsibility for this kind of thing?
It seems to me, from a Newbie viewpoint, that this stuff has a long way to go to get sensible.
If someone wishes to point out the rationale for this issues behaviour, this ignorant individual would love to hear it.