I have a site which IE and FF render correctly but Chrome and Safari do not.
Here is the HTML:
<div class="cover">
</div>
<div class="nav">
</div>
<div class="misc">
</div>
Here is the CSS:
.cover{
position:absolute;
background-color:#00c9f8;
z-index:600;
height:100%;
}
.nav{
width:100%;
position:fixed;
top:0;
z-index:500;
}
.misc{
position:relative;
top:100%;
height:80%;
min-height:300px;
width:100%;
padding:0;
}
It would be expected that .cover will fill 100% of the viewport, which all browsers render correctly; .nav will be fixed at the top, which all browsers render correctly; and .misc will sit just off the viewport, which IE and FF renders correctly but Chrome and Safari do not. Webkit browsers instead make .misc sit at the top as if it had position: fixed.
In the example above .misc represents .orbit-wrapper in the actual site. Also the same problem exists for .menu-box-row, in which position: relative is not rendered correctly.
Many thanks in advance for a solution!
Percentage values used with relative positioning have been an issue in Webkit for awhile. You should be able to find a workaround by changing the .orbit-wrapper's position to absolute and then tweaking the other elements' styles accordingly to account for the disruption in your flow. Good luck.
Related
I have divs in my web page with background-images, absolute position and -1 z-index in order to make the images static and scroll rest of divs over these images. Its working flawlessly in web browsers but I'm unable to get the same functionality in mobile phones. Mobile views in web browsers shows exactly the way it should work but rest of the divs doesn't scroll over these images in mobile browsers rather, unlike web browsers, the images also scrolls.
Here's the JsFiddle link for the below code.
HTML
<div class="container">
<div class="section1">lorem ipsum dolar imit</div>
<div class="section3">
<div class="section3-img"></div>
</div>
<div class="section1">lorem ipsum dolar imit</div>
</div>
CSS
body{margin:0; padding:0;}
.container{height:800px; position:relative;}
.section1{
width:100%;
height:400px;
background-color:purple;
color:white;
z-index:10;
}
.section2, .section3{
width:100%;
height:300px;
overflow:hidden;
position:relative;
}
.section3-img{
background-size: cover;
z-index:-100;
width:100%;
height:300px;
position:absolute;
background:url('http://i.istockimg.com/file_thumbview_approve/81531733/6/stock-photo-81531733-texture-of-the-oak-stump-background.jpg') 0 top repeat fixed;
}
PS: I'm yet testing on chrome browser in android phone.
Well, I would rather position a container holding the image fixed.
Because, your section3 and section3-img container scroll. So positioning a background-image as fixed would result in the question fixed to what?
Obviously mobile browsers define it as fixed to parent. And because the parent container moves with swiping so does the background-image.
I positioned a fixed div: https://jsfiddle.net/mh7eza4e/8/
HTML
<div class="container">
<div class="bg-img"></div>
<div class="section1">lorem ipsum dolar imit</div>
<div class="section3"></div>
<div class="section1">lorem ipsum dolar imit</div>
</div>
CSS
html,body{margin:0; padding:0;height:100%;}
.container{height:800px; position:relative;}
.section1{width:100%; height:400px; background-color:purple;color:white; z-index:10;}
.section2, .section3{ width:100%; height:300px; overflow:hidden; position:relative;}
.bg-img{
position:fixed;z-index:-100;
width:100%;height:100%;height:100vh;
/* "height:100%" as a fallback for older browsers, use only if needed */
background:url('http://i.istockimg.com/file_thumbview_approve/81531733/6/stock-photo-81531733-texture-of-the-oak-stump-background.jpg') 0 top repeat fixed;
background-size:cover;
}
If multiple fixed background images for each section are what you're after, then I'm afraid that's not possible with pure CSS. You need to use JS from here on.
See here: https://jsfiddle.net/mh7eza4e/17/
JS
$(window).on('scroll', function() {
var scrolledTop = $(window).scrollTop(),
windowHeight = $(window).height();
$('.section').each( function() {
var $section = $(this),
elemTop = $section.offset().top,
sectionHeight = $section.outerHeight();
if(elemTop-scrolledTop < windowHeight/2 && elemTop-scrolledTop > -sectionHeight) {
$section.addClass('active');
} else {
$section.removeClass('active');
}
})
});
$(window).trigger('scroll');
Depending on scroll position relative to the viewport I set an 'active' class to the section currently in viewport. The active section triggers a CSS-transition (using opacity) of the multiple fixed positioned background image containers.
I want to fit an image with his parent dimensions. I don't want to use the image as background because is not clearly for google whether the image is using for styling or for content propose.
Anyway, i found object-fit and seems to be what I need.
My big problem now is that object-fit and hover doesn't work together as I expected.
Here is my code:
<div>
<img src="http://cdn2.hubspot.net/hub/53/file-385992610-jpg/html-code.jpg" />
</div>
<style>
div{
width:200px;
height:100px;
overflow:hidden;
}
div img{
width:100%;
height:100%;
object-fit:cover;
opacity:0.5;
}
div img:hover{
opacity:1;
}
</style>
And here is my fiddle:
http://jsfiddle.net/jx0ntkmy/
Hovering several times you will see a distortion of image. I have tested in firefox and chrome. In chrome there is no problem, but in firefox it is.
Working on a responsive design and gradually losing hair and sleep. This one seems like a genuine webkit bug: http://jsfiddle.net/TAvec/
The problem is quite clear there - webkit interprets the 20% padding as 20% of the parent's content box, while firefox and opera interpret it as 20% of the parent's total box (including the parent's padding).
Any ideas how to work around this whilst retaining the absolute positioning?
You can wrap the content of your <aside> in a div and assign the padding to that, rather than to the <aside>. That way you can ensure that the padding in both FF and Chrome (haven't tested O or IE) renders relative to the container i.e., the <aside>.
<!-- HTML -->
<article>
<h1>Parent</h1>
<p>Content...</p>
<aside>
<div class="content">
<h1>Aside child</h1>
<p>The prime minister also suggested the move would have implications for the UK's EU and Nato membership.</p>
</div>
</aside>
</article>
//CSS
article{
background:chocolate;
padding-left:40%;
position:relative;
}
aside{
background:chartreuse;
position:absolute;
left:0;top:0;bottom:0;
width:20%;
}
article div.content { //'%' declarations relative to parent
width: 100%;
height: 100%;
padding: 20%;
border:20px solid black;
background-color: #fff;
}
Here it is in action: http://jsfiddle.net/KYyR7/3/
I have a problem with a site I am doing some maintanence on, the latest test version can be found here http://www.smithandgeorg.com.au/new/ If viewed in IE7-9 or Opera this page displays as intended, however in Firefox and Safari the menu is positioned so that it is against the left side of the screen (it's best seen rather than described).
The problem seems to stem from my use of positioning. The #content element is positioned position:relative; top:0px; left:0px so that when the #menu element (which is nested inside) is positioned position:absolute; left:0px it will be pushed right up against the left side of the #content element, as happens correctly in IE9 and Opera. However Firefox and Safari seem to ignore the fact that #content is positioned relatively and just push #menu up to the left side of the screen.
I tried to reproduce the problem in the simple page below, but everything worked as expected.
<html>
<body>
<div style="border:1px solid red; width:100px; height:100px; position:relative; left:0px">
<div style="border:1px solid black; width:100px; height:100px; position:absolute; top:60px; left:20px">
</div>
</div>
</body>
</html>
Any help would be greatly appreciated :)
Firefox usually ignores position:relative on table elements, but this can be fixed by adding display:block to #content:
#content {
position:relative;
top:0;
left:0;
display:block;
}
SO question/answer about position:relative
zIndex issues are a common problem in Internet Explorer. My question basically is, can the following be done in IE? I've been trying but IE keeps putting the #middle div above or below...
Your biggest problem here is the container.
It can work if you don't put your container in an absolute position, or if you can put the ontop one outside the container
Example without absolute on the container
<div id="container" style="width:300px; height:300px; background-color:#CCC;">
<div id="below" style="width:200px; height:200px; background-color:#C00; top:0; left:0; position:absolute; z-index:2;"></div>
<div id="ontop" style="width:100px; height:100px; background-color:#03F; top:0; left:0; position:absolute; z-index:4;"></div>
</div>
<div id="middle" style="width:150px; height:150px; background-color:#0F9; top:0; left:0; position:absolute; z-index:3;"></div>
Example with ontop outside the container
<div id="container" style="width:300px; height:300px; background-color:#CCC; top:0; left:0;position:absolute; z-index:1;">
<div id="below" style="width:200px; height:200px; background-color:#C00; top:0; left:0; position:absolute; z-index:2;">
</div>
</div>
<div id="ontop" style="width:100px; height:100px; background-color:#03F; top:0; left:0; position:absolute; z-index:4;"></div>
<div id="middle" style="width:150px; height:150px; background-color:#0F9; top:0; left:0; position:absolute; z-index:3;"></div>
The jsfiddle linked in the comments to the question already has the correct answer implemented for maintaining the current document tree structure: the container must be forced into the normal flow via 'position: static'. Otherwise IE assumes all contained positioned elements are based on context of the z-index of the container (and in turn their z-indexing only acts relative to the container and the container's children), essentially as if the container box is not in the normal flow, even if the container was not explicitly positioned.
Here is a jsfiddle of the question without position: static attached to the container.
Here is the jsfiddle with position: static attached, as linked in the comments.
The first breaks in IE7 mode in IE9 (works fine in chrome), the second works in IE7 mode in IE9 (and works in chrome).
If 'position: static' is not an option, you will have to move the div outside of the container so that it is at least sibling to the middle div, as demonstrated in the other answer.
It's non-intuitive because z-index context for IE is based on the degree that various elements are sibling to each other within context to their flow/the normal flow, not the document structure.