Spry menu dropdown not showing on safari

Hello at my site at www.meadowlarkco.com/indexnewsite_test6.htm I have a spry menu with a dropdown beneath contact us. The menu brings up the dropdowns fine when I view it on my PC in IE, Safari, Firefox, Chrome, but on my ipad on safari the dropdown only comes up when viewing from the locations page.

Any help would be appreciated to let me know what needs to be changed to get this resolved.

thanks

I’ve made those changes and that looks good, where Im assuming its adjusting the menu size to the width of the text on the dropdown?

What safari browser are you using If I may ask? On my phone and Ipad its OS 5 which came out a couple weeks ago?

At this point we’re getting ready to put the site out there so Im trying to just get the menu working for now, do you see anything which may be causing the menu dropdown to not work on my iphone/ipad except on the locations page.

thanks for all your help again

On Safari Mac (not iPad), with text at the default size of 16px, the Contact menu item wraps to the next line. On the Locations page it is hidden beneath the map.

The wrapping problem is due to the menu items fitting too tightly to the width of the page, leaving insufficient breathing space for differences in browser number rounding and font size. I suggest reducing the right padding of the anchors to 19px, to match the left. Note the shorthand used below, the second of the three padding values applies to both right and left.

ul.MenuBarHorizontal a {
    background-color: #EAEAD6;
    color: #5A7E66;
    cursor: pointer;
    display: block;
    font-family: Georgia,"Times New Roman",Times,serif;
    height: 35px;
    padding: 15px 19px 9px;
    text-align: center;
    text-decoration: none;
}

The menu - ul.MenuBarHorizontal - currently specifies a font-size of 12pt. Points are considered suitable for print but it is advisable to use a relative unit for screen, such as em. In this case, the default font-size of 1em is suitable, so the font-size can be removed from ul.MenuBarHorizontal

ul.MenuBarHorizontal {
    cursor: default;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: auto;
}

In case the user increases text-size sufficiently for menu items to wrap to a new line, give .menu .spry position:relative and z-index:10 to stack it above the map.

.menu .Spry {
    clear: both;
    float: right;
    position: relative;
    z-index: 10;
}

Relying on javascript to display a dropdown menu, as Spry does, is not ideal. It’s easily done with CSS and more accessible. Deathshadow90 has come up with a good one, and [URL=“http://www.cutcodedown.com/codeExamples/menuDemo/templateWithScript.html”]another one with scripting to improve support for users who navigate links with a keyboard.

Do you believe the changes you suggest will fix the problem?

So is my drop down menu appearing behind?

I’ve tested the CSS on the site using the Safari Web Inspector.

At present, yes, the Contact menu item wraps to a new line on each page and on the Locations page is hidden behind the map.

could you take a look and see if it appears right now? On IE on my sales.php, csr.php, and dispatch.php the dropdown is a little wide? Can you see if it looks like this on yours and what can I do do shorten it do its even witht the background.

thanks for all your help.

on my iphone the dropdown doesn’t show up still except for the locations page?

the dropdown shows up in everythiing I’ve checked with Safari’s developer user agent except IE7 and Safari 5.1.1, any help would be appreciated as to what is needing to be changed so my dropdown menu will show up?

thanks

Are you using Safari’s User Agent switching as a substitute for testing in different browsers? It doesn’t really work in that way. If the site uses browser sniffing or media queries then the User Agent will reflect differences, but the rendering engine of other browsers is not emulated.

I don’t have an iPhone to hand but would guess, judging by the shifting position of the menu items between pages, that the absence of the menu item on some pages may be due to discrepancies in their code.

The difference in width of the dropdown and its parent li are due to the dropdown ul and li not sharing a defined or inherited width with the parent.

To match the width of the dropdown ul and li to their parent li, you could give the following selectors width:100%;

ul.MenuBarHorizontal ul (width not currently set)

ul.MenuBarHorizontal ul li (width currently set to 10em)

For IE7 and IE6, the width value of ul.MenuBarHorizontal ul li would need to be auto, so you’d need to subsequently target those browsers with additional, filtered rules i.e. preceding the selector with * html for IE6 and * + html for IE7.

The best course, in my opinion, would be to drop Spry and use a CSS dropdown menu via PHP include.

Safari 5.0.5.

I’ve not identified any obvious cause. It’s difficult when the problem isn’t visible. In your position, I’d first run the pages through the W3 validator and fix errors. Then study the code for obvious differences, and if that produced no result, set up a test copy of a non-working page and progressively remove elements to see if they were having an effect.

but it does work on your mac?

do you know of any good tutorials for CSS dropdown menus using php include…Im using a php include with all my other pages except for my main index currently.

thanks

from this:

http://validator.w3.org/check?uri=www.meadowlarkco.com%2Findexnewsite_test6.htm&charset=(detect+automatically)&doctype=Inline&group=0

Im down to one error but don’t know what to fix on this?

On Safari, the “Contact” menu item is again dropping down due to the anchor’s left and right padding having been increased to 21px.

I provided links to good examples of CSS dropdown menus at the bottom of this post. After you’ve made the menu, save the menu code as a separate .php file and include it in your pages with the usual PHP include code.

Re validation, it would make things easier if you posted the error. Following your link shows 10 validation errors, which are fixed by making the following changes:

Markup the script code as CDATA, so that it will not be parsed as XHTML and trip the validator.

<script type="text/javascript">  
<=!=[=C=D=A=T=A=[
function OnSubmitForm()  
{  
  if(document.myform.operation[0].checked == true)  
  {  
    document.myform.action ="https://webtrace.etdatacenter.com/webtrace.aspx?accesstype=autologin&cust=id_015&user=lhowe";  
  }  
  else 
  if(document.myform.operation[1].checked == true)  
  {  
    document.myform.action ="https://carrierconnect.etdatacenter.com/Default.aspx?accesstype=autologin&cust=id_015&user=lhowe";  
  }  
  return true;  
}  
]=]=>
</script> 

Self-close the input elements. The first input also has a checked attribute lacking a value.

Broken:

<input type="radio" name="operation" value="1" checked><font size="-1">Customer Tracking</font>  
<input type="radio" name="operation" value="2"><font size="-1">Web Booking  </font>
<input type="submit" name="submit" value="submit">

Fixed:

<input type="radio" name="operation" value="1" checked="checked" /><font size="-1">Customer Tracking</font>  
<input type="radio" name="operation" value="2" /><font size="-1">Web Booking  </font>
<input type="submit" name="submit" value="submit" />

when I put in: <=!=[=C=D=A=T=A=[

I get a syntax error on that line of code?

The Sitepoint editor unkindly introduced extra characters. Here it is again, without the script tags, which you’ll need to add of course.

<![CDATA[
function OnSubmitForm()  
{  
  if(document.myform.operation[0].checked == true)  
  {  
    document.myform.action ="https://webtrace.etdatacenter.com/webtrace.aspx?accesstype=autologin&cust=id_015&user=lhowe";  
  }  
  else 
  if(document.myform.operation[1].checked == true)  
  {  
    document.myform.action ="https://carrierconnect.etdatacenter.com/Default.aspx?accesstype=autologin&cust=id_015&user=lhowe";  
  }  
  return true;  
}  
]]>

once I add that and view the page at www.meadowlarkco.com/indexnewsite_test6.htm

I receive a CDATA is undefined on line 357

You’ve missed out the opening and closing brackets.

Begin with

<![CDATA[

End with

]]>

ok, I’ve decided as well to try and mimic my current menu with one of the tutorials you provided the link to from my menu now at

and my css at www.meadowlarkco.com/menunew.css

what do I need to change to mimic my current menu at www.meadowlarkco.com/indexnewsite_test6.htm, basically I need to change the color when hovering over the menu items and

I’ve looked as this comes up pretty well on my iphone and ipad

thanks