Yesterday i check that one highlights products slide that i have in the home of one webpage is not property vertical aligned only on firefox, it works fine on IE and Chrome.
I was searching info and i find a lot of many years ago bugs on FF. I try a few solutions i find but no one works.
<div id="feature-wrap-container">
<div id="feature_wrap">
<div id="scrollable">
//a list of element floating left
</div>
</div>
</div>
#feature-wrap-container{
background-color: #ffffff;
width: 100%;
height: 260px;
}
#feature_wrap {
width: 960px;
height: 260px;
overflow:hidden;
position: relative;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
#scrollable {
height:100%;
}
On chrome and IE the div is center on the window and in firefox the feature_wrap align to right and make the window bigger than the 100%.
The slide is based on: http://wordpress.org/extend/plugins/featured-posts-slideshow/, but obviously modified.
Thanks in advance.
See I have created a fiddle of yours here, and it looks good for me in firefox. I have reduced the width of the #feature_wrap and checked in firefox, and it is working. What is the issue are you facing?
Get the full image here.
Instead of using overflow: hidden it's better to use overflow-x: hidden, overflow-y: hidden as below:
#feature_wrap {
width: 960px;
height: 260px;
overflow-x :hidden;
overflow-y: hidden;
position: relative;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
Related
I have a page that displays correctly in Google Chrome, Firefox, and Opera, but has an error in Internet Explorer 11.
Here is the HTML, with the unnecessary parts stripped out:
<div class="container">
<div class="page-content">
<div id="corner"></div>
... page contents here
</div>
</div>
And here is the CSS:
.container {
margin: 0;
min-height: 100%;
padding: 0;
}
.page-content::after {
content: "";
display: block;
height: 1px;
}
.page-content {
background: linear-gradient(137deg, transparent 121px, #ffffff 20px) repeat scroll 0 0 rgba(0, 0, 0, 0);
margin: 190px 100px 150px;
max-width: 64em;
padding: 10px 120px 145px;
z-index: 2;
}
.page-content {
margin: auto;
max-width: 64em;
padding: 0 1em 1em;
}
#corner {
background-color: #ffffff;
background-image: url("corner.png");
display: block;
height: 200px;
left: 120px;
position: absolute;
top: 20px;
width: 200px;
z-index: -1;
}
As you can see in this screenshot the #corner element is not positioned correctly.
I'm really not sure what to try, since this is specific to Internet Explorer. Been trying different things with the code over the past couple of hours with no luck so far.
try adding position:relative to the containing elements of div#corner, .container and/or .page-content
position:relative on a containing element sets the bounds of an absolutely positioned element equal to the parent element, rather than the whole page.
so a value of left:0px isn't equal to the top left side of the page, but the left side of the parent element.
It is somewhat surprising this only occurs in ie11 though as its a pretty straightforward issue which makes me suspect that there could easily be a secondary solution, but then again, having had to support IE since ~ie6 I guess I'm not really all that surprised if its just IE sucking.
Side note: Not sure if this is what you're trying to do, but min-height:100% does not make content's size to 100% the height of the screen.
Replace that with this:
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
Anyway, you've set #corner to
position: absolute;
top: 20px;
left: 120px;
And that's where IE is placing it, relative to the entire page. It's doing what you're telling it to do. With the other browsers, it's position is absolute compared to that header. But to take a guess, you probably wanted to set it to position: relative.
Just in case this helps someone else:
I had a similar issue. It looked like ie11 was ignoring the 'right' property:
right: -320px;
but it turned out to be because I had set the 'left' property to:
left: initial;
Turns out the 'initial' keyword is unsupported by ie11:
left: initial doesn't work in internet explorer
I have a left panel with fixed position(it's always on the left side, nomatter how much you scroll) and also few elements in that left panel. On a certain event a mask appears(it goes over everything because position:fixed; z-index: 102).
My goal is when X event fires and the mask come up, to show up the holder element over the mask.
Here is a fiddle showing my problem: JSFIDDLE
Here is my HTML:
<div class="leftpanel">
<div class="just-random-elem" style="height: 30px;">just an element to move the holder abit down</div>
<div class="holder">asdasdas</div>
</div>
<div class="mask"></div>
<div style="height: 9999px;">Just to make sure both mask and leftpanel are with fixed positions.</div>
and here's the CSS:
.mask {
opacity: 0.85;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 101;
background-color: #000;
}
.leftpanel {
width: 250px;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: red;
padding: 15px;
}
.holder {
width: 230px;
height: 90px;
background-color: #fff;
z-index: 99999; <<<<<<<<<< This is NOT working!
}
Your .holder element is no positioned, so z-index simply has no effect on it. You need to add a position value different from the default static – relative will do.
http://jsfiddle.net/DJA5F/4 works that way in every browser I tested – except Chrome. Can’t spontaneously say if Chrome is handling stacking contexts correct here and the others are not – or if it’s the other way around.
Works in Chrome as well if you put #mask into .leftpanel: http://jsfiddle.net/DJA5F/5 – might not be the nicest workaround, but since it’s postioned fixed, it does not actually matter, since the orientation for fixed is the viewport.
http://jsfiddle.net/talmuda3/s9QyR/
footer {
margin-top: 1em;
width: 100%;
height: 20em;
position: relative;
bottom: 0;
left: 0;
}
The layout of an offline website is tricky. The content overflows into the footer.
Part of the code is as above.
How can the content be adjusted so the footer remains at the bottom, and the content stretches across the site without overlapping the footer. Please be gentle. Checked Chris Coyier's site for any tips - might just have missed something. Can anyone help?
You're pushing the article down with the top: 12em declaration. You should give the footer the same property, which fixes the issue: http://jsfiddle.net/s9QyR/1/
you should also push footer top:12em; that will add footer in right position. demo
I think this is what you're after - jsFiddle
article {
margin-top:12em;
width:80%;
height:100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 3em;
padding: 1em;
z-index: 2;
background: transparent;
overflow: visible;
}
footer {
margin-top: 1em;
width: 100%;
height: 20em;
}
It seems that changing the positioning broke the natural flow of your elements.
You may want to try this method to avoid having to position everything down the line.
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.
I am trying to set the height of a child element as a percentage of its parent.
Here is my set up:
.html, .body {height: 100%; width: 100%}
/* test is a child of body to ensure content is aligned in the middle */
.test {
width: 90%;
height: 100%;
position: absolute;
left: 5%;
top: 0%;
margin: -0% 0 0 0%;
}
/* top banner */
.banner {
height: 100px;
margin-left: 2%;
width: 96%;
}
/* rest of the content */
.center{
background-color: #FFFFFF;
height: 80%;
margin-left: 2%;
margin-top: 10px;
overflow-x: auto;
padding: 3px;
position: relative;
width: 95%;
}
/* content inside center */
.iwant-event {
height: 100%;
left: 0;
width: 84.5%;
}
One would expect that the iwant-event class to fill 100% of the center. In chrome, I get this behavior. However, in Firefox, iwant-event does not fill 100% of the center. A simplified version of my HTML is:
<body>
<div class="test">
<div class="banner">Banner stuff here</div>
<div class="center">
<div class="iwant-event"></div>
</div>
</div>
</body>
I am fairly conversant with basic CSS, but have never tried developing for many browsers before. I would appreciate any help.
Are you sure it doesn't work in FF? Fiddle here: http://jsfiddle.net/mZ3Vp/1/ works fine on my machine. If it doesn't work for you, could you specify what OS you're on and what version of FF are you using?
One would expect that the iwant-event class to fill 100% of the center.
What is not happening exactly? Do you want iwant-event to fill the container horizontally and vertically? It does fill it vertically as far as I can see. Horizontally it does not because you have the rule:
.iwant-event {
width: 84.5%;
}
You need to change this to...
.iwant-event {
width: 100%;
}
...for full horizontal filling. And of course you have 3px of padding on center as well, so you need to remove this to get iwant-event to completely fill center.