Improve company productivity with a Business Account.Sign Up

x
?
Solved

HTML / CSS Menu Not Displaying Properly on Mobile Devices:

Posted on 2014-02-21
8
Medium Priority
?
1,095 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 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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
LVL 38

Accepted Solution

by:
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.
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

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Owning a franchise can be the dream of a lifetime. It provides a chance for economic growth. You can be as successful as you want.  To make your franchise successful, you need to market it successfully. Here are six of the best marketing strategies …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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…

584 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