I have a problem with Android browsers below version 4, where I have a parent scrollable div, with vertical scrolling enabled via CSS property overflow-y:auto, and a nested child div (smaller in size than parent) with overflow-x:auto horizontal scrolling enabled.
In every other browser, when touching the nested horizontal scrolling div, and moving up or down, the vertical scrolling kicks in, and the outer div scrolls vertically, which is how I would expect it to behave.
On older Android browsers, when doing this, no vertically scrolling occurs. When debugging we found that in this situation no touchmove or scroll events fire when moving touch up or down. They fire correctly, as you would expect, when moving left or right, horizontally.
Good phones to see this on are HTC One X and Samsung S3.
The HTML page test app below demonstrates the problem:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>test</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-size: 16px;
}
#childScrollableDiv {
height: 300px;
overflow-x: auto;
overflow-y: hidden;
width: 600px;
border: 1px solid red;
white-space: nowrap;
}
#parentScrollableDiv {
height: 600px;
overflow-y: auto;
overflow-x: hidden;
width: 600px;
border: 0px;
}
</style>
</head>
<body class=''>
<div style="color:red">
<p>some text outer
<p>some text outer
<p>some text outer
<div style="color:green" id="parentScrollableDiv">
<p>some text
<p>some text
<p>some text
<p>some text
<p>some text
<p>some text
<p>some text
<p>some text
<p>some text
<p>some text
<div style="color:blue" id="childScrollableDiv">
<p>internal text internal textinternal textinternal textinternal text internal textinternal textinternal textinternal text internal textinternal textinternal text
<p>internal text internal textinternal textinternal textinternal text internal textinternal textinternal textinternal text internal textinternal textinternal text
<p>internal text internal textinternal textinternal textinternal text internal textinternal textinternal textinternal text internal textinternal textinternal text
<p>internal text internal textinternal textinternal textinternal text internal textinternal textinternal textinternal text internal textinternal textinternal text
<p>internal text internal textinternal textinternal textinternal text internal textinternal textinternal textinternal text internal textinternal textinternal text
<p>internal text internal textinternal textinternal textinternal text internal textinternal textinternal textinternal text internal textinternal textinternal text
<p>internal text internal textinternal textinternal textinternal text internal textinternal textinternal textinternal text internal textinternal textinternal text
</div>
<p>some text
<p>some text
<p>some text
<p>some text
<p>some text
<p>some text
<p>some text
<p>some text
<p>some text
<p>some text
</div>
<p>some text outer
<p>some text outer
<p>some text outer
</div>
</body>
</html>
Related
When I attempt to rotate text for a label, I can either get non-anti-aliased text or blurry text, but not nicely anti-aliased text.
This text looks bad on a "standard" 1920*1080 monitor, you might not notice the pixelation on a higher resolution screen.
https://jsfiddle.net/ft2s0d71/
<head>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
</head>
<div>
<p id="a">
a. (Some Text Label - not pixelated)
</p>
</div>
<div>
<p id="b">
b. (Some Text Label - blurry)
</p>
</div>
<div>
<p id="c">
c. (Some Text Label - pixelated)
</p>
</div>
<div>
<p id="c2">
c2. (Some Text Label - pixelated)
</p>
</div>
<div>
<p id="d">
d. (Some Text Label - pixelated)
</p>
</div>
* {
font-family:"Source Sans Pro", sans-serif;
font-size:11pt;
font-weight:400;
}
#a {
position:absolute;
top:0;
left:10px;
}
#b {
position:absolute;
top:130px;
left:-70px;
transform: rotate(270deg) translate3d(0,0,0);
}
#c {
position:absolute;
top:140px;
left:-50px;
transform: rotate(270deg)
}
#c2 {
position:absolute;
-moz-osx-font-smoothing: grayscale; /* Firefox */
-webkit-font-smoothing: antialiased; /* WebKit */
top:142px;
left:-30px;
transform: rotate(270deg)
}
#d {
position:absolute;
top:70px;
left:70px;
transform: rotate(180deg);
writing-mode: tb-rl;
}
The above image demonstrates my attempts. Does anyone know how to force this render correctly?
After further investigation it appears that the font rendering looks ok on all angles of rotation except for 90 and 270 degrees. Altering this by .1 degree seems to be sufficient to fix the rendering of the text.
ie.
transform: rotate(270.1deg)
I should start by saying I'm relatively new to the likes of HTML/CSS. I have an image that is 2880x540 and I'm looking to set it as the landing page for a website. This means I need to have the image centered so that the excess width bleeds off the browser window, without having a scrollbar (the excess resolution is there for the likes of higher resolution monitors). I'm planning on using two regions of the image as rollovers for two other images that have the same proportions.
As of right now my code is very basic:
<!DOCTYPE html>
<head>
</head>
<body>
<img src="sitewide.png" width="2880" height="540" alt=""/>
</body>
</html>
Any feedback is greatly appreciated.
You can set your image as a centered background of a div:
<!DOCTYPE html>
<head>
<style>
body{
overflow-x: hidden;
}
#bigImage{
background:url('sitewide.png') no-repeat top center;
width: 2880px;
height: 540px;
}
</style>
</head>
<body>
<div id="bigImage"></div>
</body>
</html>
I have a problem with IE8 in quirks mode. I have an outer div element that wraps two inner divs.
<div style="margin-left:160px; margin-top:10px; margin-right:0px; height:10px; background:blue;">
<div style="position:relative; float:left; width:10px; height:10px; background:orange;"></div>
<div style="position:relative; margin-left:10px; margin-right:0px;height:10px; background:green;"></div>
</div>
The inner divs should span the whole of the wrapper div, and it works fine in firefox and chrome. But when I view this in IE8 there is a strange gap between orange div and the green div. Does anyone know how to fix this (or to work around it)? Also, I can't put a doctype declaration anywhere in the document.
Use absolute positioning on the content and relative positioning on the container for quirks mode:
<html lang="en">
<head>
<title>Quirksmode Tests</title>
</head>
<body>
<div style="position:relative; margin-left:160px; margin-top:10px; margin-right:0px; height:10px; background-color:blue;">
<div style="position:absolute; top:0; width:100%; right:0; height:10px; background-color:green;"></div>
<div style="position:absolute; top:0; left:0; width:10px; height:10px; background-color:orange;"></div>
</div>
</body>
</html>
References
CSS - Quirks mode and strict mode
What happens in Quirks Mode in web browsers?
I am attempting to overlay an image above a pdf embedded in and iFrame.
This code results in the image falling behind the iFrame (tested by changing the bottom attribute to -10px and the bottom of the image becomes visable)
The only two methods I was aware of were using z-index, and the fact position absolute should place the object on top, but neither appear to be working.
<div id="images" style="float:right;position:relative" width="400" height="250">
<img src="images/Next_Black_Arrow.png" style="height:25px;width25px;float: left;z-index=10;position:absolute;bottom:10px;left:250px;">
<iframe SRC="testFiles/Categories of pattern matching characters.pdf#toolbar=0&navpanes=0&scrollbar=0" style="z-index=1;position:relative;" width="400" height="250"></iframe>
</div>
*Applogies for the lack of separated css
While that works, unfortunately it doesn't if you change the iframe link to a pdf.
See http://jsfiddle.net/vr4rX/4/
I think it must be a bug in the adobe reader. Could really do with a work around.
have a look at my solution: http://jsfiddle.net/vr4rX/1/
HTML:
<div id="images">
<img src="http://t1.ftcdn.net/jpg/00/02/78/72/400_F_2787285_mlDf8ah974XHflVFrbQB3FM6Qxu1MT.jpg" />
<iframe SRC="http://www.google.de" width="400" height="250"></iframe>
</div>
CSS:
#images {
float:right;
width: 400px;
height: 250px;
position: relative;
z-index: 1;
}
#images img {
height:25px;
width:25px;
z-index=2;
position:absolute;
bottom:20px;
right:20px;
}
I have an anchor element with in it a div "imgbox" containing an image and a caption, and a div "textbox" containing some text.
Now when I float the div.imgbox, the img element inside is no longer clickable; the caption and the text in the div.textbox is. This only happens in Internet Explorer; all other browsers work just fine.
Does anyone know what's causing this (and how to solve it)? Thanks!
here's the css and html I'm using:
<style>
.wrap a {
display: block;
overflow: hidden;/* makes this a wrap around floats */
cursor: pointer;
}
.imgbox {
float: left;
}
.textbox {
overflow: hidden;/* positions the div next to the float */
}
</style>
<div class="wrap">
<a href="#">
<div class="imgbox">
<img src="http://jaron.nl/misc/dummy.gif" width="80" height="45" alt="" />
caption text is clickable
</div>
<div class="textbox">
some text here
</div>
</a>
</div>
You are using Block element in div in between the img and a link tag .