Solved

HTML / CSS Menu Not Displaying Properly on Mobile Devices:

Posted on 2014-02-21
8
938 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
[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
  • 3
  • 3
  • 2
8 Comments
 
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.
0
 
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.
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
Technology Partners: 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!

 
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
 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
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 …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

751 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