Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS dropdown works in everything except iPhone 5

Posted on 2013-01-14
35
Medium Priority
?
699 Views
Last Modified: 2013-11-21
I just heard from 2 users that my css dropdowns aren't working for their iPhone5's.  It works great for my android, and when I tested on a pad, but the user also commented that it didn't work right for her iPad2 either.  So I have the following questions.

1) I don't own apple products so how can I create a testing environment for these apple products.  Doesn't firefox have an addin, or do you know of any really good software I could use for testing and recreating the apple environment?

2) My pages and CSS are W3C compliant, but aren't working with these apple products.  Is there a quick fix for this?

3) If there is no quick fix is there some way I can add code so that if the device is an apple phone or iPad it will go to different pages?

4)  Do you know the best site or book that will help me get through this?
0
Comment
Question by:smitty62
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 16
  • 12
  • 3
  • +2
35 Comments
 
LVL 34

Expert Comment

by:Paul MacDonald
ID: 38775117
This isn't really Apple programming, so you've limited the responses you're going to get.  That said, does your web development enviroment offer a device emulator you can test against?  I know Visual Studio does...
0
 

Author Comment

by:smitty62
ID: 38775132
No it doesn't.  All I have is dreamweaver.  I still write in classic asp and look after the servers.  The other programmers are responsible for developing the .net applications.  Would it be better if I resubmitted the question under another topic?
0
 
LVL 34

Expert Comment

by:Paul MacDonald
ID: 38775392
Not necessarily, but you might want to "Request Attention" and get a moderator to reclassify the question so you get better responses.

Is this an ASP control, a Dreamweaver control, or a standard HTML control?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:smitty62
ID: 38775439
How do I "Request Attention"?
0
 
LVL 34

Expert Comment

by:Paul MacDonald
ID: 38775522
I've done it for you.
0
 

Author Comment

by:smitty62
ID: 38775632
Thank you very much.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38778258
First, you'll need to download the Apple developer tools from their website, which has the iOs simulator. You'll need to register, but it's free (you do not need to sign up to be a developer unless you want to distribute apps in the store)

https://developer.apple.com/xcode/

You can then use the simulator in conjunction with Safari to debug html/js/css, the same way you would do for a regular website in your browser.

Can you post a link to the page in question?
0
 

Author Comment

by:smitty62
ID: 38778396
Okay, that's nice, but I just went to the above link.  Guess what?  It says "Download x code 4 for free" however there is no download button.  I tried the other links displayed, but they just take me around in a circle which eventually put me back to the page that has "Dowload x code 4 free".  That's nice that they want me to download it for free however THEY DON'T GIVE A DOWNLOAD BUTTON TO DO IT!!!

Is there another link or free simulator I can use?
0
 

Author Comment

by:smitty62
ID: 38778408
Found it, but the download is https://developer.apple.com/downloads/index.action.  Let me try that and get back with you.
0
 

Author Comment

by:smitty62
ID: 38778465
The download won't work.  It is a .dmg format which windows won't recognize.  I work in the windows environment, but need to have the site work on the iPhone.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38778480
you have some choices.

You can download a VM:
http://ipodtoucher55.blogspot.com/2010/12/installing-ios-sdk-and-xcode-on-windows.html

or you can use something like browserstack.com to preview your pages in various devices.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38778487
You should post a link to the site, so we can look at it in our devices/simulators
0
 

Author Comment

by:smitty62
ID: 38778496
Thank you!  I would appreciate that very much.  The site is

http://insurance.illinois.gov

The complaint is that the dropdown menu is not working on the iPhone 5 and the iPad2
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38778575
step 1:

since you are not loading the dreamweaver script, you need remove this from the body tag:

onload="MM_preloadImages('images/ipxp/ipxp_oa_dn.png','images/ipxp/ipxp_general_dn.png')"

It is throwing an error
0
 

Author Comment

by:smitty62
ID: 38778596
removed.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38778636
I'm looking into it. seems kind of odd since it's just css - we'll find it.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38778663
If you wrap the text in anchors, it will work on iOS.

example:

<li class="dropdown-li"><a href="#">Companies ¿</a>
0
 

Author Comment

by:smitty62
ID: 38778692
It is in anchors

<li><a href="#">&nbsp;&nbsp;Companies ¿ </a>
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38778719
Did you upload the page? I'm not seeing the anchors.
0
 

Author Comment

by:smitty62
ID: 38778749
Sorry, I was trying to do four things at once.  I was looking at an old copy.  Try it now.
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 38778758
I just tried the page on my Ipad 2,the dropdowns work fine. I am running iOS version 6.0.1.
0
 

Author Comment

by:smitty62
ID: 38778762
Do you have an iPhone 5 that you can use to check it?
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 38778799
That did the trick. It is working.
0
 

Author Comment

by:smitty62
ID: 38778808
Thank you, Thank you, Thank you.  You did a great job!
0
 

Author Comment

by:smitty62
ID: 38778885
I've requested that this question be closed as follows:

Accepted answer: 0 points for smitty62's comment #a38778808

for the following reason:

Did a wonder job.  Problem solved.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38778879
No Points??
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38778886
Ooops, I meant to click the Object button.
0
 

Author Comment

by:smitty62
ID: 38778955
Yes, you should have gotten points for this.
0
 

Author Closing Comment

by:smitty62
ID: 38778962
Thank you.  If you don't get the points for this please let me know.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38778973
cheers.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38779064
The fun part is of course that no one can read the tiny text of the dropdown on a phone anyway....
0
 

Author Comment

by:smitty62
ID: 38779069
Yes, I agree.  They have to zoom in, but my supervisor wanted the dropdowns when we redid the sight.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38779076
LOL, very true : )
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

604 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question