I've been researching this issue for the past hour and saw similar questions but I'm not sure they are the same exact problem. Probably related, somehow, but none of the answers helped me fixed my issue.
Take the following code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
height: 100%;
margin: 0;
}
main {
background-color: orange;
height: 1500px;
margin: 50px;
}
footer {
background-color: green;
position: fixed;
height: 50px;
left: 100px;
right: 100px;
bottom: 100px;
}
</style>
</head>
<body>
<main></main>
<footer></footer>
</body>
</html>
This hard to debug because I can't seem to reproduce the problem consistently. I keep scrolling up and down - making the address bar on Chrome for Android show and hide - eventually, something like this will happen:
For some reason, the footer is being drawn in the correct place (as specified by the CSS), but Chrome dev tools detect the element in a different position (not always like the screenshot shows).
Why is this a problem?
Assume I have clickable elements inside footer, the clickable area for those elements will be in the "blue" area detected by Chrome dev tools and not where the footer is actually being drawn (the green area), as it should because that's what the user is seeing.
Thoughts?
EDIT: I'm leaving the code below here but I found out it's not working as I expected it. It did work during my initial testing but our QA found out that it didn't actually solve the issue we were having. Right now, there's no workaround that I'm aware and we need to wait for the Chromium team to fix the issue on their end.
NON-WORKING SOLUTION
I might just have found a workaround for this Chromium bug.
I'm testing this on a Pixel 2 running the latest Chrome, not sure how nice it will work for lower end devices. It's a bit ugly but it seems to work for me.
What I did was replace the offending element with itself (forcing a browser re-layout) on the touchend event. This is perfect because the problem only exists on mobile and touchend does not exist on desktop versions.
const body = document.getElementsByTagName('body');
const button = document.getElementsByTagName('button');
const footer = document.getElementsByTagName('footer');
function randomColor() {
button[0].style.backgroundColor =
`hsla(${Math.random() * 360}, 100%, 50%, 1)`;
}
window.addEventListener('touchend', function() {
body[0].replaceChild(footer[0], footer[0]);
}, false);
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
main {
background-color: orange;
height: 3000px;
margin: 10px;
}
footer {
border: 2px solid green;
background-color: greenyellow;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
}
button {
border: 2px solid black;
background-color: white;
cursor: pointer;
width: 50%;
height: 70%;
}
<main></main>
<footer>
<button onclick="randomColor()">CLICK ME!</button>
</footer>
Related
I'm trying to apply this method of the Sticky Footer: http://code.google.com/p/cleanstickyfooter/
It works great, however, I have one problem. The design for my particular site has a 34px margin at the top of the page. So I've tried a few ways of implementing it, either by doing body {margin-top:34px} or doing container {margin-top:34px}.
However, in both cases, the Sticky Footer gets messed up. When I try to compensate for the 34px, it doesn't ever seem to work out.
Any ideas?
Here's a Fiddle example: http://jsfiddle.net/jrZKb/
Using the Modern Clean CSS Sticky Footer, it's working (on FireFox and IE9):
http://jsfiddle.net/jrZKb/1/
<body>
<header> Header</header>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
header
{
background-color: green;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: blue;
}
im making a self financial accounting program but im gonna use html,css and php to do it
i have a basic layout with 5 main divs on the front page
here it is the mock:
http://s24.postimage.org/le9yrx4np/divs.jpg
i never coded before and im failing hard
i want this layout compatible with "desktops" this is my desktop version
im working based on a 1024 x 768 screen
but i want webkits compatible for all browsers because i want this able to resize if its a little bigger or smaller
im not sure if need em since i can just set things to like 100% but thats where my problem starts
here is my work so far
http://jsfiddle.net/dhJPS/
my prblems are
the middle three divs are being overlapped by the right div, notice on the words how they are not centered from the left div to the right div
i cant seem to understand the concept of floating to well i cant make this layout work like i want
anyways if you can help me out a little with this one is greatly appreciated!!
thanks
#leftside {
background-color: blue;
width: 170px;
height: 770px;
float: left;
}
#intab {
background-color: yellow;
width: 100%;
height: 297px;
}
#currentday {
background-color: white;
width: 100%;
height: 170px;
}
#outtab {
background-color: yellow;
width: 100%;
height: 297px;
}
#rightside {
background-color: black;
height: 770px;
width: 200px;
float: right;
margin-top: -765px;
}
* {
margin: 0px;
padding: 0px;
list-style-type: none;
}
body {
text-align: center;
display: block;
}
img {
border: none;
}
You simply need to rearrange some things.
When floating something to the right, the HTML always need to come before any other HTML. Right, left, static is the best order to follow.
You always want to cascade your CSS. Put global styles at the top of the style sheet. The body styles should be at the top of your CSS, not the bottom.
I added a wrapper div to set a minimum width. This way the interior content will never go below that width, ensuring things never overlap. However they will expand as much as needed.
It is rare you need to set width: 100%; in the CSS. It's not always a bad thing, but you shouldn't bother setting that unless you specifically know you need it.
I rearranged some things, and removed some of the HTML that jsFiddle don't need.... UPDATED FIDDLE HERE
Here is your answer.
Key issues:
margin
inner div to group all the central ones
[VERY IMPORTANT] display: inline-block; - This will make sure that your div will be the exact size you defined. if not used it will use 100% for both width and height
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.panels {
height: 768px;
}
.rightside, .leftside {
width: 170px;
height: 100%;
background-color: yellow;
display: inline-block;
}
.leftside {
float: left;
}
.rightside {
float: right;
}
.innerPanels {
height: 100%;
margin: 0 170px;
}
.intab, .outtab {
height: 25%;
background-color: lime;
opacity: 0.75;
}
.currentday{
height: 50%;
background-color: darkgray;
}
</style>
</head>
<body>
<div class="panels">
<!--LEFT SIDE -->
<div class="leftside">left side</div>
<!-- RIGHT SIDE -->
<div class="rightside">right side</div>
<div class="innerPanels">
<!-- IN -->
<div class="intab">in</div>
<!-- CURRENT DAY -->
<div class="currentday">current day</div>
<!-- OUT -->
<div class="outtab">out</div>
</div>
</div>
</body>
</html>
Thanks in advance for any advice you can offer! I've got an overlay that works well on a desktop version of my website. However, when I design the overlay for use on a mobile, it gives me problems. Here's the jfiddle:
http://jsfiddle.net/kevindp78/bs3FT/1/
Code is below. When I try this in a mobile view, the content seems to be appearing at the wrong level (maybe below the #fixedoverlay but above the #overlaymatte?) Basically, I can't interact with the content in the #overlaycontent for some reason. It's got a layer of dark background over it, and there's only a strip of white at the top of the div. Any ideas? Thanks!
My CSS:
#fixedoverlay, #overlaymatte {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
z-index: 999;
}
#overlaycontent {
position: relative;
width: 960px;
margin: 25px auto;
max-height: 75%;
overflow: auto;
background: #fff;
padding: 20px;
/* border: 20px solid #fff; */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index: 9999;
}
#overlaymatte {
background: none;
}
My HTML
<div id="fixedoverlay">
<div id="overlaymatte"></div>
<div id="overlaycontent">
<div><p>Here's my content</p><p>Here's my content</p><p>Here's my content</p><p>Here's my content</p><p>Here's my content</p></div>
</div>
</div>
Apologies, but this is the result of an HTML and javascript issue related to the mobile design software I am using (Mobify.) Essentially, I have a bit of javascript that automatically appends the overlay:
function popUpOverlay(){
$('body').append('<div id="fixedoverlay"><div id="overlaymatte"></div><a title="close" href="#" class="closeoverlay">Close</a><div id="overlaycontent"></div></div>');
$('#overlaycontent').append(loaderimg);
$('#loaderimg').show();
$(window).keydown(function(e){
if(e.keyCode == 27) {
$('#fixedoverlay').remove();
}
})
}
My problem was that I was applying Javascript twice throughout the website: once in the head of the document through a reference link, and once through Mobify's Global Selections / Script feature. Since javascript was being applied twice, I was actually seeing two instances of the overlay: one on top of the other. I fixed the javascript so that only one instance occurred, and the problem no longer happens.
I am working on a portfolio project. I have a relatively positioned image in a relatively positioned div. Using z-index I have a fixed position div on top of this, inside of which there are three floated divs, each of which has a cursor url specified in css. All of this is in another div. The aim is to have a previous, play and next cursor displayed on top of an image to control the display of images.
It works well in Safari, Firefox, Chrome. It does not work in IE (9,8 or 7). The cursor does not show when over the image. Somehow, the fixed position div is dropping behind the image, even though it's z-index says it should be above.
I have read a lot on this. I have considered the stacking contexts, and I believe they are OK in my code. I have investigated making all the objects have relative positioning in case fixed and relative positioning is creating different stacking contexts. This did not solve it. I have investigated quirks and standard mode. Nothing seems to work.
I have uploaded stripped back example pages of my problem here:
http://bigflannel.com/portfolio/ie-test
Any help very very gratefully appreciated. I'm 8 hours into debugging and stuck.
The HTML
<div id ="website">
<div id="media-panel">
<img id="image0" class="image" src="http://bigflannel.com/portfolio/admin/albums/album-5/lg/fk01117.jpg">
</div><!-- #media-panel -->
<div id="navigation-panel">
<div id="left-area"></div>
<div id="play-pause-area"></div>
<div id="right-area"></div>
</div><!-- #navigation-panel -->
</div><!-- #website -->
The CSS
#website {
position: relative;
z-index: 0;
}
#media-panel {
position: relative;
height: 600px;
z-index: 1;
}
.image {
position: relative;
max-height: 600px;
max-width: 600px;
z-index: 0;
}
#navigation-panel {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 1500px;
height: 900px;
}
#left-area {
position: relative;
float: left;
cursor: url(http://bigflannel.com/development/mobileApp/bigflannel-portfolio/images/prevL.cur), auto;
width: 500px;
height: 900px;
}
#play-pause-area {
position: relative;
float: left;
cursor: url(http://bigflannel.com/development/mobileApp/bigflannel-portfolio/images/playL.cur), auto;
width: 500px;
height: 900px;
}
#right-area {
position: relative;
float: left;
cursor: url(http://bigflannel.com/development/mobileApp/bigflannel-portfolio/images/nextL.cur), auto;
width: 500px;
height: 900px;
}
Unfortunately IE is very buggy when it comes to cursors. This is actually not a z-index issue. The layering is working as expected. You can test this by putting a background color on the #navigation-panel as it goes over the image. It has to do with IE and the behaviour of cursor.
Solution: (for IE9)
/* Background with no opacity */
#navigation-panel {
background: rgba(0, 0, 0, 0);
}
You can probably fix with earlier versions of IE by using the filter.
Im just wondering if this is a browser rendering issue or incorrect css.
A nice way to scale a div in a defined aspect-ratio is, using a transparent image as a child element.
I have a small demo here. Under need this question.
But why doesn't it work nicely if I want a height of 100%.
I tested this in FF10, Safari 5.1.2, IE8 and IE9. (only ie8 seems to render correctly...)
Hope somebody can explain the problem and maybe come up with a solution.
Regards,
Rik
<!DOCTYPE html>
<html lang="uk">
<head>
<title>test</title>
<style>
html
, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: green;
}
/* AUTO WIDTH - doesnt render correct when scaling the browser window to a smaller size */
.holder1 {
position: relative;
display: inline-block;
height: 100%;
width: auto;
background: yellow;
border-right: 1px solid red;
}
.holder1 .ratio {
display: block;
height: 100%;
width: auto;
}
/* AUTO HEIGHT - works fine */
.holder2 {
position: relative;
display: inline-block;
height: auto;
width: 100%;
background: yellow;
border-right: 1px solid red;
}
.holder2 .ratio {
display: block;
height: auto;
width: 100%;
}
</style>
</head>
<body>
<span class="holder1">
<img src="/images/empty_image.png" class="ratio" alt="Ratio image">
</span>
</body>
</html>
After view your question, I have some idea and suggest for your code:
1.Different between width:auto and width:100%, when you set auto for width, you leave the browser handle this width, with every different browser, they will handle width:auto follow their own rules. With width:100%, you force the browser must expand to have full width.That is what I think.
But for sure your div can expand 100% on every cross browsers, add css min-width:100%, it will do as you wish correctly.
2.About your CSS, I need you take a look at position:relative, this line of code have no sense, in this situation,
position:relative = position:static
when you use position:relative, you must describe where is the position you wish your element relative to, add top or left to do it.
Hope it can help you!