mobile device menu problem

Forum Moderators: not2easy

Message Too Old, No Replies

mobile device menu problem

geoffb

10:45 am on Jun 25, 2012 (gmt 0)

Hi,

I am viewing a website completed and am now testing. On my mobile phone which is an Andriod Samsung Galaxy SII running Firefox my last menu link Contact Us is dropping off the end and wrecking the look of the site.

I have to adjust my menu li a padding from 24 to 19 to get it to pop back into place but then on a desktop its miles away from the end.

I have tried to use @media queries to specify a width to detect width and apply a different rule for the padding, also including !important just incase.

I have also tried creating different stylesheets and calling it if the sreen size is below 480px (even tried uping that and it just does nothing)

Any ideas please.

Thanks
geoffb

Paul_o_b

2:21 pm on Jun 25, 2012 (gmt 0)

Hi,

If you are relying on text-content-width + padding to equal the width of a parent element then you are out of luck because browsers all render text at various different widths. On a long line the difference can be quite substantial.

The only way to make browsers all the same would be to give a width to each menu item and remove the padding and center the text within each item with text-align:center.

Of course for a dynamic menu or a menu that changes on every page that would be a nightmare to maintain so you are better off just having the menu short or indeed accommodate for wrapping. After all what happens when a user has a larger font-size than the one you built the page with?

Alternatively, for IE8+ support you could use the display:table-cell properties


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.menu {
display:table;
width:800px;
margin:20px auto;
padding:0;
list-style:none;
}
.menu li {
display:table-cell;
border:1px solid #000;
text-align:center;
}
</style>
</head>

<body>
<ul class="menu">
<li><a href="#">testing</a></li>
<li><a href="#">testing 2 words or more</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing 2 words</a></li>
<li><a href="#">testing</a></li>
</ul>
<ul class="menu">
<li><a href="#">testing</a></li>
<li><a href="#">testing 2 words</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing 2 words</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing 2 words</a></li>
</ul>
</body>
</html>

geoffb

2:39 pm on Jun 25, 2012 (gmt 0)

The only way to make browsers all the same would be to give a width to each menu item and remove the padding and center the text within each item with text-align:center.

Hi Paul, thanks for the help, the only problem with the above, and I have used it before on projects is this menu goes from STUDENT SUCESSES to BLOG, so the width's would have to be great and BLOG would look lost.

I have specified the font weight as normal in the hope browsers such as Safari dont use their normal Bold and this then drops the menus off as I have seen before.

Not sure what is my best option on this!

geoffb

Leosghost

3:39 pm on Jun 25, 2012 (gmt 0)

SUCESSES has two Cs as in Successes ..which only makes your "space problem" worse ..but at least you'll avoid doing all the work and only then discover the typo' :)

geoffb

3:49 pm on Jun 25, 2012 (gmt 0)

thanks for the English lesson. Of course it was just a typo here and not on the site.....you may not believe it but im not that stupid! ;)

Leosghost

3:58 pm on Jun 25, 2012 (gmt 0)

I can be ..and have been ( lack of daily practice with English is my excuse and I'm sticking to it ;-)..so I thought it was worth mentioning..just in case ..

Paul_o_b

9:07 pm on Jun 25, 2012 (gmt 0)

Not sure what is my best option on this!

I would use the display:table method I mentioned above and give ie7 and under a floated nav via conditional comments. That will at least allow the menu to be spaced out better and not break to a new line on modern browsers.

Otherwise your options are limited because text size is ultimately controlled by the user so "making things just fit" is a bad approach. Expect lines of text to wrap and cater for it accordingly or allow plenty of breathing space.