I have a empty div on my page that is centred and is filled with only a colour. When coding I am using firefox as my test browser. I had issues getting the div to appear and when I checked it in chrome it appeared no problem. Now it only appears in chrome. Im not sure if it is a simple extension that needs to be used or my code is wrong. My code and css is posted below. Any advise helps as this is getting a tad frustrating.
div.slider {
background-color:#78A9AD;
width: 15vw;
height: 25vw;
clear:left;
left: 0;
margin: auto;
margin-top:60px;
position: absolute;
top: 50%;
width: 100%;
}
HTML:
<div class="slider" >
</div>
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
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;
}
We have a news roller here http://www.businesseventsydney.com.au/home-page-test.cfm in the right nav column. It works great in FF and Chrome, but in IE, news stories are running into each other.
Can someone shed any light on what may be going wrong with it?
This seemed to work correctly in IE8, what version are you using?
Anyway, I was able to reproduce putting it into Compatibility Mode or IE7 mode.
Identifying the problem, it seems the container div which has overflow: hidden correctly set, is set to a very large height. This is the div I am referring to:
<div class="latest-news-content" style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; height: 399px; ">
I set the height to 130px and it seemed to solve the issue. The more interesting question is why does this not happen in all browsers, I've yet to investigate.
Sometimes there is a difference between IE versions and other browsers when it comes to pixel spacing. A work around for this would be to have an IE specific style for the ul and li elements. I would recommend that you wrap your current in line css (regardless):
<ul style="top: -465px; height: 1380px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; list-style-type: none; position: relative; z-index: 1; ...
<li style="width: 199px; height: 115px; overflow: hidden; float: none; ...
into separate classe(s) , and switch them out in IE 9 browsers for the amended versions. You probably only need to tweak the top value for the ul element, and the height of the li element
add position:relative to div.latest-news-container
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.
My Chrome install updated itself last night (without telling or asking me!)
It now interprets CSS percentage relative positioning differently to yesterday. Suppose I have:
<body>
<div class="everything">
<div class="centerMe">
Center me!
</div>
</div>
</body>
And this CSS:
body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.everything
{
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
.centerMe
{
position: relative;
top: 50%;
left: 50%;
}
In the version of Chrome I had until last night (6.x), and for that matter in Firefox 3.6.10 and IE 8, the Center me! appears roughly in the middle of the page, vertically and horizontally.
But in Chrome 7.0.517.41, it is only centred horizontally. Vertically, it is at the top of the page.
Was this change made deliberately to address a long-standing inaccuracy in CSS rendering, or is it a new bug in 7.x that Google will fix soon?
Notes:
If I take out the <div class="centerMe"> and corresponding </div> then Chrome 7.x obeys the vertical positioning, but Firefox and IE don't! (i.e. browsers all reverse their behaviour).
If I change the CSS for .centerMe to position: absolute; all browsers I've tested behave consistently, centring vertically and horizontally. This makes more sense anyway, so would appear to be the sane workaround for anyone who hits this as a problem.
As always, IE's behaviour is nothing remotely similar unless <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> appears at the start of the HTML.
It seems Chrome 7 doesn't calculate implicit height of an absolute-positionned element, as this will work :
body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.everything
{
position: absolute;
left: 0px;
top: 0px;
right: 0px;
height:100%; /* fix height */
}
.centerMe
{
position: relative;
top: 50%;
left: 50%;
}
I don't see anything in W3C specifications so I think it's a "bug". Anyway this method is bad to center an element ^^