On my page http://goo.gl/ kNAXq (remove the space in your browser, please don't replace the link here as I don't want google to link this page to my site.) when you click on the S in the MAP using your average pc/mac browser you get a popup with scrolling bars, which is intended. I do not see those borders on my android mobile phone's standard browser, though, what doesn't fit in is cut off there. What could be the cause?
Also Routenplanung and Zur Karte are not clickable even though they are valid links:
Routenplanung
and
<a style="a:link {text-decoration:underline;}" href="#mapdiv">Zur Karte</a>
Why do they not work as intended?
There's no scroll bars in mobile browsers, for the most part. You just need to drag the content in the div up, however, the div is too small to properly grab on to (at least based on what I see on the desktop, it's taking forever to load on my phone...).
Links don't work because you have another element on top of it... The <i> (why i?) is positioned absolute and over the top of the links.
First of all, <i> is for italicizing text and it's deprecated. A better setup, I believe, would be to put the shadow on the containing div. Just get rid of the i element. One downside is , you'll need to change how the background color is implemented on the grey table cells.
Just add shadow as a class to the div.
Then alter the css, like so:
.results-bl.shadow {
-webkit-box-shadow: inset 0px 0px 10px rgba(0, 1, 1, 0.5);
-moz-box-shadow: inset 0px 0px 10px rgba(0, 1, 1, 0.5);
box-shadow: inset 0px 0px 10px rgba(0, 1, 1, 0.5);
}
Related
This page http://wildlife.x-tremeteam.com utilizes the CSS border-image property and a .png image with a transparent edge to create a "torn paper" look on my divs. It works great except on my Android (Samsung SIII), whether I'm using its default browser or the Chrome app. On that I can see a slight edge on the inside and outside of the 20px border. Interestingly, I do not see the edge on the corners. The background of the div with the border is transparent. I only apply a background color to the div inside that.
Browsers on my desktop, the iPhone I use for testing and all renderings on responsinator.com don't show the edge of the image.
It must have something to do with the div's background-color property because if I set that to RED, the edges do turn red. However, making this property transparent won't remove it.
CSS is as follows, which also includes a default div property which did not help:
div {border: 0; border-style: none; }
.BoxGrunge {
border-color: #7777777; /* this won't really be seen */
border-style: double;/* this won't really be seen */
border-width: 20px 20px 20px 20px;
-webkit-border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
-moz-border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
background-color: transparent; /* otherwise there is a white edge on Android */ /*THIS DOESN'T HELP */
display: block !important;
margin: 0 0 5px 0;
}
Thanks, I have been staring at this for hours and can't figure it out.
I finally found it myself. Mostly.
It was the REPEAT value of the border-image properties.
After much testing with images and divs of different colors, I realized that all four sides (not the corners) were being slightly repeated in the other/wrong direction as well. So when my image was an orange box that was transparent at the outside edges, a tiny sliver of orange was being repeated on the outside edge. It did not happen on iPhone 6, just Android and possibly older iPhones.
In other words, for the top, the image was being repeated horizontally as needed. But it also repeated vertically just a little bit.
I am guessing this is some sort of Android bug.
I fixed it by using STRETCH instead for smaller media queries.
I don't like it but that's what worked.
Most mobile browser will have a default behavior to allow the users to continue scrolling when they reach the top or bottom of a page, leaving a white space on the top or bottom of the page. And then the whole page will bounce back to fill the white space. In native iOS applications, we can easily set images and even interactive elements for these top and bottom areas. I wonder if this can be done for pure web applications.
What I tried is to set background image of html,body, for example:
html, body {
background: url(../img/topnotification.jpg) no-repeat top center;
background-size: contain;
}
Unfortunately this didn't work because it seems the enter body was being over scrolled. I wonder if there is a special property we can set for the top and bottom empty over scroll areas for mobile websites.
I also have tried:
html:before, body:before {
width: 100%;
height: 100%;
top: -100%;
position: absolute;
background: url(../img/topnotification.jpg) no-repeat top center;
background-size: contain;
overflow: visible;
}
This apparently didn't work either.
I believe that this depends solely on the browser as I do not know of any html elements that specify white spaces resulting from over scrolling.
Personally I never experienced any thing like this in windows, chrome, and android.
You might be able to create an animation that happens when the scrolling reaches the bottom or the footer of the page, but I do not think anything can be done to fill in the white space. It is mostly likely browser based.
I'm creating small web-site, that contains forms with some text-inputs. I'm using this meta tag:
<meta name="viewport" content="width=device-width" />
to display some elements correctly on mobile device. I'm checking it using Android Chrome.
It causes problem: my border of form(simple div) and borders of text-inputs become very thick, but it is set 1px. So, this is form without meta tag:
And this is form with meta tag:
So, the first question is:
How to prevent 1px increasing with device-width meta-tag?
Also, as we can see, top and bottom padding are different for text-inputs and even for button(which is div, but not submit-input!). It is more visible on second image. I've understood, that it is caused by Android typing-underlining(at least for text-inputs). When you start typing word it is underlined for auto-correction or smth like that.
In first situation underline-width is also one pixel, so difference isn't so bad(but I want to fix it too). In second it is also thick, so there is big difference:
So, logical question is:
How to prevent underlining-width increasing with device-width meta-tag?
And of course, I don't understand.
WHY does this increasing mechanism affects simple div's??? There is no typing inside
This is div code:
<div id="form-submit">ЗАБРОНИРОВАТЬ</div>
div#form-submit {
display: table;
margin-bottom: 1em;
border: 1px solid black;
background-color: white;
outline: 0px;
font-size: 0.24em;
font-family: inherit;
padding-left: 0.3em;
padding-right: 0.3em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 0.7em;
margin: 0 auto;
margin-bottom: 1.6em;
cursor: pointer;
}
Finally, you can see difference between the second and the third image. When I started typing, button text moved to center a little bit...
It will be great, if somebody give explanation of any issue...
Your problem is that your site is not tailored for mobile devices, but you are trying to view it on a mobile.
Mobile devices have a .. let's call it a feature, where, upon selecting an editable field such as an input box, it will zoom in on that section (so you can read the text you are typing.) If your mobile did not do this automatically, with how your page has been coded, you are unable to read the text.
You can stop mobiles from zooming in by editing your <meta /> tag:
<meta name = "viewport" content = "width = device-width, user-scalable = 0, initial-scale = 1.0, maximum-scale = 1.0" />
This tells the browser:
Set the initial width to the viewport width (width of the screen.)
Do not allow the user to zoom the page
Set the initial zoom of the page to 100%
Set the maximum possible scale of the page (initiated by browser or user) to 100%.
The last property is the one that will prevent the mobile from zooming in on the text fields.
However, you ought to make your website mobile compatible, if you want people to view it on a mobile, but not allow them to zoom in. Not allowing them to zoom in, on a for-desktop designed site, is bad practise.
Google responsive design for ideas and techniques to retrofit your desktop design to be mobile friendly.
It's hard to formulate a brief title. What happens is that the background-color of the centered div extends to the left and right edges of the screen and the background-color of the body is ignored or overridden.
I'm using the twentythirteen theme for this document.
It sets a width smaller than the full width and uses margin:0 auto to center the content divs.
In a standard native web view component in our app on Iphone and Android, the automatic margin (left and right) does not become the background-color of the body, but white. Between elements in the content div the correct background-color shows through their margins.
Also, Chrome on Android shows the same white margins.
Have both leading OS developers decided that their respective -kits should do this, or what is going on? Note that the CSS validator throws up hundreds of errors - well, programming a proper theme from scratch is not in the budget for this project.
If you can link to a web page where this works, I could make the web view load that and check.
A background-color is set on several classes.
.entry-header, .entry-content, .entry-summary, .entry-meta {
background-color: #ffffff;
margin: 0 auto;
max-width: 604px;
width: 100%;
}
Delete the background-color and the issue will be fixed.
I have a centrally positioned container for my page content called #main. It is positioned absolutely as I wanted some space above the container. The centering therefore works with negative margins and a left:50% instead of using margin:auto.
The problem is that on my Android tablet in both chrome and stock browser, the website renders displaced to the left. This shouldn't be possible as the CSS should put it slap bang in the middle.
#main
{
position: absolute;
color: black;
left: 50%;
margin-left: -475px;
margin-top: 40px;
width: 950px;
height: 1600px;
background: #6B6B6B;
border: solid 1px black;
box-shadow: 10px 10px 10px #444444;
}
Interestingly I just removed the negative left margin code from above. On everything but my Android tab, it renders as expected with the container halfway across the browser window. On my Android it is snuggly positioned against the right hand side of the window. I am guessing that if you perform a -475px from THIS position, that results in the left offset. However, why is the main container not just overflowing the right edge before the margin moves it back? Why is 50% left not resulting in 50% left?
As always all discussion and advice gratefully accepted.
EDIT:
Further info, just tried removing absolute position, left 50% and using margin:auto. The main container is STILL on the left.
Fiddle.
To get something to center you tend not to use margin:auto; but margin:0 auto;.
Also the main reason you seem to not want to use relative positioning is so that you can have the #main div floating slightly from the top. Relative positioning allows this just fine.