Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1055
  • Last Modified:

HTML / CSS Menu Not Displaying Properly on Mobile Devices:

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
homerslmpson
Asked:
homerslmpson
  • 3
  • 3
  • 2
1 Solution
 
Randy DownsOWNERCommented:
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
 
Randy DownsOWNERCommented:
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
 
homerslmpsonAuthor Commented:
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
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.

 
Tom BeckCommented:
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
 
homerslmpsonAuthor Commented:
@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
 
Tom BeckCommented:
Not seeing a problem with those two pages in my iOS simulator or my iPhone.

Try clearing the cache in the browser.
0
 
homerslmpsonAuthor Commented:
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
 
Tom BeckCommented:
You're welcome. Glad it worked. Thanks for the points.
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now