Drop-down menu columns enlarging text issues - Android 4.1.2

Hello

Has anyone had any issues with Android 4.1.2 big text issues with generic browser (displays a globe icon)?

We cannot pinpoint the css element that is creating the problem and wondered if anyone could help.

Issue: the font is displayed too big by the browser on this version of Android. The browser is also used on other versions and tends to work fine.
The content displays outside the boxes as well - all the boxes on the menu and some pages have specific heights or background image heights.
The browser is obeying the specified dimensions, or divs, images etc - its just not obeying the font size of text.

I have attached a screenshot and the html and css. The menu is not yet available up on an environment so I cannot provide a URL link. (Note in the screenshot the hyperlink below the dropdown menu bg and note the large text in the horizontal main nav.)

I hope that this is enough info to go on. Please excuse all the comments in the markup. If you would prefer that I place this in an attached doc please let me know.

Thanks in advance.

CSS:


.s14-main-menu {        
	position: relative;/* expand selected menu to full width */
	margin:0;
	padding: 0;
	background: #339933 url('images/s14-main-menu-bg.png') repeat;
	height:36px;              /** height taking border into account  **/
	overflow: hidden;
	text-align: center;
	border-top: 1px solid #ccff99;
	border-right: 0;
	border-left: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	text-transform: uppercase;
}
#s14-sub-menu {
	height: 26px;
}
#s14-sub-menu ul li a { 
	padding-top: 2px;
	vertical-align: middle;
}
.s14-main-menu.footertxt {
	text-transform: none;
}
.s14-main-menu ul {                        
	margin:0;
	padding: 0;
	overflow:hidden;
	text-align:center;
}
/* hide list bullet points in menus */
.s14-main-menu ul li {                  
	list-style-type: none;
	margin: 0;                    
	padding: 0;                   
	display:inline-block;           
	height:36px;                  
	border-right: 1px solid #CCC;  
}
.s14-main-menu ul li.first {             
	border-left: 1px solid #CCC;
}
.s14-main-menu ul li:hover {             
        background: #009900 url(images/s14-main-menu-bg-over.png) repeat; 
		}

/* reduce top menu title margins */
.s14-main-menu ul li a {                
	display:inline-block;           /** Added : To make margins/padding work correctly  **/
	min-height: 32px;				
	margin: 0;                    /** Added : To ensure none!  **/
	padding: 7px 12px 0px 12px;     /** Changed : From 10px.  **/
	color: #fff;
	font: bold 15px 'Trebuchet MS', Arial, Helvetica, sans-serif; /**Changed : From 13px.  **/
	text-shadow: #333 0 0 2px;
	cursor: pointer;
	text-decoration: none;
/**	border-right: 1px solid #CCC;      Removed : Moved to <li> **/
}
.s14-main-menu a {
	border: 0;
}
/* show marker for selected menu */
.s14-menu-marker {
     position:relative;          /**  GM Added : To position marker over Main Menu above  **/
     top:-12px;                  /**  GM Added : To position marker over Main Menu above  **/
     left:0;                   /**  GM Added : To position marker over Main Menu above  **/
	width:16px;
	height:8px;
	display: none;
}

/** GM *********************************
	Menu Pages Function Structure
****************************************/
.s14-Menu-Container      { position:absolute; top:0; left:5px; width:725px; /*735px in IE*/ padding:0; border:0; height:187px; overflow:hidden; display:none; }
.s14-Menu-Body           { position: absolute; top: 0; left: 16px; width: /*736px*/ 703px; border-bottom: 1px solid #339933; 	height:185px; background: url(images/s14-menudrop-bg.jpg) repeat; font-weight: bold; 	overflow: hidden; -moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px; 	-moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px;
	}
.s14-Menu-Pages          { position:relative; margin:0; padding:0; border:0; height:187px; white-space:nowrap; overflow:hidden; }
.s14-MenuPage-Stacked    { position:absolute; top:0; left:0; margin:0; padding:15px; border:0; width:706px; height:157px; white-space:normal; overflow:hidden; }
.s14-MenuPage-Tiled      { display:inline-block; margin:0; padding:15px; border:0; width:706px; height:157px; white-space:normal; overflow:hidden; }
.s14-Menu-Close          { position:absolute; top:160px; left:677px; height:20px; width:20px; overflow:hidden; }
.s14-Menu-Pages h3              { 
	display: block;
	width:90%;
	padding: 5px;  
	font: bold 13px Arial, Helvetica, sans-serif;
	border-bottom: 1px solid #339933;
	color: #993300;
	margin: 0 0 5px 5px;
	}
.s14-menu-column                { float:left; min-height: 100%; margin: 0 5px; width:30%; text-align:left; background: url(images/s14-nav-column-bg.jpg) repeat; }
.s14-menu-column ul             { margin:0; padding:0 0 0 8px; list-style-type: none;}
.s14-menu-column ul li          { margin:0; padding:0 5px 5px 15px; background: url(images/s14-nav-section-arrow.jpg) no-repeat 0 5px; white-space: nowrap; }
.s14-menu-column ul li a		{ color: #003366; display: block; margin: 8px 0 0; }
.s14-menu-column ul li a:hover	{ color: #993300;}


  <div class="s14-main-menu">
    <ul>
      <li class="first"><a href="#" >Home</a></li><li><a href="#" id="s14-MainMenu-BBH" onclick="s14_Menu_Show(this); return false;">BBH</a></li><li><a href="#" id="s14-MainMenu-BookingInfo" onclick="s14_Menu_Show(this); return false;">Booking Info</a></li><li><a href="#" id="s14-MainMenu-BBHClubCardGuide" onclick="s14_Menu_Show(this); return false;">BBH Club Card &amp; Guide</a></li><li><a href="#" id="s14-MainMenu-Noticeboards" onclick="s14_Menu_Show(this); return false;">Noticeboards</a></li><li class="last"><a href="#" id="s14-MainMenu-TravelInfo" onclick="s14_Menu_Show(this); return false;">Travel Info</a></li>
    </ul>
    <div id="s14-Menu-Marker" class="s14-menu-marker"><img src="images/s14-menu-marker.gif"/></div>
    <!--Added : Reinstated this <div> as the marker --> 
  </div>
  <!-- end s14-Main-Menu-->
    <div id="s14-Menu-Container" class="s14-Menu-Container"> <!-- GM Added : Outer container for Menu Pages - so that it can appear/scroll when opened -->
      <div id="s14-Menu-Body" class="s14-Menu-Body"> <!-- GM Added : Mid container for Menu Pages - so that it can appear/scroll when opened -->
        <div id="s14-Menu-Pages" class="s14-Menu-Pages"> <!-- GM Added : Inner container for Menu Pages - so that pages can be stacked or tiled when pages change --> 
          
          <!-- GM Note : Below are the individual menu pages:
               1) Content has been moved down from the Main Menu - it is no longer embedded within the Main Menu <ul>.
               2) Content is exactly as was defined in the Main Menu - it has not been changed - just moved from the <ul>.
               3) Each menu page is contained within a <div> with matching ID back to the Main Menu.
               4) Content inside the <div> is what drops down - can be any HTML content.
               5) JS will assign css class of 's14_MenuPage_Stacked' or 's14_MenuPage_Tiled' to enable the differences between scrolling/fading etc. -->
          
          <div id="s14-Menu-BBH">
            <div class="s14-menu-column">
              <ul>
                <li><a href="#" >What is BBH Accommodation?</a></li>
                <li><a href="#" >About BBH NZ</a></li>
                <li><a href="#" >Contact BBH NZ</a></li>
                <li><a href="#" >Become a BBH Hostel</a></li>
              </ul>
            </div> 
          </div>
          <div id="s14-Menu-BookingInfo">
            <div class="s14-menu-column">          
              <ul>
                <li><a href="#" >Book a Hostel</a></li>
                <li><a href="#" >Register with BBH</a></li>
                <li><a href="#" >Leave a Review</a></li>              
              </ul>
             </div> 
           <div class="s14-menu-column">
           <h3>About</h3>
           <ul>
              <li><a href="#" >Using the Booking System</a></li>              <li><a href="#" >Cancellations & Refunds</a></li>
              <li><a href="#" >Terms & Conditions</a></li>
           </ul>
           </div>             
          </div>
          <div id="s14-Menu-BBHClubCardGuide">
            <div class="s14-menu-column">
              <ul>
                <li><a href="#" >Order BBH Guide</a></li>
              </ul>  
             </div> 
            <div class="s14-menu-column">             
                <h3>BBH Club Card</h3>
              <ul>  
                <li><a href="#" >What's it all About</a></li>
                 <li><a href="#" >Club Card Guarantee</a></li>                <li><a href="#" >Deals &amp; Discounts</a></li>
                <li><a href="#" >Order BBH Club Card</a></li>
              </ul>
            </div>
          </div>
          <div id="s14-Menu-Noticeboards">
            <div class="s14-menu-column">
              <ul>
                <li><a href="#">BBH Hostel Staff Vacancies</a></li>
                <li><a href="#">Other Work Vacancies</a></li>
                <li><a href="#">Vehicle Buy / Sell</a></li>
                <li><a href="#">Travel Mates</a></li>
              </ul>
            </div>
            <div class="s14-menu-column">
              <ul>
                <li><a href="#">General Buy / Sell</a></li>
                <li><a href="#">BBH Hostels for Sale</a></li>
                <li><a href="#">Hostels Wanted to Buy</a></li>
                <li><a href="#">Work Wanted</a></li>
                <li><a href="#">Discussion Forum</a></li>
              </ul>
            </div>
          </div>
          <div id="s14-Menu-TravelInfo"> <!-- GM Changed : I've tried an alternate method of styling in here --> 
            <!--<div style="float:left; width:150px; margin:0px; padding:0px; text-align:center;">
    <img style="margin-bottom:10px; border:1px solid #000000;" src="images/s14-menu-iconmap.jpg"/>
  </div>-->
            <div class="s14-menu-column">
              <ul>
                <li><a href="#">Introduction To New Zealand</a></li>
                <li><a href="#">Getting Around NZ</a></li>
                <li><a href="#">Environmental Care Code</a></li>
                <li><a href="#">Calendar &amp; Public Holidays</a></li>
                <li><a href="#">Driving Distances &amp; Times</a></li>
              </ul>
            </div>
            <div class="s14-menu-column">
              <h3>Travel Insurance</h3>
              <ul>
                <li><a href="#">Information</a></li>
                <li><a href="#">Purchase Online</a></li>
              </ul>
            </div>
            <div class="s14-menu-column">            
              <h3>3rd Party Vehicle Insurance</h3>
              <ul>
                <li><a href="#">Information</a></li>
                <li><a href="#">Purchase Online</a></li>
              </ul>
            </div>
          </div>
        </div>
        <!-- end s14-Menu-Pages -->
        <div class="s14-Menu-Close" ><a href="#"  onclick="s14_Menu_Hide();return false;"><img src="images/s14-menu-close.jpg"/></a></div>
        <!-- GM Might have added this  --> 
      </div>
      <!-- end s14-Menu-Body --> 
    </div>
    <!-- end s14-Menu-Container --> 

Hi,

It’s hard to say what’s going on without a real example to look at but I don’t see any mobile optimisation in your code at all and therefore you will be at the mercy of the mobile device as far as resizing and how the layout is squashed into the smaller screen.

Usually you need the viewport meta tag in the head for mobile to tell them you will be handling things:


<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Then you would use media queries to tweak the content to fit better on smaller devices.

It may be that you have done all these things but I couldn’t see them in the snippets of code you posted.

If you are doing nothng specific for mobile then you may want to use the text-size:adjust property as explained here. Generally though if you are handling things properly with the viewport meta tag and media queries then these problems will not arise because you will be styling the content in better ways depending on the width of the browser.


/* Prevents Mobile Safari (and others) from bumping up font sizes in landscape */
@media only screen and (max-device-width: 480px) {
	body{
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
	}
}


Humble apologies, I should’ve included the <head> info. We have optimised it for mobile.

I have now provided just the drop down part of the menu including <head> tag for ease of reading. I hope this clarifies our problem a bit more.

I’m still testing the preventative code that you kindly provided as well.

But as you can see from the attached screeshot, the font and padding seem to be lengthened in Android 4.1.2.


<!DOCTYPE html>
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=746px">
<meta name="apple-touch-fullscreen" content="YES">
<style>
body {	background-color:#fffff; }
a {	display:block;
	padding:5px 0px 5px 20px;
	margin:0px;
	font: normal 12px/150% verdana, Tahoma, arial, sans-serif;
	color: #003366; }
h3 {	width:90%;
	padding: 5px;  
	font: bold 13px Arial, Helvetica, sans-serif;
	border-bottom: 1px solid #339933;
	color: #993300;
	margin: 0 0 10px 5px; }
.Box {	background-color:#C7E4A4;
	width: 706px;
	height: 185px;
	padding:15px;
	margin:auto;
	overflow: hidden; }
.Col {	float:left;
	background-color:#e0f0cc;
	height:185px;
	width:215px;
	margin:0 5px;
	padding:0px;
	text-align:left;
	line-height:1.25; }
.Col div { padding:5px 0px 5px 20px;
	margin:0px;
	font: normal 12px/150% verdana, Tahoma, arial, sans-serif;
	color: #003366; }

</style>
</head>
<body>
  <div class="Box">
    <div class="Col">             
      <h3>Lorem ipsum dolor</h3>
      <a href="#" >Sit amet consectetur</a>
      <a href="#" >Adipiscing elit sed</a>
      <a href="#" >At ante vivamus sit adipiscing</a>
      <a href="#" >Sit amet consectetur</a>
    </div>
    <div class="Col">             
      <h3>Lorem ipsum dolor</h3>
      <div>Sit amet consectetur</div>
      <div>Adipiscing elit sed</div>
      <div>At ante vivamus sit adipiscing</div>
      <div>Sit amet consectetur</div>
    </div>
    <div class="Col">
      <img src="Column.jpg"/>
    </div> 
  </div>
</body>
</html>

Hi Paul
Just to let you know that we tried the css code for text-sizing and it didn’t seem to affect anything using the Android tablet 4.1.2.

Hi,

You haven’t used the meta tag I gave you and you missed out the initial scale which stops the automatic text resize (although I’m not sure it will make a difference as you haven’t really catered for mobile using media queries etc).

The way you are building that element will cause you no end of problems all the way along the line. The fixed heights are just screaming for the content to break out and should a device or browser have a different opinion on how big some piece of content is then you get a broken layout. You need to take into account that you cannot control text-size or what device your users are using and design with that in mind and make allowances.

Using that approach I would do something like this for your widget that will fit in all windows in one way or another.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
ul {
	margin:0;
	padding:0;
	list-style:none;
}
body {
	background-color:#fffff;
}
h3 {
	padding: 5px;
	font: bold 13px Arial, Helvetica, sans-serif;
	border-bottom: 1px solid #339933;
	color: #993300;
	margin: 0 5px 10px;
}
.Box {
	background-color:#C7E4A4;
	max-width: 960px;
	margin:auto;
	display:table;
	border-spacing:15px;
}
.Col {
	display:table-cell;
	background-color:#e0f0cc;
	padding:5px 5px 15px;
	width:33%;
	text-align:left;
	line-height:1.25;
}
.links {
	padding:5px 0;
	margin:0;
	font: normal 12px/150% verdana, Tahoma, arial, sans-serif;
	color: #003366;
}
.links a {
	display:block;
	padding:5px 0px 5px 20px;
	font: normal 12px/150% verdana, Tahoma, arial, sans-serif;
	color: #003366;
	text-decoration:none;
}
@media screen and (max-width:550px) {
.Col {
	display:block;
	width:auto;
	margin:0 0 10px;
}
}
</style>
</head>

<body>
<div class="Box">
		<div class="Col">
				<h3>Lorem ipsum dolor</h3>
				<ul class="links">
						<li><a href="#" >Sit amet consectetur</a></li>
						<li><a href="#" >Adipiscing elit sed</a></li>
						<li><a href="#" >At ante vivamus sit adipiscing</a></li>
						<li><a href="#" >Sit amet consectetur</a></li>
				</ul>
		</div>
		<div class="Col">
				<h3>Lorem ipsum dolor</h3>
				<ul class="links">
						<li><a href="#" >Sit amet consectetur</a></li>
						<li><a href="#" >Adipiscing elit sed</a></li>
						<li><a href="#" >At ante vivamus sit adipiscing</a></li>
						<li><a href="#" >Sit amet consectetur</a></li>
				</ul>
		</div>
		<div class="Col">
				<h3>Lorem ipsum dolor</h3>
				<ul class="links">
						<li><a href="#" >Sit amet consectetur</a></li>
						<li><a href="#" >Adipiscing elit sed</a></li>
						<li><a href="#" >At ante vivamus sit adipiscing</a></li>
						<li><a href="#" >Sit amet consectetur</a></li>
				</ul>
		</div>
</div>
</body>
</html>

On larger screens the element is 3 across but on smaller mobile it fits into one neat column and is easy to read rather than a squashed 3 column.

It uses the display:table / cell (ie8+) approach so that you get 3 equal columns without needing heights or floats.

There are no heights set so the layout can expand downwards as required so zoomed text won’t be an issue. The main element is not a fixed width either but uses a max-width which means that it can grow and squeeze and soak up any differences in screen width easily.

Of course you need to take that methodology and apply it to the rest of your page and in that way you give your visitors a better experience no matter what device they access your content with.

Hi Paul
Thanks for your time, consideration and coding advice. I have provided my queries and comments in bold below under your quoted paras.

You haven’t used the meta tag I gave you and you missed out the initial scale which stops the automatic text resize (although I’m not sure it will make a difference as you haven’t really catered for mobile using media queries etc).

We did use the meta tag element in our test page on our server and it did not seem to make a difference on the problematic Tablet 4.1.2 Android version so I didn’t include it on my latest code I provided here.

To clarify, we are not designing the website for mobile device, as such, but for Desktop and Tablet use. The font should not zoom or enlarge but our preference is for the page to fit the window size of a tablet. So I wonder whether the text-adjust should be set to ‘none’?

The way you are building that element will cause you no end of problems all the way along the line. The fixed heights are just screaming for the content to break out and should a device or browser have a different opinion on how big some piece of content is then you get a broken layout.

But this would be the case if we were developing for mobile which we are not - is that correct? We do not want the website to be responsive but to stay within the 746px width set for the main site container.

I guess going back to the original problem of the font enlarging on the tablet version 4.1.2, and considering all other browsers / tablets we have tested are fine, then perhaps we shouldn’t be trying to use the viewport meta tag at all? Or is there perhaps another fix for this one version issue?

Hi Paul

We have now solved the problem with the 4.1.2. We have learned that in the Android browser setting in “device/display/font-size” the font was set to “large”. Hmmm. So we set this to normal and voila! it worked and looks the same as in all other devices we tested. Learning every day.

However, I wonder whether we can override this font setting to show “normal” in meta tags so for those folk who are not aware of this setting can view a site in normal font size?

PS: Please ignore my previous message to this one. We found this information out after I posted it.

We have learned that in the Android browser setting in “device/display/font-size” the font was set to “large”

I assumed you had tested on various android devices otherwise I would have (or should have) mentioned user preferences :slight_smile:

The code in my demo will fit the tablet window perfectly without ever having to know what size it is. That is the main point :). You don’t design for specific widths you cater for all widths using the approach in my example.

However, I wonder whether we can override this font setting to show “normal” in meta tags so for those folk who are not aware of this setting can view a site in normal font size?

You cannot change the settings that a user sets in their own browser or in their own device because that’s a setting they have chosen to be best for them. Some people have their browsers (on desktop) set to show all text at a large size and in a font of their choosing. You cannot (and should not) interfere with user preferences. Obviously some users may have selected this setting accidentally but that’s just their bad luck and there’s nothing you can do about that - EXCEPT (and sorry to harp on about this) if you had used the method in my example the text would still be larger but the layout would not be broken at all and will be completely usable unlike the method you have chosen.

In the end you must design with the thought in mind that users will not be using the same size text as you and make sure your design can accommodate this without breaking.

I guess going back to the original problem of the font enlarging on the tablet version 4.1.2, and considering all other browsers / tablets we have tested are fine, then perhaps we shouldn’t be trying to use the viewport meta tag at all? Or is there perhaps another fix for this one version issue?

As I said originally if you have not catered for mobile devices with media queries then you do not need the meta tags because when you add the viewport meta tag you are telling the mobile browsers not to scale the page and that you will take care of how things fit. You are not doing this so it will just confuse things further.

Most mobile devices will look for the viewport meta tag and if none exists will follow this rough algorithm: They will assume the layout is 960px wide (even if its smaller or larger) and then scale that 960px smaller and smaller until it fits on the dimensions of their mobile screen. This results in text that is very small and hard to read and the user has to pinch and zoom to read the site. Results will vary between devices and site design and some may fit better than others. On some sites you see the text all squashed and gaps at the side due to the fact that some elements were wider than the 980px and cause horizontal scrolling.

Mobile browsers were designed so that they could view sites that have not been mobile optimised and if you have not mobile optimised the site then basically your easiest course of action is to do nothing and the device just scales the page until it fits (more or less). The best course of action though is to design with mobile in mind and use methodologies that work across the spectrum of devices.

I hope that explains a little what is happening as mobile design can be a bit of a minefield.:slight_smile:

Hi Paul

I assumed you had tested on various android devices otherwise I would have (or should have) mentioned user preferences

It didn’t even occur to us to check the font size on the device until mentioned just out of curiosity in conversation. Took us a while to even find where the font function was. :slight_smile:

I hope that explains a little what is happening as mobile design can be a bit of a minefield.

Your explanation has been extremely helpful and I totally see where you are coming from - and agree, however, unfortunately it is not my decision to make and the boss has the final word. I shall create a demo / test page of the menu and home page using your strategy and advice and see how it looks on a small screen. If it is acceptable, I will show it to the boss and see what he thinks. :slight_smile:

Thanks very much for your time with this.

You’re welcome :slight_smile:

Mobile/responsive design has been (and still is) a steep learning curve for us all and best practices have emerged but the ‘landscape’ is continually changing so its hard to keep ahead of the game. There often is no “one right way” to do something because it all depends on the situation that you are addressing at the time. In many ways building from scratch is easier than adapting something already built because when you start from scratch you can build in all the things you need to make the site responsive.

Hope you manage to get the issue sorted whichever way you choose to address it.