Go Premium for a chance to win a PS4. Enter to Win


HTML / CSS Menu Not Displaying Properly on Mobile Devices:

Posted on 2014-02-21
Medium Priority
Last Modified: 2014-02-24
Hi. I have no experience with web design so forgive the mistakes you're about to see.
Our new website isn't live yet but it will be by the end of the month.
They wanted me to add a logo with the number of years in business.
So I went ahead and designed one.
So at this point I had 2 separate images up top (our company logo on the left and the number of years in business logo on the right.  We already have a dropdown menu on the right side so this caused the menu to shift all over the place.
There is plenty of space ABOVE the dropdown menu but I was unable to get the image to display properly without the dropdown menu getting all crazy.
I then decided that maybe it would be better to make one image instead of 2 so I went ahead and created an image 1020 pixels in width with a transparent background.
This has the company logo on the left and the number of years in business on the right just like we want.
The issue is the dropdown menu.  I've gotten it to the point now where it displays correctly in IE8, IE11, Chrome and Firefox.
I don't have any additional browsers to test it on but I noticed that when I view the site on my mobile phone, the menu is ALL the way up top (you can see a blue sliver of the menu if you look closely).  
Now here's the kicker; I'm using MS Expression Web to design the site and on Expression, it shows the same way as it does on the mobile browser (the dropdown menu is barely visible).  
Even though it shows like that on Expression, it shows fine on the browsers I used for testing so I thought I was in the clear.
What's even stranger (to me) is that my phone is a Galaxy Note 3 with a 1080x1920 resolution and a Chrome browser yet the menu is still screwed up.
I tried portrait, landscape, "request desktop version of site" and all had the same result. So it displays OK on the desktop version of Chrome but not the mobile version.  It also doesn't display right on an iPhone I used for testing.
The link to the site is http://www.bonlandhvac.com/_NEWSITE/news.html
I don't know if this is a CSS issue or a what.  If you poke around you are bound to find plenty of things that are done incorrectly but as I said, I'm new to web design and am learning as I go.
Question by:homerslmpson
  • 3
  • 3
  • 2
LVL 30

Expert Comment

by:Randy Downs
ID: 39877309
The logo & the years are inside Flash. You can tel by right clicking them. I expect the issues you see on your iPhone are related to Flash not CSS.
LVL 30

Expert Comment

by:Randy Downs
ID: 39877326
I checked the site using Chrome on my Android phone & it works fine but a bit cramped. I guess the Flash is only shown for the desktop version which is good. You can use Opera Mobile Simulator to simulate this on multiple mobile devices.

Author Comment

ID: 39877466
Yeah I added a flash logo with a standard image as a fallback if Flash isn't installed.

I'm still not following though.

The dropdown menu isn't visible when using a mobile browser.  

I'm trying to find out why it shows up on standard computer browsers but not the mobile browsers.
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

LVL 38

Accepted Solution

Tom Beck earned 2000 total points
ID: 39877511
Try the following:
Add position:relative to div id="navigation".

Change position:relative to position:absolute to ul.dropdown, line 27 in dropdownA.css.

Remove margin and change top from this line of your html. Change left to right...

<ul style="margin:-24px 0px 0px 0px; float:right; width:auto; top: -6px; left: 0px; height: 25px;" class="dropdown">

...so it now looks like this:

<ul style="float:right; width:auto; top: 115px; right: 0px; height: 25px;" class="dropdown">

Ideally, all css should be on the stylesheet rather than using any inline css.

Author Comment

ID: 39877712
@Tom Beck (TommyBoy)
That worked!! Holy smokes.
Thank you I really appreciate it!

However, it didn't work on index.html or the news.html page for some reason.
Any idea why that would be?
LVL 38

Expert Comment

by:Tom Beck
ID: 39877803
Not seeing a problem with those two pages in my iOS simulator or my iPhone.

Try clearing the cache in the browser.

Author Closing Comment

ID: 39882205
You're right.  I tried it again this morning and all is well.
Thank you so much for your help I really appreciate it!!!
LVL 38

Expert Comment

by:Tom Beck
ID: 39882261
You're welcome. Glad it worked. Thanks for the points.

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

971 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