Solved

HTML / CSS Menu Not Displaying Properly on Mobile Devices:

Posted on 2014-02-21
8
883 Views
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.
0
Comment
Question by:homerslmpson
  • 3
  • 3
  • 2
8 Comments
 
LVL 29

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.
0
 
LVL 29

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.
0
 
LVL 1

Author Comment

by:homerslmpson
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.
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 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.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 1

Author Comment

by:homerslmpson
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?
0
 
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.
0
 
LVL 1

Author Closing Comment

by:homerslmpson
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!!!
0
 
LVL 38

Expert Comment

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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

911 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now