I'm trying to create a simple 3 line menu dropdown for mobile screens. I've got something that works, but it doesn't look consistent across devices. The icon's vertical positioning is changing depending on the OS and browser version. The icon should be centered vertically, but I'm seeing:
Linux -desktop
Firefox - slightly low vertical centering.
Chrome - seems to be in the middle.
Windows 8 -desktop
Firefox - seems to be in the middle.
IE 9-11 - seems to be in the middle.
Android
Firefox - very low vertical centering.
Chrome - slightly low vertical centering.
Here is the sample HTML
<div id="nav">
<div class="mobile-bars">
≡
</div>
</div>
and the sample CSS
#nav {
padding:0;
margin:0;
}
.mobile-bars {
background:#3e4041;
height:50px;
font-size:50px;
line-height:1;
margin:0;
padding:0;
}
.mobile-bars a {
color:white;
position:absolute;
display:block;
padding:0 0.2em 0 0.2em;
margin:0;
text-decoration:none;
}
and here is the jsfiddle link. Why won't the three line icon stay vertically centered?
Use line-height: 50px;, equals to the height of parent (div.mobile-bars) - TRY DEMO
HTML
<div id="nav">
<div class="mobile-bars">
≡
</div>
</div>
CSS
#nav {
padding:0;
margin:0;
}
.mobile-bars {
background:#3e4041;
height:50px;
font-size:50px;
line-height:1;
margin:0;
padding:0;
}
.mobile-bars a {
color:white;
position:absolute;
display:block;
padding:0 0.2em 0 0.2em;
margin:0;
text-decoration:none;
line-height: 50px;
}
[EDITED]
If you have <meta charset="utf-8"> inside the <head> element and using the CSS property line-height: 50px; doesn't solve your problem then I would recommend you to use an Image instead of html unicode character, If you really worry about Firefox on Linux and Android, icon's vertical position.
Related
I'm experiencing a strange problem on the stock browser on an HTC One X running Android 4.2.2.
I have a container div with overflow-x set to hidden and overflow-y set to auto, it has fixed width and height dimensions. The child content has width and height that exceeds its parent. The idea is that you should be able to scroll vertically but not horizontally. Every browser that i've seen behaves correctly and I get the desired effect. However, on this Android Stock browser I am able to scroll horizontally AND vertically freely, which is not what I want as the overflow-x: hidden is supposed to prevent horizontal scrolling.
I've created a codepen to demo the basic problem:
http://codepen.io/anon/pen/YXjZKR
Code here too:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1' />
<style>
.container{
width: 300px;
height: 500px;
overflow-x: hidden;
overflow-y: auto;
}
ul.pages {
position: relative;
margin: 0;
padding: 0;
white-space: nowrap;
}
li {
width: 300px;
line-height: 500px;
display: inline-block;
margin: 0;
padding: 0;
vertical-align: top;
text-align: left;
white-space: normal;
height: auto;
}
li.one {
background-color: red;
}
li.two {
background-color: yellow;
}
li.three {
background-color: green;
}
</style>
</head>
<body>
<div class="container" id="container">
<ul class="pages">
<li class="one">Hello<br /><br /></li>
<li class="two">good</li>
<li class="three">bye</li>
</ul>
</div>
</body>
I have also noticed that if I shorten the height of the child content to be less than the container, then the content no longer scrolls horizontally either. Unfortunately the content will always be taller than the container.
Have spent hours trying to work out why this is happening and, more importantly, looking for a workaround but have had no luck so far.
Any help would be really appreciated.
Thanks
I'm assuming that the <li> elements are set to display: inline-block in order to hide them horizontally. If so, your issue is that the .container element is not the parent of the <li>.
The actual parent - the ul.pages - is defaulting to overflow: auto in this browser for some reason. Set that to overflow-x: hidden and you should be alright.
Issue shows up on Android browsers when the following are on a page:
A div element with a size larger than the device's viewport. (I used 1200px.)
One or more other div elements with either left:0; right:0; margin:auto; or left:50%; margin-left:-100px style centering.
The issue is that the "centered" div elements actually aren't. They have an offset to the left (or top if centering vertically). The problem shows up on Android devices in both Chrome and Dolphin (WebKit). It does not show up on desktops (tested Chrome, FireFox, Safari, and IE).
Here is some example CSS:
body{ margin:0; padding:0; }
.wide-element {
position:absolute;
height:800px; width:1200px;
left:50%; margin-left:-600px;
background:url(1200px-wide.png);
}
.fixed-1, .fixed-2, .absolute-1, .absolute-2 { height:200px; width:200px; }
.fixed-1 {
position:fixed; margin:auto;
left:0; right:0; top:0; bottom:0;
background:rgba(0, 0, 255, .5);
}
.fixed-2 {
position:fixed; margin:-105px 0 0 -105px;
left:50%; top:50%;
border:5px solid blue;
}
.absolute-1 {
position:absolute; margin:auto;
left:0; right:0; top:0; bottom:0;
background:rgba(255, 0, 0, .5);
}
.absolute-2{
position:absolute; margin:-105px 0 0 -105px;
left:50%; top:50%;
border:5px solid red;
}
And the HTML:
<body>
<div class="wide-element"></div>
<div class="fixed-1"></div>
<div class="fixed-2"></div>
<div class="absolute-1"></div>
<div class="absolute-2"></div>
</body>
I added the position:fixed pair to contrast with the position:absolute pair. As you can see in the following screenshot, the fixed divs are both at the actual center of the screen, while the absolute divs are slightly up and to the left of the center of the layout. The most problematic part is that this offset causes elements on the left side of the screen to be cut off, and unreachable.
I'd like to know why (exactly) is this happening (and why only on mobile devices), but the real question is:
How can I reliably center a div element that might be larger than the viewport, without Android devices making parts of the page unreachable?
This is a provisional answer to my own question.
Adding a <meta name="viewport" content="width=1200"> line to the head section seems to force the browser to set the viewport to the specified size. However, since this isn't a true fix, and others may need a more flexible solution, I'm leaving it open for a more complete answer.
I can't get this line-height to vertical center some text across mobile browsers and other weirdness.
On Chrome and Firefox it works fine and is vertical center.
For some reason in this fiddle the exact same code does not v align center in chrome.
http://jsfiddle.net/SEOplay/D6LtM/
If I remove the position:fixed; left:0; top:0; from the #headTitle it works fine.
On Android Mobile 4.0.4, user agent, mozilla/5.0 it works fine and is vertical center.
On Android Tablet 4.1.2 same user agent it doesn't work and is off similar to the fiddle (they are all using the same stylesheet).
So basically
Chrome: Yes.
Firefox: Yes.
Android Mobile 4.0.4: Yes.
Android Tablet 4.1.2: No.
Fiddle Chrome? No
Here's the complete code:
HTML
<div id="headTitle">
<div id="headBtn">
<div id="hBtn"></div>
</div>
<h1>L'ART Magazine</h1>
</div>
CSS
body {
font-size: 10px;
line-height:1;
overflow:hidden;
height:100%;
width:100%;
/* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
div#hBtn {
background:url('../images/icon_set.png') no-repeat -4px -53px;
height:20px;
width:20px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
div#headBtn {
position:absolute;
width:40px;
height:40px;
border-right:1px solid #999;
cursor:hand;
cursor:pointer;
}
div#headTitle {
height:40px;
width:100%;
text-align:center;
background-color:#222;
position:fixed;
left:0;
top:0;
border-bottom:1px solid #ddd;
z-index:1000;
}
div#headTitle a {
color:red;
line-height:40px;
font-size:20px;
}
So what's up SO?
Oh and here's an image too
Give margin: 0px; for the h1 tag
Upadetd Fiddle
I'm developing a phone-gap application and testing it on 3 android devices. Some codes are:
Main area:
<body>
<div data-role="page" id="home">
<div class="banner"></div>
<div id="another_div">Welcome</div>
<div class="blank_div"></div>
<img src="img/connecting2.png" alt="Loading..." id="loading"/>
<div data-role="footer" class="footer_div">
</div><!--Footer-->
</div>
</body>
Some css:
.banner
{
width: 100%;
min-height:40%;
max-height:40%;
position:fixed;
top:0%;
display:block;
background-color:#FF0;
}
#now_play_div
{
white-space:pre-wrap;
font-size:1.5em;
position:fixed;
height:7%;
display:block;
background:#FFF;
width:100%;
text-align:center;
top:30%;
padding-top:1%;
-webkit-marquee: auto medium infinite scroll normal;
overflow-x: -webkit-marquee;
border-radius:10px;
}
.blank_div
{
width: 100%;
min-height:41%;
max-height:41%;
margin-left:auto;
margin-right:auto;
display:block;
}
.footer_div
{
color:#FFF;
position:fixed;
height:10%;
display:block;
background:#46639d;
width:100%;
text-align:center;
bottom:0px;
padding:1%;
}
Now the banner is fixed. blank_div is used so that my main content doesn't go under the fixed banner. After some work the loading image will be gone and filled with some dynamic content. I can scroll that content but my banner and footer is fixed. another_div is fixed too.
This system works perfectly on Sony ericsson(android version:2.3) and symphony(android version:4.0.4). But fails to work properly on Google nexus 7(Android: 4.3) In nexus while I scroll my main content that is dynamically loaded just under the blank_div the banner started to fall down. WEIRD!!!!!! While my contents go up, banner comes down. But in other 2 devices it works just fine. Does anybody know what's wrong?? Or what I'm missing?
I guess no more answer will come. So here is the answer which I found from #Era's comment.
.banner
{
width: 100%;
min-height:40%;
max-height:40%;
position:fixed;
top:0%;
left:0%;
display:block;
background-color:#FF0;
}
I am working on a mobile website have multiple input fields with background on the right, I have added the below css code for the same
.row input
{
width:100%;
padding:10px;
padding-right:30px;
font-size:18px;
background-repeat:no-repeat;
}
.row input.name
{
background:url(/images/mobile_default/icons/name_off.gif) no-repeat right 13px center;
margin-right:10px;
border-bottom:1px solid #f0f0f0;
}
And the below HTML for the same
<div class="row last">
<input name="ccname" placeholder="Name on Card" validate="name" class="name validate" type="text" autocomplete="on"/>
</div>
On Native Android browser it looks repeated background for all input area.
Please let me know if I had mistaken somewhere.
I have noticed an error in your css
.row input.name{background:url(/images/mobile_default/icons/name_off.gif) no-repeat right 13px center;margin-right:10px;border-bottom:1px solid #f0f0f0;}
The background-position in your background CSS should only use left or right and then top or bottom values. There is one value too much.
.row input.name{background:url(/images/mobile_default/icons/name_off.gif) no-repeat right center;margin-right:10px;border-bottom:1px solid #f0f0f0;}